在我探索答案的过程中。我放弃了使用包插件sw precache,转而使用workbox。如果您有兴趣使用Parcel.js创建脱机应用程序。然后我推荐Workbox,因为它是下一代sw precache。
我就是这样让它工作的:
学习
了解Workbox是什么,以及它的作用
code lab.
1)
Install the Workbox CLI globally.
-外壳是一个固定文件。Workbox向导将选取它并生成一个
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
c:在运行向导时指定的位置生成新的sw.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
这对我也有一点帮助。
