这篇文章上次修改于 2 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。

前言

这次踩了好多坑,有很多篇教程都是一样的,但是又刚刚好似乎是不适配handsome主题,总是出错。之后花了一晚上的时间和我的好朋友 在研究,陪着我搞了很长的时间,感谢~
有一点请注意:使用PWA后请不要启动handsome插件自带的本地离线缓存功能
其实这个功能就是我们要弄的PWA(但今天我们不去用它)
本文参考了

你需要注意的Service Worker 特点

  • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
  • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
  • 单独的作用域范围,单独的运行环境和执行线程
  • 不能操作页面 DOM。但可以通过事件机制来处理

如何改造?

参考如下步骤为你的博客快速地引入 PWA:1. 添加sw.js 2. 添加offline.html 3. manifest.jsopn 4. 引入 5. 注册sw.js

1. 添加sw.js

可以直接参考本站的sw.js
之后放入网站根目录

2. offline.html

设计简单的 offline.html 用于离线降级显示。简单的示例参考: https://blog.iucky.cn/offline.html
放入网站根目录

3. manifest.json

有个注意事项:
需要注意的是,你需要制作一个256*256及以上的ico,不然将会出现报错,无法成功!
下载本站的json并修改适合你的博客,放到站点根目录(

引入文件以及载入支持

将下面代码放至自定义输出head 头部的HTML代码

注册sw.js

将下面的代码放入自定义输出body 尾部的HTML代码
注意先知:
请注意,这串代码中,你需要修改一处地方,自己从代码里找下吧
最后,刷新下浏览器缓存,就可以看到效果啦!!
成功了的话可以在评论区和我说说呀

最后效果

亲亲留个评论再走呗

正在加载评论区...