Enhance hexo with PWA in three steps

In previous article I mention about reviewing issue and my PWA plan will be advanced. I want to learn fist and do some experiment about PWA, so this blog became the first tester.

PWA needs HTTPS supports for the whole site. Luckily this site is hosted in Github Pages, is means Github does all the HTTPS things for me so that I don’t need to worry about. So in the blog, HTTPS section is not in the scope of this discussion.

1. Installing dependency

What I’m using here is a node package called hexo-pwa, install it with this command:

npm i hexo-pwa --save

2. Createing Config

Now we need to add some config to your hexo config file (not the theme config).

Open _config.yml and add these lines:

pwa:
  manifest:
    path: /manifest.json
    body:
      name: Log By DecayQ
      short_name: DecayQ
      theme_color: white
      background_color: white
      display: standalone
      orientation: portrait
      scope: /
      start_url: /
      icons:
        - src: /logo.png
          type: image/png
          sizes: 144x144
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 20
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /www.google-analytics.com/
        strategy: networkOnly
      - pattern: !!js/regexp /pagead2.googlesyndication.com/
        strategy: networkOnly
      - pattern: !!js/regexp /cdn.jsdelivr.net/
        strategy: cacheFirst
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

You can look up hexo-pwa‘s documentation for more information.

3. Deploying

hexo clean && hexo g && hexo d

And see how it become:

Mobile

Desktop

Now you can use your browser (Chrome/Firefox) to view this site. Clicking the up-right menu and add this site to your home screen.

Hope you enjoy.