CDN服务工作者

Question

我尝试使用sw-precache设置服务工作者来缓存来自CDNJS的资产以供脱机使用。不幸的是，这似乎并没有起作用。这就是我到目前为止所拥有的：

在index.html中加载任何脚本之前：

<script type='text/javascript'>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/js/service_worker.js')
      .then(function() {
        console.log("Service Worker Registered")
      })
  }
</script>

这是我用来生成服务工作者的Gulp任务：

const config = require('../config')
const gulp = require('gulp')
const swPrecache = require('sw-precache')

gulp.task('serviceWorker', (callback) => {

  swPrecache.write(config.build.serviceWorker, {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/cdnjs\.cloudflare\.com/,
        handler: 'networkFirst'
      }
    ]
  }, callback)
})

当我运行应用程序时，我看到Service Worker Registered已登录到控制台。但是，如果我断开我的wifi，应用程序无法加载脚本。我做错了什么？

Answer 1

您正在某个JS路径/js/service_worker.js注册服务工作者。这里，scope将服务工作者限制为仅控制该路径/js/下的指定内容。

I suggest you to register service worker at root level，即www.example.com/，您就可以控制在此域下投放的所有网页。

Answer 2

我认为您的问题在于范围。

服务工作者只有它所在目录的最大范围。也就是说，它无法加载从其结构或其上方的位置拉出的文件/请求/响应，仅在下面。

因此，如果您将服务工作者的位置更改为Web项目的根目录，则应触发fetch事件，并且您的资产应从缓存加载。

这里将在“注册服务工作者”部分进一步说明。 https://developers.google.com/web/fundamentals/getting-started/primers/service-workers