如何将sw-precache遗漏的文件包括在内？

Question

上下文

我使用包裹-插件-sw-方案，包装周围的sw-方案，使它与Parcel.js工作。一切都如期而至，我一直在测试我的离线应用。

问题

我在我的项目中添加了Reacti-pdf.js，这个库的一个依赖项在由sw-precache生成时不会添加到服务工作人员中。我之所以知道这一点，是因为当我切换到脱机模式时，文件"pdf.worker.entry.7ce4fb6a.js“会产生304错误。

我已经尝试过的

我正在尝试使用以下代码手动将该文件添加到package.json配置中：

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

我不确定文件路径应该是相对于package.json还是相对于生成的服务工作人员。在任何情况下，手动指定的文件都不会像我预期的那样添加到生成服务工作者。如下所示。

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

问题

如果service或plugin precache似乎缺少一些文件，我如何确保它们被添加到生成的服务工作人员中？

Answer 1

在我寻找答案的过程中。我放弃了使用包插件-sw-precache，转而使用工作盒。如果您对使用Parcel.js创建脱机应用程序感兴趣的话。然后我推荐工作盒，因为它是下一代的sw-precache。

我是怎么让它起作用的

学习

了解工作框是什么以及如何使用此代码实验室。

实现

1) 全局安装工作框CLI。

2)在根目录中创建占位符服务工作者。例如，sw_shell.js -- shell是一个保存文件。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)遵循向导中的步骤。为了开发目的，请将“根web应用程序”指向您的文件夹。Workbox做到了它的神奇之处，并将这些文件拾取到一个新的sw.js文件中。

6)向导将请求您现有的sw.js文件。在我的例子中，我使用sw_shell.js。

答:工作盒拿起了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中，以确保工作框获取对文件的任何更改：

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

如果你想知道更多关于这件事的话请告诉我。有一个视频在这里也对我有所帮助。