使用Service Worker预缓存静态文件

Question

I am trying to pre-cache some of my static app shell files using service worker. I can't use 'sw-appcache' as I am not using any build system. However, I tried using 'sw-toolbox' but I am not being able to use it for pre-caching.

Here is what I am doing in my 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);
    });
  );
});

I've also tried this:

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);
});

Here is the URL of my app: https://guidedverses-webapp-staging.herokuapp.com/ Here is the URL of my service worker file: https://guidedverses-webapp-staging.herokuapp.com/gdvs-sw.js

What am I missing?

Answer 1

Silly me. I forgot to add the fetch handler into my service worker. I thought it works like appchache and automatically returns the cached data when matches with the cache URL. I underestimated the power of Service Worker. Following code did the trick for me.

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

  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});