CDN 服务工作者

Question

我正在尝试使用sw-precache设置 service worker来缓存 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 限制了 service worker 只能控制该路径下的指定内容/js/。

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