667e011117056be4df11470dbe577bcb.jpg
#背景简介
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

#特点

PWA不能包含原生OS相关代码。PWA仍然是网站,只是在缓存、通知、后台功能等方面表现更好。Electron程序相当于包裹OS原生启动器(Launcher)的网站,未来,许多Electron程序可能转化为PWA。

##优势

它比原生应用更轻量,但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」(虽然依然是基于浏览器的技术),能够把 PWA 网站添加到你的桌面上,不管是 PC 操作系统还是手机操作系统,类似于一个原生应用一样,并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭,是Web的子集。

##截图演示

演示图片来自|猫腻's Blog

#教程

Step1:开启Https-强制跳转‖『重要这是前提』
Step2:根目录上传service-worker.js(文末给出下载链接)
Step3:根目录上传manifest.json并修改内容
『name和short_name是标题‖description是描述‖src是icon图标』

{
"name": "多次元's Blog",
"short_name": "多次元's Blog",
"description": "请填写下描述",
"icons": [
    {
        "src": "请填写icon图标地址",
        "sizes": "64x64",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "120x120",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "请填写icon图标地址",
        "sizes": "512x512",
        "type": "image/png"
    }
],
"start_url": "/",
"display": "standalone",
"background_color": "#2196f3",
"theme_color": "#2196f3",
"lang": "en"
}

Step4:在主题header.php文件里插入链接

<link rel="manifest" href="/manifest.json">

注意以下JS需写在<!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'));

}
?>

Step5:在主题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>

service-worker.js下载地址: ## https://www.lanzous.com/iacuzwj

Last modification:April 5th, 2020 at 07:30 pm
如果觉得我的文章对你有用,请随意赞赏