hexo博客支持pwa

1 安装hexo-offline

bash

npm i hexo-offline --save

2 添加pwa文件

在/source目录下新建一个名为pwa的文件夹

先在pwa目录下添加一个名为favicon.png的图片作为图标

然后在pwa目录下添加manifest.json文件，输入如下内容

json

{
    "name": "foochane",
    "short_name": "foochane",
    "theme_color": "#90a3b1",
    "background_color": "#8a9aa7",
    "display": "fullscreen",
    "orientation": "portrait",
    "Scope": "/",
    "start_url": "/",
    "icons": [
      {
        "src": "favicon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "splash_pages": null
}

也可以用如下地址生产json文件： https://app-manifest.firebaseapp.com/

3 修改_config.yml文件

在根目录下的_config.yml文件中添加如下内容：

yaml

#pwa
# Offline
## 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
  # CDNs 
  # runtimeCaching:
  #   - urlPattern: /*
  #     handler: cacheFirst
  #     options:
  #       origin: cdnjs.cloudflare.com

4 在代码中引入manifest.json文件

在layout/_partial/head.ejs文件中加入如下代码:

Javascript

<!-- pwa -->
<link rel="manifest" href="/pwa/manifest.json">

注意：不同的主题可能添加的地方不一样，自行修改即可

hexo-offline仓库：https://github.com/JLHwung/hexo-offline