在国外很火的PWA，在国内因为各种App的盛行倒是显得很小众，本身这是没有推广开的技术。本站之前已经部署了serviceworker，这个是构建PWA应用的主要前提。这里延续之前的文章《serviceworker配置优化版》对本站进行PWA改造的记录。
serviceworker
相关的配置看之前的文章介绍，这里不再重复记录
manifest.json
在网站的根目录创建一个manifest.json的配置文件：
{
"name": "网站的完整标题",
"short_name": "网站标题简称",
"start_url": "网站起始URL一般是/",
"display": "这里写网站在浏览器中显示是模式，一般是standalone",
"background_color": "网站的背景色16进制",
"description": "网站的描述",
"orientation": "网站显示的方向，一般是portrait-primary",
"theme_color": "网站主题颜色，16进制",
"icons": [
{ // 网站放置在桌面使用的图标，一般提供192和512两个尺寸的即可
"src": "img/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/512.png",
"sizes": "512x512",
"type": "image/png"
}]
}注意，这里是的JSON文件，里面不能有注释部分，上面一些的文字部分为了做说明。
本站的manifest.json:
{
"name": "chaihongjun.me|柴宏俊web技术学习笔记",
"short_name": "柴宏俊web技术学习笔记",
"start_url": "/",
"display": "standalone",
"background_color": "#fff",
"description": "记录chaihongjun学习web技术的个人博客，涉及的技术内容包括前端的javascript,vue,css,html后端的php和mysql数据库，以及一些linux服务器的运维知识",
"orientation": "portrait-primary",
"theme_color": "#fff",
"icons": [
{
"src": "/public/static/images/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/public/static/images/512.png",
"sizes": "512x512",
"type": "image/png"
}]
}然后在网站的首页<head>区域添加：
<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#fff"> <!-- color是网站主题颜色 -->
好了，至此网站的PWA改造就完成了，上述部分都是改造过程中必须完成的部分。对于PWA应用的使用情况如何，建议部署以下检测代码：
//PWA用户端监测
self.addEventListener('error', function(event) {
var msg = {
message: event.message,
filename: event.filename,
lineno: event.lineno,
stack: event.error && event.error.stack
};
console.error("ServiceWorker Error:", msg); // 添加日志记录
});
