XYZ1024's Blog

给Hexo添加PWA

2021-07-30 20:44:00  137字  1 分钟 

PWA

安装hexo-pwa

npm install --save hexo-pwa

添加manifest.json

在Hexo根目录的source下添加文件manifest.json

{
    "name": "XYZ1024's Blog",
    "short_name": "XYZ1024",
    "theme_color": "#3C4043",
    "background_color": "#3C4043",
    "display": "standalone",
    "Scope": "/",
    "start_url": "/",
    "icons": [
      {
        "src": "Your favicon",
        "sizes": "Your favicon size",
        "type": "image/png"
      }
    ],
    "splash_pages": null
  }

Service Worker

安装Service Worker

npm install --save hexo-service-worker

添加配置

在Hexo的配置文件_config.yml内添加配置

service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/index.html
  - public/img/favcion.png
  - public/manifest.json
  stripPrefix: public
  verbose: false
  runtimeCaching:
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        origin: Your domain or cdn

后记

在本地是看不到效果的,因为要HTTPS,所以需要部署到服务器上

  • 本文作者: XYZ1024
  • 本文链接: 给Hexo添加PWA
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处。
  • 发布日期: 2021-07-30 20:44:00
  • 更新日期: 2021-07-30 20:44:00