Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hexo博客支持PWA了~ #6

Open
funnycoderstar opened this issue Sep 2, 2018 · 1 comment

Comments

@funnycoderstar
Copy link
Owner

commented Sep 2, 2018

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

前提(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.jsonsw.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">

注意

  • 文件放置位置一定要与配置文件中�写的路径�一致
  • �图标大小一定按照PWA的严格要求
  • 打开 Chrome Dev Tools的Application一栏中进行调试

  • 还可以通过观察network中的请求是否有小齿轮�标志来检测serviceWorker是否已加载

参考

@funnycoderstar funnycoderstar changed the title 博客添加PWA功能 博客支持PWA了~ Sep 5, 2018
@funnycoderstar funnycoderstar changed the title 博客支持PWA了~ hexo博客支持PWA了~ Sep 5, 2018
@forrany

This comment has been minimized.

Copy link

commented Jan 14, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.