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上注册服务工作者。 这里范围限制了服务工作者仅控制该路径/js/下的指定内容。

I suggest you to register service worker at root level即www.example.com/） I suggest you to register service worker at root level这样您就可以控制在该域下提供服务的所有页面。

Answer 2

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

Service Worker仅具有其所在目录的最大范围。也就是说，它无法加载从其结构或更高结构（仅在其下方）位置提取的文件/请求/响应。

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

在“注册A服务工作者”部分中对此进行了进一步说明。 https://developers.google.com/web/fundamentals/getting-started/primers/service-workers