2

私がしていること

Service Worker コンポーネントを構築しています。私はそれが欲しい：

  • Service Worker 実装を含む単一の worker.js ファイル。
  • ワーカーに、キャッシュするファイルとキャッシュの名前を伝えられるようにしたいと考えています。
    • なんで？いくつかのプロジェクトでこのモジュールを要求したいのですが、それらのいずれにもワーカー ファイルを変更させたくありません。ワーカーは、キャッシュへのパスのリストを受け取ることができる必要があります。

私が試したこと

  • 構成オブジェクトを register メソッドに渡そうとしましたが、うまくいきませんでした。ワーカーはオブジェクトを受け取りませんでした。
  • ワーカーで利用可能な postMessage API を利用して、次のようにしました。
    1. ワーカーの登録では、キャッシュするルートを持つオブジェクトを含むメッセージをワーカーに送信しました。
    2. ワーカー内で、ワーカーをこのメッセージにサブスクライブし、パスを使用してキャッシュを作成しました。

自分の目で確かめてください

メインスレッドへのワーカの登録

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js').then(function(reg) {
        navigator.serviceWorker.controller.postMessage({
            'hello': 'world',
            cacheName: 'v1',
            urlsToCache: [
                "/index.html"
            ]
        });
    }, function(err) {
        console.log('ಠ_ಠ   Nope.', err);
    });
}

ワーカーファイル

'use strict';

var cacheName,
    urlsToCache;

importScripts('/node_modules/serviceworker-cache-polyfill/index.js');

self.addEventListener('message', function (evt) {
    cacheName = evt.data.cacheName;
    urlsToCache = evt.data.urlsToCache;
});

self.addEventListener('install', function(event) {
    setTimeout(function(){
        event.waitUntil(
            caches.open(cacheName)
            .then(function(cache) {
                console.log('Opened cache:', cache);
                return cache.addAll(urlsToCache);
            })
        );
    }, 2000);

});

これの何が問題なのですか？

setTimeout を使用してキャッシュを開くのを遅らせなければなりませんでしたが、これは間違っていて、見苦しく、信頼性がありません。

あなたは何を達成しようとしていますか？ಠ_ಠ</h3>

キャッシュへのパスを含むメッセージが届くまで待つようワーカーに指示する方法を見つけたいと考えています。

私のレポへのリンク

前もって感謝します。

4

1 に答える 1

1

プル リクエストをお送りしました: https://github.com/cristianelias/serviceworker_component/pull/1。基本的に私がしたことは、次のようにページ自体からキャッシュオブジェクトを使用することです:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/worker.js').then(function(reg) {
      caches.open('pages').then(function(pages){
         return pages.add('test.html'); 
      }).then(function(){
         console.log('cached!'); 
      });
    }, function(err) {
      console.log('ಠ_ಠ   Nope.', err);
  });
}

また、キャッシュ マッチのみを実行するように SW に指示します。

'use strict';

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(match){
            return match || fetch(event.request); 
        })
    );
});

Chrome 45 では期待どおりに動作しますが、キャッシュ オブジェクトをページに移動することはまったく新しいことなので、古いバージョンではわかりません。

于 2015-08-06T12:18:56.287 に答える