前言

这次踩了好多坑,有很多篇教程都是一样的,但是又刚刚好似乎是不适配handsome主题,总是出错。之后花了一晚上的时间和我的好朋友 霂森西 _ 櫻玲桉 在研究,陪着我搞了很长的时间,感谢~

有一点请注意:使用PWA后请不要启动handsome插件自带的本地离线缓存功能

其实这个功能就是我们要弄的PWA(但今天我们不去用它)

本文参考了https://lzw.me/a/pwa-service-worker.html

你需要注意的Service Worker 特点

  • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
  • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
  • 单独的作用域范围,单独的运行环境和执行线程
  • 不能操作页面 DOM。但可以通过事件机制来处理

如何改造?

参考如下步骤为你的博客快速地引入 PWA:1. 添加sw.js 2. 添加offline.html 3. manifest.jsopn 4. 引入 5. 注册sw.js

1. 添加sw.js

可以直接参考本站的sw.js https://blog.iucky.cn/sw.js

之后放入网站根目录

2. offline.html

设计简单的 offline.html 用于离线降级显示。简单的示例参考: https://blog.iucky.cn/offline.html

放入网站根目录

3. manifest.json

有个注意事项:

需要注意的是,你需要制作一个256*256及以上的ico,不然将会出现报错,无法成功!

下载本站的json并修改适合你的博客,放到站点根目录(https://blog.iucky.cn/manifest.json

点击展开显示

{
  "scope": "/",
  "name": "秉松博客",
  "short_name": "秉松博客",
  "start_url": "/",
  "display": "standalone",
  "description": "有秉性正直的松",
  "dir": "rtl",
  "lang": "cn",
  "orientation": "portrait",
  "theme_color": "#fff",
  "background_color": "#fff",
    "icons": [
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "64x64",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "120x120",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "https://blog.iucky.cn/favicon-1.ico",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

引入文件以及载入支持

将下面代码放至自定义输出head 头部的HTML代码

<!--PWA(manifest必须加载)-->
<link rel="manifest" href="/manifest.json">
<!--PWA(为iOS和Windows10载入支持)-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="秉松博客">
<link rel="apple-touch-icon" href="https://blog.iucky.cn/favicon-1.ico">
<meta name="msapplication-TileImage" content="https://blog.iucky.cn/favicon-1.ico">
<meta name="msapplication-TileColor" content="#fff">
<!--PWA End-->

注册sw.js

将下面的代码放入自定义输出body 尾部的HTML代码

注意先知:

请注意,这串代码中,你需要修改一处地方,自己从代码里找下吧

点击展开显示

<script>
// 注册 ServiceWorker
function regSW() {
    if ('serviceWorker' in navigator) {
        // 注册
        navigator.serviceWorker
            .register('/sw.js', {scope: '/'})
            .then( function(registration) {
                console.log('ServiceWorker 注册成功!作用域为: ', registration.scope);
            })
            .catch(function(err) {
                console.log('ServiceWorker 注册失败: ', err);
            });
 
        // SW 消息处理
        navigator.serviceWorker.ready.then(function(reg) {
            if (!window.Notification || !window.MessageChannel) {
                return;
            }
 
            // 建立一个消息管道,用于当前页面与 SW 之间的消息传递,也便于 SW 知道该消息的来源
            var channel = new window.MessageChannel();
 
            channel.port1.onmessage = function(e) {
                console.log('get Message: ', e.data);
                if (!e.data) {
                    return;
                }
 
                // 要求申请通知权限
                if (e.data.type === 'applyNotify') {
                    window.Notification.requestPermission().then(function(grant) {
                        if (grant !== 'granted') {
                            console.log('申请通知权限被拒绝了!')
                            return;
                        }
 
                        reg.active.postMessage({type: 'notify', info: e.data.info}, [channel.port2]);
                    });
                }
            }
 
            reg.active.postMessage('hello', [channel.port2]);
        });
 
        // 掉线通知示例
        $(window).on('offline', function() {
            Notification.requestPermission().then(function (grant) {
                if (grant !== 'granted') {
                    return;
                }
 
                var notification = new Notification("Hi,网络不给力哟", {
                    body: '您的网络貌似离线了,不过在秉松博客里访问过的页面还可以继续打开~',
                    icon: 'https://kyun.ltyuanfang.cn/tc/2020/07/30/9b5b630e9860b.png'
                });
 
                notification.onclick = function() {
                    notification.close();
                };
            });
        })
    }
}
regSW();
</script>

最后,刷新下浏览器缓存,就可以看到效果啦!!

成功了的话可以在评论区和我说说呀~~~~

最后效果

最后修改:2020 年 11 月 08 日 03 : 03 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

13 条评论

  1. 神奇の赵贰

    教程很不错,孩子很喜欢

    1. wibus
      @神奇の赵贰

      孩子喜欢就好

  2. TAOG

    你好请教下
    为什么我的没用...就是浏览器(Chrome)右上角没有那个加号
    Console里已经显示注册成功了,Network里也有小齿轮
    CDN缓存刷新试过了没用

    1. wibus
      @TAOG

      我这边访问你的站点是看到你没有加入manifest.json,你看看是不是忘记加载了,而且要放到根目录,不是主题,就是站点的根目录

      1. TAOG
        @wibus

        加了的呀
        https://iktao.cn/manifest.json
        是这个吗

        1. wibus
          @TAOG

          你没有引入json ,看清教程

          1. TAOG
            @wibus

            emm,已经在后台填了引入的代码,但是Console里没有显示加载,代码核对过一字不漏

            1. wibus
              @TAOG

              加我QQ吧:1596355173

  3. 健康管理

    文章写的很好啊,赞(ㆆᴗㆆ),每日打卡~~

    1. wibus
      @健康管理

      谢谢~~

  4. 櫻玲桉


    “引入文件以及载入支持”下面的

  5. imluren

    哎呦 踩踩吧

    1. wibus
      @imluren

      有点随便

域名代备案/服务器虚拟主机售卖/二级不死域名代制作/
老备案老域名/营业执照代办/QQ互联代申请/
海报宣传图设计/各类程序授权/各类业务

联系QQ:1032066668
点击联系