介绍
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。
优势
它比原生应用更轻量，但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」（虽然依然是基于浏览器的技术），能够把 PWA 网站添加到你的桌面上，不管是 PC 操作系统还是手机操作系统，类似于一个原生应用一样，并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭，是Web的子集。
方法
- 开启HTTPS强制跳转
重要前提 - 根目录上传
Service-Worker.JS - 根目录上传
Manifest.JSON并修改内容
{
"name": "山川行貉",
"short_name": "山川行貉",
"description": "快让我在雪地里撒点儿野。",
"icons": [
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "https://scxho.cn/favicon.ico",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"lang": "en"
}- 在文件里插入
<link rel="manifest" href="/manifest.json"> - 将下列代码插入
header.php里面，且必须在<!DOCTYPE HTML>前面。
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest" && ($this->is('post')||$this->is('page')) && stripos($_SERVER['HTTP_REFERER'], $_SERVER['SERVER_NAME'])) {
header('HTTP/1.1 200 OK');
ini_set("display_errors", 1);
$this->response($this->need('comments.php'));
}
?>- 在
footer.php插入以下JS代码
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('service worker 注册成功');
})
.catch(function (err) {
console.log('servcie worker 注册失败');
});
}
</script>