中文静网的pwa代码分享，浏览一次，断网居然也可以访问

哥斯拉 · 发表于 2023-9-23 07:57:06

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

网页浏览一次后，把网线拔了，也能访问，pwa真的这么神奇吗？这个网站就实现了！
查看效果：https://cnj8.com/index.html
怎么操作？
1、html端加入
<script>if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js');}</script><link rel="manifest" href="/index.json">
2、sw.js
const CACHE_NAME = 'lc999';self.addEventListener('install', event => {});self.addEventListener('fetch', event => { if (event.request.method != 'GET') return false; event.respondWith(caches.match(event.request).then(response => { if (response) return response; return fetch(event.request).then(response => { if (!response.ok) return response; const newResponse = response.clone(); if(event.request.url.indexOf("http")===0){ caches.open(CACHE_NAME).then(cache => cache.put(event.request, newResponse)); } return response; }); })); });
3、需要及时更新的网页中加入
const CACHE_NAME = 'lc999';
if ('serviceWorker' in navigator) {fetch(location.href + '?&t=' + Math.round(Number(new Date()) / 120000), {cache: "no-cache"}).then(response => {if (response.ok){const newResponse = response.clone();caches.open(CACHE_NAME).then(cache => cache.put(location.href, newResponse));}}); }
总结：3步实现，浏览一次，断网可用，有网自动更新，是不是很神奇？

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！