Loading... [tip type="red"]注：本教程不适合handsome主题。如需加pwa请转到 https://blog.iucky.cn/system/193.html 进行加入[/tip] ## 介绍 ## PWA（Progressive Web App）是一种理念，使用多种技术来增强 web app 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。 ## 优势 ## 它比原生应用更轻量，但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」（虽然依然是基于浏览器的技术），能够把 PWA 网站添加到你的桌面上，不管是 PC 操作系统还是手机操作系统，类似于一个原生应用一样，并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭，是 Web 的子集。 ## 方法 ## - 开启HTTPS，并且强制HTTPS [tip type="red"]这是必要的，自己申请证书装上[/tip] - 根目录上传 Service-Worker.JS - 根目录上传 Manifest.JSON 并修改内容 ```json { "name": "LingXI - 灵汐网", "short_name": "灵汐网", "description": "HI，灵汐网欢迎您的光临！不定期更新文章的啦", "icons": [ { "src": "https://autive.cn/favicon.ico", "sizes": "64x64", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "120x120", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "144x144", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "152x152", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "192x192", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "384x384", "type": "image/png" }, { "src": "https://autive.cn/favicon.ico", "sizes": "512x512", "type": "image/png" } ], "start_url": "/", "display": "standalone", "background_color": "#FFFFFF", "theme_color": "#FFFFFF", "lang": "en" } ``` - 在 header.php 文件里插入 <link rel="manifest" href="/manifest.json"> - 将下列代码插入 header.php 里面，且必须在 <!DOCTYPE HTML> 前面。 ```php <?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 代码 ```html <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][1] [1]: http://pans.autive.cn/#/s/DaCE 最后修改：2020 年 11 月 13 日 10 : 16 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用，请随意赞赏 赞赏作者 微信
此处评论已关闭