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约束service worker只能控制那个路径下的指定内容/js/.

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

Answer 2

我认为您的问题与范围有关。

Service worker 仅具有其所在目录的最大范围。也就是说，它无法加载 files/requests/responses 从其结构或上方的位置拉取的内容，只能在其下方。

因此，如果您将 Service Worker 的位置更改为您的 Web 项目的根目录，应该会触发 fetch 事件并且您的资产应该从缓存中加载。

这在 "Register A service worker" 部分中有进一步解释。 https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

CDN 服务工作者

CDN Service Worker

javascript

service-worker

sw-precache