Hexo博客适配并支持PWA

PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。

在移动端可以利用标准化框架，让网页应用呈现和原生应用相似的体验。

What PWA

总的来说 PWA 不是特指某一项技术，而是应用了多项技术的 Web App。

其核心技术包括 App Manifest、Service Worker、Web Push等等。

Web APP与传统 Native APP的区别：

可安装性，无论手机可直接安装到桌面用户，更强的用户黏性。
可链接访问
可索引性，搜索引擎可索引其内容。
可离线访问，更好的浏览体验。

Hexo上是有插件可以直接支持PWA的，但是插件并不适配Hexo 5.2.0，只支持到Hexo 4.2.0之前的版本。

现通过非插件的方法让Hexo博客支持 PWA。

准备工作

首先，需要全站开启 HTTPS，因为 PWA仅仅支持 HTTPS站点。

另，准备好各种分辨率的图标一套，48x48、96x96、144x144、192x192、512x512等分辨率的图标。

配置清单文件

配置站点清单文件 manifest.json or site.webmanifest

内容如下：

{
    "lang": "zh-CN",                                   //站点语言
    "name": "睿先森",                                  //站点名称
    "short_name": "睿先森",                            //站点短名称
    "description": "这是一个睿先森(Senorui)记录和分享生活中所学、所思和所悟的小破站。",
    "theme_color": "#abd7ff",                          //应用主题颜色
    "background_color": "#abd7ff",                     //应用开屏背景颜色
    "start_url": "/",                                  //应用开屏页面
    "Scope": "/",                                      //manifest.json的作用域
    "display": "standalone",                            //应用显示模式
    "orientation": "any",                               //应用的默认方向       
    "icons": [{                                         //应用图标
        "src": "/icon/apple-icon-60x60.png",
        "type": "image/png",
        "sizes": "60x60"
    },{
        "src": "/icon/apple-icon-72x72.png",
        "type": "image/png",
        "sizes": "72x72"
    },{   
        "src": "/icon/apple-icon-96x96.png",
        "type": "image/png",
        "sizes": "96x96"
    },{     
        "src": "/icon/apple-icon-144x144.png",
        "type": "image/png",
        "sizes": "144x144"
    },{    
        "src": "/icon/android-icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
    },{        
        "src": "/icon/android-icon-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
    }]
}

将APP清单文件放在博客根目录下，并在</head>前引入。

<link rel="manifest" href="/site.webmanifest">

或者

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

配置Service Worker

Service Worker让 PWA拥有离线缓存的能力，这样即使在无网络的情况下也可以继续浏览文章，大大地增强了访客对站点的浏览体验。

那么就需要在根目录下新建文件sw.js

以下为一份很简单的 Service Worker文件，非科班的博主也不太懂怎么写。

const version = 'offline-cache-v1'

self.addEventListener('install', function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        Promise.all([
            self.clients.claim(),
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== version) {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

self.addEventListener('fetch', function (event) {
    
    console.log('url is', event.request.url)

    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                return response;
            }

            var request = event.request.clone();
            return fetch(request).then(function (httpRes) {
                if (!httpRes || httpRes.status !== 200) {
                    return httpRes;
                }

                var responseClone = httpRes.clone();
                caches.open(version).then(function (cache) {
                    cache.put(event.request, responseClone);
                });

                return httpRes;
            });
        })
    );
})

再在博客的</body>前引入 Service Worker注册代码。

<script>
  if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
          navigator.serviceWorker.register('/sw.js')
              .then(function (registration) {
                  console.log('sw.js 注册成功', registration.scope);
              })
              .catch(function (err) {
                  console.log('sw.js 注册失败 ', err);
              });
       });
  }
</script>