PWA

最近闲来无事，把网站升级了，更加像原生APP 记录下升级过程，免得以后忘了 PWA是什么？可以去网上搜一下，but中文文章少一点 用Google 封装的 好的 workbox 来升级 注册Service Worker 在html页面注册 SW 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations() .then(regs => { for (let reg of regs) { // 注销掉不是当前作用域的所有的 Service Worker if (reg.scope !== 'http://localhost:8000/') { reg.unregister() } } // 注销掉污染 Service Worker 之后再重新注册自己作用域的 Service Worker window.addEventListener('load', () => { navigator.serviceWorker.register('./sw.js').then(function (e) { console.log("支持sw:", e.scope) }) }) }) } </script> 生成SW.js文件 google cdn 1 2 importScripts(" 'https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-sw.js' "); 国内建议不使用Google jsdelivr cdn 1 importScripts("https://fastly.jsdelivr.net/npm/[email protected]/build/workbox-sw.min.js"); SW.js 编写 配置相关 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 workbox.setConfig( { // 是否开启debug debug: false } ); let cacheSuffixVersion = '-220806'; // 缓存版本号 const maxEntries = 100; // 最大条目数 workbox.core.setCacheNameDetails({ prefix: 'zsan', // 前缀 suffix: cacheSuffixVersion, // 后缀 }); //检测是否安装成功 if (workbox) { console....