如何包含sw预缓存未命中的文件

Question

上下文

我正在使用包裹插件sw-precache，它围绕着sw-precche使其与parcel.js一起工作。一切都如预期的那样工作，我一直在测试我的离线应用程序。

问题

我在我的项目中添加了react-pdf.js，当sw-preche生成该库时，该库的一个依赖项不会添加到服务工作者中。我知道这一点是因为当我切换到脱机模式时，文件"pdf.worker.entry.7ce4fb6a.js"会出现304错误。

我尝试过的

我正在尝试使用以下代码手动将文件添加到package.json包裹插件sw-precache-config中：

"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"
}]

问题

如果软件预缓存或包插件软件预缓存似乎缺少一些文件，我如何确保它们被添加到生成的服务工作者中？

Answer 1

在我探索答案的过程中。我放弃了使用包插件sw-precache，转而使用workbox。如果你有兴趣用Parcel.js创建一个离线应用程序。那么我推荐Workbox，因为它是下一代sw-precache。

我就是这样让它工作的：

学习

了解Workbox是什么以及它如何使用这个代码实验室。

隐含

1( 全局安装Workbox CLI
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( 按照向导中的步骤操作。出于开发目的，将"根web应用程序"指向您的包裹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添加到您的软件包.json中，以确保Workbox能够对您的文件进行任何更改：

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

如果你想了解更多这方面的信息，请告诉我。这里有一段视频也帮了我一点忙。