Hexo手动添加PWA

不要再装那些Hexo的PWA插件了。

为Hexo博客添加PWA支持,主要分两部分:

准备manifest

制作图标

  • 制作各种大小的图标并存放在source/images/icons下。

新增manifest.json

  • 在hexo的source目录下添加一个manifest.json,内容类似:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    {

        "name": "mykonakona",
        "short_name": "mykonakona",
        "theme_color": "#222f3e",
        "background_color": "#18222d",
        "display": "standalone",
        "scope": "/",
        "start_url": "/",
        "icons": [
            {
             "src": "/images/icons/icon-48x48.png",
             "sizes": "48x48",
             "type": "image/png",
             "purpose": "any maskable"
             },
            ...
             {
             "src": "/images/icons/icon-512x512.png",
             "sizes": "512x512",
             "type": "image/png",
             "purpose": "any maskable"
             }
         ]

    }

图标与json也可以通过类似PWA Application Icon Generator Free Online Tool的在线工具生成。

修改<head>标签

  • 修改所用hexo主题的模板文件,在head.ejs添加:

    1
    2
    <meta name="theme-color" content="#222f3e"/>
    <link rel="manifest" href="/manifest.json">

    这里theme-colorcontent值与manifest.json内的值相同。

准备Service Worker

新增service-worker.js

  • 在hexo的source目录下新建一个sw.js文件(需要将正则处的mykonakona.github.io替换为自己的网址):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    importScripts('https://cdnjs.cloudflare.com/ajax/libs/workbox-sw/7.0.0/workbox-sw.js');

    if (workbox) {

        workbox.precaching.precache(['/', '/index.html']);
       
        workbox.routing.registerRoute(new RegExp('^https?://mykonakona.github.io/?$'), new workbox.strategies.NetworkFirst());
       
        workbox.routing.registerRoute(new RegExp('.*.html'), new workbox.strategies.NetworkFirst());
       
        workbox.routing.registerRoute(new RegExp('.*.(?:js|css|jpg|png|gif)'), new workbox.strategies.StaleWhileRevalidate());
    }

NetworkFirst()与StaleWhileRevalidate()的使用,可参考workbox的相关文档与教程。

注册service-worker

  • 修改所用hexo主题的模板文件,在footer后的style.ejs添加注册service-worker的代码段:

    1
    2
    3
    4
    5
    <script>
        if (navigator.serviceWorker) {
        navigator.serviceWorker.register('/sw.js');
    }
    </script>

设置不渲染

  • 在hexo的_config.yml里,设置不渲染manifiest.json及sw.js:

    1
    2
    3
    skip_render:
     - manifest.json
     - sw.js

小结

PWA其实用处不大,添加这个主要是为了跑Lighthouse分。过程中意识到Hexo确实用的人越来越少了:很多插件缺乏维护,照搬文档还不如手工添加。

硬着头皮补课,网上的sw.js例子调试时报错频频。发现是因为最新的workbox-sw.js里,函数命名从小驼峰式改成了大驼峰式。比如旧版本例子里的networkFist()如今都变成了NetworkFirst()。看来谷歌也要面对项目管理问题……

这个简单教程还是有一些前提的,比如PWA需要https支持等,这里不再赘述。

好的博客永久链接 我的笔记工作流