2

Service Worker を使用して、静的アプリ シェル ファイルの一部を事前キャッシュしようとしています。ビルドシステムを使用していないため、「sw-appcache」を使用できません。ただし、「sw-toolbox」を使用してみましたが、事前キャッシュには使用できません。

Service Worker JS で行っていることは次のとおりです。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('gdvs-static').then(function(cache) {
        var precache_urls = [
            '/',
            '/?webapp=true',
            '/css/gv.min.css',
            '/js/gv.min.js'
        ];

        return cache.addAll(precache_urls);
    });
  );
});

私もこれを試しました：

importScripts('/path/to/sw-toolbox.js');

self.addEventListener('install', function(event) {
   var precache_urls = [
      '/',
      '/?webapp=true',
      '/css/gv.min.css',
      '/js/gv.min.js'
   ];

   toolbox.precache(precache_urls);
});

アプリの URL は次のとおりです: https://guidedverses-webapp-staging.herokuapp.com/ サービス ワーカー ファイルの URL は次のとおりです: https://guidedverses-webapp-staging.herokuapp.com/gdvs-sw。 js

私は何が欠けていますか？

4

1 に答える 1

3

愚かな私。Service Worker に fetch ハンドラを追加するのを忘れていました。appchache のように動作し、キャッシュ URL と一致すると、キャッシュされたデータを自動的に返すと思いました。Service Worker の力を過小評価していました。次のコードは私のためにトリックをしました。

this.addEventListener('fetch', function(event) {
  console.log(event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
于 2015-11-21T08:02:44.440 に答える