HEXO网页更加丝滑(PWA)
HEXO支持的PWA官网插件:hexo-offline
Github项目地址
https://github.com/JLHwung/hexo-offlinehexo-offline
是一个可以让Hexo
博客拥有PWA
支持的插件,能够默认的把站点中public
内的所有静态资源包括html、css、js、image
等文件缓存起来,达到离线(无网络环境)可访问的效果,拥有像原生APP一般的丝滑体验。
PWA介绍
PWA,即 Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
理解: PWA不是某一项技术,或者某一个新的产物;而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准,可以从安全、性能和体验三个方面,优化我们的Web App。所以,其实PWA本质上依然是一个Web App。
PWA包含的技术:
- Web App Manifest
- Service Worker
- Cache API 缓存
- Push、Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
PWA使用前提
你的博客全站资源必须为HTTPS,PWA支持的前提条件。
PWA配置
作者: Jerry
連結: https://butterfly.js.org/posts/ceeb73f/#PWA
來源: Butterfly
要为Butterfly配上 PWA 特性, 你需要如下几个步骤:
打开 hexo 工作目录
npm install hexo-offline --save
或者yarn add hexo-offline
在根目录创建
hexo-offline.config.cjs
文件,并增加以下内容。
1 | // offline config passed to workbox-build. |
更多内容请查看 hexo-offline的官方文档
- 在主题配置文件中开启 pwa 选项。
1 | pwa: |
- 在创建source/目录中创建manifest.json文件。
1 | { |
你也可以通过 Web App Manifest快速创建manifest.json
。(Web App Manifest 要求至少包含一个 512*512 像素的图标)
- 可以通过
Chrome
插件Lighthouse
检查 PWA 配置是否生效以及配置是否正确。- 打开博客页面
- 启动
Lighthouse
插件 (Lighthouse插件要求至少包含一个 512*512 像素的图标)
关于 PWA(渐进式增强 Web 应用)的更多内容请参閲 Google Tools for Web Developers
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Winward King's Blog!
评论