コンテンツへスキップ

複雑なService Workerを作る際にはimportScriptsを使おう

by : 2018/12/08

Service WorkerはWebブラウザ側で実行されるJavaScript(メインスレッド)とは別で実行されます。バックグラウンド処理に使うこともできますし、メインスレッドで行うと画面が固まってしまうような重たい処理を実行させることもできます。

そんなService Workerを活用していく中で、処理が肥大化していくならば別ファイルとして切り出していきましょう。その際に使えるのがimportScriptsです。

importScriptsの使い方

例えばメインスレッド側のJavaScriptでは次のように処理を書きます。


if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Service Worker登録完了
}, /*catch*/ function(error) {
// Service Worker登録失敗
});
} else {
// Service Workerをサポートしていない
}

view raw

index.js

hosted with ❤ by GitHub

そしてService Worker(sw.js)を以下のように記述します。


importScripts('import.js');
func();

view raw

index.js

hosted with ❤ by GitHub

self.importScripts という書き方もありますが、どちらも同じ意味です。 import.js は以下のように記述します。


const func = () => {
console.log('Output from import.js');
}

view raw

index.js

hosted with ❤ by GitHub

こうすることで、外部ファイルを読み込んでService Workerの中で利用できます。なお、複数ファイルの読み込みも可能です。


importScripts('import.js', 'other.js');

view raw

index.js

hosted with ❤ by GitHub

読み込みは同期処理

コードを見て分かる通り、importScripts は同期処理で実行されます。読み込み完了時のコールバックもなく、返り値がPromiseな訳でもありません。さらに言えば、インポートされるファイルで最後に return を書いたり、moduleexport は使えません。

読み込まれるファイルの特徴

インポートされるファイルは元ファイルと同じく self が使えます。これは ServiceWorkerGlobalScope であり、IndexedDB も利用可能です。また、インポートされるファイルを編集しても、元になるService Workerファイルが更新されていないとWebブラウザは更新してくれませんので注意してください。


importScriptsを使うことで、メインスレッドとワーカースレッドで同じライブラリを活用できるようになるでしょう。特に重たい計算処理の伴うようなものについては、ワーカースレッドで計算して結果だけメインスレッドで受け取って描画するといった使い分けもできそうです。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。