山川行貉 人生需要不断感动,才能守住那些始终干净的东西。

网站已运行 6 年 203 天 7 小时 23 分

Powered by Typecho & Sunny

5 online

Title

网站实现 PWA

Duseus

·

Article
⚠️ 本文最后更新于2023年12月17日,已经过了216天没有更新,若内容或图片失效,请留言反馈

介绍

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

优势

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

方法

  • 开启HTTPS强制跳转重要前提
  • 根目录上传Service-Worker.JS
  • 根目录上传Manifest.JSON并修改内容
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 代码:
 <?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代码
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>

现在已有 0 条评论,0 人点赞
Comment
发表
搜 索
博主