·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

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

135 2
发表于 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步实现,浏览一次,断网可用,有网自动更新,是不是很神奇?
我要说一句 收起回复
创宇盾启航版免费网站防御网站加速服务

评论2

拾光Lv.8 发表于 2023-9-23 07:57:23 | 查看全部
干货分享,大家可以去试试
我要说一句 收起回复
婷姐Lv.8 发表于 2023-9-23 07:57:55 | 查看全部
牛逼,牛逼
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:18.216.161.178,GMT+8, 2024-12-22 22:53 , Processed in 0.258905 second(s), 92 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表