让 Hugo 支持 PWA 特性

前言

什么是 PWA

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

PWA 的特点：

• 添加你的博客到电脑 / 手机的桌面，以原生应用般的方式浏览你的博客
• 更快速地浏览你的博客
• 离线浏览你的博客

目前已知使用 Vue CLI 搭建项目时可以选择是否支持 PWA，Hexo 也可以通过插件来支持 PWA，而 Hugo 目前除了自己手动修改来支持 PWA 外，暂时没有其他的办法。本简单记录 Hugo 支持 PWA 的步骤。

配置 PWA

Service Workers

首先在博客根目录static文件夹添加 Blog/static/service-worker.js

// https://developers.google.com/web/tools/workbox/guides/get-started
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
  workbox.routing.registerRoute(
    new RegExp(/\/.*/),
    workbox.strategies.networkFirst()
  );

  workbox.routing.registerRoute(
    // Cache CSS files
    /.*\.css/,
    // Use cache but update in the background ASAP
    workbox.strategies.staleWhileRevalidate({
      // Use a custom cache name
      cacheName: 'css-cache',
    })
  );

  workbox.routing.registerRoute(
    // Cache image files
    /.*\.(?:png|jpg|jpeg|svg|gif)|https:\/\/www\.codewars\.com\/users\/AoiYamada\/badges\/micro/,
    // Use the cache if it's available
    workbox.strategies.cacheFirst({
      // Use a custom cache name
      cacheName: 'image-cache',
      plugins: [
        new workbox.expiration.Plugin({
          // Cache only 20 images
          maxEntries: 20,
          // Cache for a maximum of a week
          maxAgeSeconds: 7 * 24 * 60 * 60,
        })
      ],
    })
  );
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

PWA Script

在主题 footer.hmtl 或 Blog/themes/zozo/layouts/partials/js.html 添加脚本

<meta name=”apple-mobile-web-app-capable” content=”yes”>
<script>
 // Check that service workers are registered
 if ('serviceWorker' in navigator) {
   // Use the window load event to keep the page load performant
   window.addEventListener('load', () => {
     navigator.serviceWorker.register('/service-worker.js');
   });
 }
</script>

manifest.json

使用 https://realfavicongenerator.net/ 生成图标以及 manifest.json

解压后把图标和 manifest.json 放到 Blog/static/manifest.json 路径

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

完成

接下来我们可以通过访问移动端网站就可以把网站添加到桌面，桌面浏览器 Chrome 可以通过地址栏最右加进行添加，iOS Safari 可以通过添加到桌面。