如何包含 sw-precache 未命中的文件答案

【问题标题】：how do I include files that sw-precache misses如何包含 sw-precache 未命中的文件
【发布时间】：2018-10-30 09:22:15
【问题描述】：

上下文

我正在使用包裹 sw-precache 的 parcel-plugin-sw-precache 以使其与 Parcel.js 一起使用。一切都按预期工作，我一直在测试我的离线应用程序。

问题

我将 react-pdf.js 添加到我的项目中，当 sw-precache 生成该库时，该库的依赖项之一不会添加到服务工作者中。我知道这一点，因为当我切换到离线模式时，文件“pdf.worker.entry.7ce4fb6a.js”会出现 304 错误。

我的尝试

我正在尝试使用以下代码手动将文件添加到 package.json parcel-plugin-sw-precache 配置：

 "sw-precache": {
    "maximumFileSizeToCacheInBytes": 10485760,
    "staticFileGlobs": [
      "/pdf.worker.entry.7ce4fb6a.js"
    ]
  },

我不确定文件路径是相对于 package.json 还是相对于生成的 service worker。无论如何，手动指定的文件不会像我期望的那样被添加来生成服务工作者。如下所示。

self.__precacheManifest = [{
  "url": "index.html",
  "revision": "ac5ace7a43a0fef7ae65fd3119987d1f"
}, {
  "url": "castly.e31bb0bc.css",
  "revision": "657409f7159cb857b9409c44a15e653f"
}, {
  "url": "castly.e31bb0bc.js",
  "revision": "018d4664d809ec19d167421b359823ad"
}, {
  "url": "/",
  "revision": "af5513bb330deae3098ab289d69a40c7"
}]

问题

如果 sw-precache 或 parcel-plugin-sw-precache 似乎缺少某些文件，我如何确保将它们添加到生成的 service worker 中？

【问题讨论】：

标签： service-worker offline-caching workbox sw-precache parceljs

【解决方案1】：

在我的探索中寻找答案。我放弃了使用 parcel-plugin-sw-precache 转而使用工作箱。如果您有兴趣使用 Parcel.js 创建离线应用程序。然后我推荐 Workbox，因为它是下一代 sw-precache。

这就是我的工作方式：

学习

了解什么是 Workbox 以及此 code lab. 的作用

实现

1) Install the Workbox CLI globally.
2）在根目录中创建一个占位服务工作者。例如sw_shell.js - 外壳是一个保存文件。 Workbox 向导将选择它并生成一个自动生成新的 sw.js 文件。 3) 将以下代码添加到 sw_config.js 中：

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

if (workbox) {
workbox.skipWaiting();
workbox.clientsClaim();
workbox.precaching.suppressWarnings();

// The next line came from the code lab
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute("/index.html");
} else {
  console.log(`Boo! Workbox didn't load ?`);
}

4) 从项目根目录中打开的命令行运行此代码。

workbox wizard --injectManifest

5) 按照向导中的步骤操作。出于开发目的，将“root web app”指向您的 parcel dist 文件夹。 Workbox 很神奇，将这些文件提取到一个新的 sw.js 文件中。

6) 向导将询问您现有的 sw.js 文件。在我的情况下，我使用 sw_shell.js。

a:Workbox 获取 sw_shell.js。
c：在运行向导时指定的位置生成新的 sw.js 文件，并注入文件以脱机运行。

在我的例子中，我让新的 sw.js 在我的根文件夹中生成，因为 Parcel 根据我的 index.js 中的脚本自动拾取它。

'use strict';
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').then(function(reg) {
      console.log('Worker registration started')
      reg.onupdatefound = function() {
         console.log('update found')
        var installingWorker = reg.installing;
        installingWorker.onstatechange = function() {

          console.log('installing worker')
          switch (installingWorker.state) {

            case 'installed':
              if (navigator.serviceWorker.controller) {
                console.log('New or updated content is available.');
              } else {
                console.log('Content is now available offline!');
              }
              break;

            case 'redundant':
              console.error('The installing service worker became redundant.');
              break;
          }
        };
      };
    }).catch(function(e) {
      console.error('Error during service worker registration:', e);
    });
  });
}

7) 将workbox injectManifest 添加到您的 package.json 以确保 Workbox 获取您的文件的任何更改：

  "scripts": {
    "start": "parcel index.html workbox injectManifest"
}

如果您想了解更多信息，请告诉我。有一个video here 也帮助了我一点。

【讨论】：