search

funnycoderstar / funnycoderstar

个人博客
https://wangyaxing.cn/
3 stars 1 forks source link

hexo博客支持PWA了~ #6

Open funnycoderstar opened 6 years ago

funnycoderstar commented 6 years ago

使用hexo插件使博客支持pwa功能，目前我所知道的有两种插件均可实现该功能

  • hexo-pwa
  • hexo-offline

    前提(HTTPS)

  • 全站支持HTTPS.
  • 目前本人使用的是腾讯云的免费证书

使用hexo-pwa

1.安装hexo-pwa

npm i --save hexo-pwa

2.修改配置文件

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文档中查看

3.添加manifest.json和sw.js

这两个文件放的位置要和配置中的路径一致, 我是放在跟目录的 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.firebaseapp.com/

4.将funnycoderstar安装到主屏(PWA)

  1. 地址栏输入: Chrome://flags
  2. 搜索并启用以下项目: Desktop PWAs(桌面PWAs)、App Banners(应用横幅)、Experimental App Banners(实验性应用横幅)
  3. 重启浏览器使修改的设置生效
  4. 点击地址栏最右边按钮
  5. 选择"安装 funnycoderstar"

在桌面上即可看到博客的小图标

感兴趣的小伙伴可以来我的博客体验一下, 哈哈~~ https://.wangyaxing.cn/

使用hexo-offline

使用基本与hexo-pwa相同, 下面简述一下过程

1. 安装

npm i --save hexo-offline

2. 修改配置文件

# 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

3. 添加manifest.json

manifest.json放到 source目录下

4. 引入manifest.json

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

<link rel="manifest" href="/manifest.json">

注意

参考

forrany commented 5 years ago

非常感谢呀~~ 已经按照你的方法成功了，请问你的这个教程，可以转载吗？