在我的探索中寻找答案。我放弃了使用 parcel-plugin-sw-precache 转而使用工作箱。如果您有兴趣使用 Parcel.js 创建离线应用程序。然后我推荐 Workbox,因为它是下一代 sw-precache。
我是如何让它工作的:
学习
了解什么是 Workbox 以及此代码实验室的作用。
实施
1)全局安装 Workbox 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) 按照向导中的步骤进行操作。出于开发目的,将“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"
}
如果您想了解更多信息,请告诉我。这里有一个视频也对我有所帮助。