Typecho博客加入PWA
前言
这次踩了好多坑,有很多篇教程都是一样的,但是又刚刚好似乎是不适配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 https://blog.iucky.cn/sw.js
之后放入网站根目录
2. offline.html
设计简单的 offline.html
用于离线降级显示。简单的示例参考: https://blog.iucky.cn/offline.html
放入网站根目录
3. manifest.json
有个注意事项:
需要注意的是,你需要制作一个256*256及以上的ico,不然将会出现报错,无法成功!
下载本站的json并修改适合你的博客,放到站点根目录(https://blog.iucky.cn/manifest.json)
{
"scope": "/",
"name": "秉松博客",
"short_name": "秉松博客",
"start_url": "/",
"display": "standalone",
"description": "有秉性正直的松",
"dir": "rtl",
"lang": "cn",
"orientation": "portrait",
"theme_color": "#fff",
"background_color": "#fff",
"icons": [
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "https://blog.iucky.cn/favicon-1.ico",
"sizes": "512x512",
"type": "image/png"
}
]
}
引入文件以及载入支持
将下面代码放至自定义输出head 头部的HTML代码
<!--PWA(manifest必须加载)-->
<link rel="manifest" href="/manifest.json">
<!--PWA(为iOS和Windows10载入支持)-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="秉松博客">
<link rel="apple-touch-icon" href="https://blog.iucky.cn/favicon-1.ico">
<meta name="msapplication-TileImage" content="https://blog.iucky.cn/favicon-1.ico">
<meta name="msapplication-TileColor" content="#fff">
<!--PWA End-->
注册sw.js
将下面的代码放入自定义输出body 尾部的HTML代码
注意先知:
请注意,这串代码中,你需要修改一处地方,自己从代码里找下吧
<script>
// 注册 ServiceWorker
function regSW() {
if ('serviceWorker' in navigator) {
// 注册
navigator.serviceWorker
.register('/sw.js', {scope: '/'})
.then( function(registration) {
console.log('ServiceWorker 注册成功!作用域为: ', registration.scope);
})
.catch(function(err) {
console.log('ServiceWorker 注册失败: ', err);
});
// SW 消息处理
navigator.serviceWorker.ready.then(function(reg) {
if (!window.Notification || !window.MessageChannel) {
return;
}
// 建立一个消息管道,用于当前页面与 SW 之间的消息传递,也便于 SW 知道该消息的来源
var channel = new window.MessageChannel();
channel.port1.onmessage = function(e) {
console.log('get Message: ', e.data);
if (!e.data) {
return;
}
// 要求申请通知权限
if (e.data.type === 'applyNotify') {
window.Notification.requestPermission().then(function(grant) {
if (grant !== 'granted') {
console.log('申请通知权限被拒绝了!')
return;
}
reg.active.postMessage({type: 'notify', info: e.data.info}, [channel.port2]);
});
}
}
reg.active.postMessage('hello', [channel.port2]);
});
// 掉线通知示例
$(window).on('offline', function() {
Notification.requestPermission().then(function (grant) {
if (grant !== 'granted') {
return;
}
var notification = new Notification("Hi,网络不给力哟", {
body: '您的网络貌似离线了,不过在秉松博客里访问过的页面还可以继续打开~',
icon: 'https://kyun.ltyuanfang.cn/tc/2020/07/30/9b5b630e9860b.png'
});
notification.onclick = function() {
notification.close();
};
});
})
}
}
regSW();
</script>
最后,刷新下浏览器缓存,就可以看到效果啦!!
成功了的话可以在评论区和我说说呀