hexo博客支持pwa

1 安装hexo-offline

npm i hexo-offline --save

2 添加pwa文件

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

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

然后在pwa目录下添加manifest.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文件中添加如下内容:

#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文件中加入如下代码:

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

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

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


本文作者:foochane
本文链接:https://foochane.cn/article/2019061201.html
版权声明:本文采用 知识共享署名 4.0 国际许可协议 ,转载请注明出处!
  目录