摘要：文章首次發表在博客支持了前言使用插件使博客支持功能，目前我所知道的有兩種插件均可實現該功能前提全站支持目前本人使用的是騰訊云的免費證書網站配置已經有很多文章寫了配置過程本篇文章不在贅述使用安裝修改配置文件的配置文件采用語言想要

文章首次發表在: 博客支持PWA了~

使用hexo插件使博客支持pwa功能，目前我所知道的有兩種插件均可實現該功能

hexo-pwa

hexo-offline

全站支持HTTPS.(ps: 目前本人使用的是騰訊云的免費證書)

網站配置HTTPS, 已經有很多文章寫了配置過程, 本篇文章不在贅述

npm i --save hexo-pwa

hexo的配置文件采用yml語言, 想要了解該語言的可以去看看

在根目錄的_config.yml中添加

pwa:
  manifest:
    path: /manifest.json
    body:
      "name": "funnycoderstar"
      "short_name": "star"
      "theme_color": "rgba(203,7,83,0.86)"
      "background_color": "#FAFAFA"
      "display": "standalone"
      "Scope": "/"
      "start_url": "/"
      icons:
        - src: https://cdn.wangyaxing.cn/icon-144x144.png?v=1
          sizes: 144x144
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-128x128.png
          sizes: 128x128
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-96x96.png
          sizes: 96x96
          type: image/png
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp ///
        strategy: networkFirst
  priority: 5

參數含義可以去hexo-pwa文檔中查看

這兩個文件放的位置要和配置中的路徑一致, 我是放在跟目錄的
sw.js

importScripts("https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js");

if (workbox) {
    workbox.setConfig({ modulePathPrefix: "https://g.alicdn.com/kg/workbox/3.3.0/" });

    workbox.precaching.precache(["/", "/index.html"]);

    workbox.routing.registerRoute(new RegExp("^https?://wangyaxing.cn/?$"), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp(".*.html"), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp(".*.(?:js|css)"), workbox.strategies.staleWhileRevalidate());

    workbox.routing.registerRoute(new RegExp("https://cdn.wangyaxing.cn/"), workbox.strategies.cacheFirst());
}

manifest.json

{
  "name": "funnycoderstar",
  "short_name": "star",
  "theme_color": "rgba(203,7,83,0.86)",
  "background_color": "#FAFAFA",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/source/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
  ],
  "splash_pages": null
}

manifest生成地址： https://app-manifest.firebase...

地址欄輸入: Chrome://flags

搜索并啟用以下項目: Desktop PWAs(桌面PWAs)、App Banners(應用橫幅)、Experimental App Banners(實驗性應用橫幅)

重啟瀏覽器使修改的設置生效

點擊地址欄最右邊按鈕

選擇"安裝 funnycoderstar"

在桌面上即可看到博客的小圖標

感興趣的小伙伴可以來我的博客體驗一下, 哈哈~~  https://.wangyaxing.cn/

使用基本與hexo-pwa相同, 下面簡述一下過程

npm i --save hexo-offline

# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
  maximumFileSizeToCacheInBytes: 10485760
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.example.com
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.another-example.org

manifest.json放到 source目錄下

next主題在 layout/_partials/head.swig 添加

文件放置位置一定要與配置文件中寫的路徑一致

圖標大小一定按照PWA的嚴格要求

打開 Chrome Dev Tools的Application一欄中進行調試

還可以通過觀察network中的請求是否有小齒輪標志來檢測serviceWorker是否已加載

hexo博客支持PWA和壓縮博文

讓 Hexo 博客支持 PWA

五步讓 Hexo 博客支持 PWA