超简单,让你的 Hexo 博客支持 PWA

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.”


在以往,为 Hexo 博客添加 PWA 支持是有些麻烦的,需要手动配置许多东西、修改页面模板等,甚至有的解决方案已经不再支持最新的 Hexo 版本。
幸好,「Mr.J实验室」大佬开发了 hexo-next-pwa 这样一款傻瓜式的 Hexo 插件,自动生成 Manifest 与 Service Worker,让我们能够敲敲键盘就为自己的博客添加 PWA 支持。

只需要三步操作!

  1. 使用 npm i @jiangtj/hexo-next-pwa --save 命令安装插件;

  2. 在博客的配置文件中填写相应配置项,以下是我的模板:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    pwa:
    # Generate manifest.json
    manifest:
    path: /manifest.json
    # See https://developer.mozilla.org/zh-CN/docs/Web/Manifest
    body:
    start_url: https://his2nd.life # 这一行不可缺失,不然 Edge 的地址栏上就不会弹出「可用应用」提示。
    name: 他的第二人生
    short_name: 他的第二人生
    description: 此站为 Hollis 的个人博客。
    lang: zh-CN
    display: fullscreen # 我使用了全屏的显示方法,看起来很好。
    background_color: "#FFFFFF"
    theme_color: "#F5F5F5"
    icons:
    - src: /images/maskable-32x32.png
    sizes: 32x32
    type: image/png
    purpose: any maskable # 使用 Maskable Icon 可以提升移动用户的体验,可使用 https://maskable.app/ 制作 Maskable Icon。
    - src: /images/maskable-192x192.png
    sizes: 192x192
    type: image/png
    purpose: any maskable
    - src: /images/maskable-512x512.png
    sizes: 512x512
    type: image/png
    purpose: any maskable
    # Generate sw.js
    serviceWorker:
    cdn: https://cdn.jsdelivr.net/npm/workbox-sw@5/build/workbox-sw.min.js
    # See workbox-build's `generateSW()` API
    # Here are some default configuration, see `./default.yaml`
    options: # 插件目前还在不断完善,支持的配置项不多,有 runtimeCaching 等,我也不懂就没再修改。
    swDest: /sw.js
  3. Hexo 三板斧走起,打开博客看看吧!一切正常的话,地址栏上就会弹出「可用应用」提示。如果您觉得效果不错,请给大佬的插件一个 Star!

「可用应用」提示
添加到主屏幕后再启动便是全屏状态


完。

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2020 Hollis
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧!

支付宝
微信