javascript - CDN 服务 worker

Question

我正在尝试使用 sw-precache 设置服务 worker 从 CDNJS 缓存 Assets 以供离线使用。不幸的是，这似乎不起作用。到目前为止，这是我所拥有的:

在 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>

这是我用来生成服务 worker 的 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 中注册 service worker。这里scope约束service worker只能控制该路径/js/下的指定​​内容。

我建议您在根级别注册 service worker 即 www.example.com/然后您就可以控制在该域下提供服务的所有页面。