ecmascript-6 - Use browser.js in a service worker

Question

We want to use a Service Worker to perform client-side source code transformation for development purposes. We want to use Babel to transpile ES6+/ES2015 files to ES5 modules.

However, including the browser version of babel in a Service Worker using importScripts causes the following errors:

GET http://localhost:8080/babel-core/browser.js net::ERR_FAILED

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8080/babel-core/browser.js' failed to load.

So, the question is, how to correctly import babel into a Service Worker.

edit: This is not the obvious NetworkError, as we can change the content of the file into something simple, which enables us to actually load and execute the file. Also, the file can be loaded with a normal <script> tag.

edit2: To get this message, check out this repository https://github.com/onsetsu/lively4-core.git, start a local server at port 8080 and finally load http://localhost:8080/bootworker.html. We are currently using Chrome 44.

Answer 1

原則として、サイトの機能にとって重要なことに Service Worker を使用することはお勧めできません。サービス ワーカーは漸進的な拡張を意図しており、関連するサービス ワーカーが利用できない場合でもサイトは機能するように設計する必要があります。

Service Worker をサポートしているブラウザーでも、ユーザーが Shift キーを押しながら再読み込みした場合や、Service Worker が制御を取得する前の最初のナビゲーションである場合、ページを制御するブラウザーが存在しない可能性があります。

特定の質問に答えるために、ServiceWorkerGlobalScopeService Worker コードが実行されると、通常のページのグローバル スコープとは異なる機能が公開されbrowser.jsます。インポートしようとしているスクリプト内の何かが、通常のページでのみ利用可能な機能を想定しているように見えます。残念ながら、Chrome の DevTools は、デバッガーが有効になっていても、特定のステートメントがエラーを引き起こしていることを明らかにしていないため、正確にどのステートメントが無効であるかはわかりません。