使用 Service Worker 预缓存静态文件答案

【问题标题】：Pre-cache statics files using Service Worker使用 Service Worker 预缓存静态文件
【发布时间】：2016-02-23 10:44:19
【问题描述】：

我正在尝试使用服务工作者预缓存我的一些静态应用程序外壳文件。我不能使用“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/ 这是我的 service worker 文件的 URL：https://guidedverses-webapp-staging.herokuapp.com/gdvs-sw.js

我错过了什么？

【问题讨论】：

标签： javascript google-chrome caching service-worker progressive-web-apps

【解决方案1】：

我傻了。我忘记将获取处理程序添加到我的服务人员中。我认为它像 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);
    })
  );
});

【讨论】：