让你的Hexo博客像原生APP一般丝滑


字数:1.2k 阅读时长:5分钟 阅读:85

hexo-service-worker 是一个可以让Hexo博客拥有 PWA 支持的插件,能够默认的把站点中 public 内的所有静态资源包括 html、css、js、image 等文件缓存起来,达到离线(无网络环境)可访问的效果,拥有像原生APP一般的丝滑体验。

Hexo-PWA

PWA前提

你的博客全站资源必须为HTTPS,PWA支持的前提条件。
你的博客全站资源必须为HTTPS,PWA支持的前提条件。
你的博客全站资源必须为HTTPS,PWA支持的前提条件。

什么是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 后台同步
  • 响应式设计

安装插件

1
npm i -S hexo-service-worker

配置config

在博客根目录下的_config.yml文件,添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# PWA -- offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 52428800
staticFileGlobs:
- public/**/*.{js,html,xml,json,css,png,jpg,gif,svg,eot,ttf,woff,woff2,ico,cur} # code 1
- https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js # code 2
- https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js # code 3
stripPrefix: public
verbose: true
runtimeCaching:
- urlPattern: /*
handler: cacheFirst
options:
origin: tiven.cn
- urlPattern: /*
handler: cacheFirst
options:
origin: cdn.bootcdn.net
  • staticFileGlobs 是一个列表,可以使用正则来匹配某个目录,code 1 配置是缓存 public 文件夹下面的指定静态资源和静态 html 页面。
  • code 2code 3 是配置缓存第三方的CDN资源 jquerylodash,这里只是举例,可以根据博客中实际使用到的资源具体来配置。
  • runtimeCaching 是配置某个域名下使用到的静态资源,也是一个List,支持配置多个origin域。

生成配置 manifest.json 文件

source目录下新建manifest.json 文件,可以参考本站博客配置,具体code如下:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{
"name": "天問的个人博客",
"short_name": "天問",
"description": "天問的个人网站,记录学习,分享coding。生命不息,奋斗不止...",
"theme_color": "#C69DC9",
"background_color": "#C69DC9",
"display": "standalone",
"orientation": "portrait-primary",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "img/icons/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "img/icons/icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "img/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icons/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icons/icon-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "img/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

注意: 所有icons的src路径,sizes尺寸大小、type类型都需要一一对应。

  • display: 控制了应用的显示模式,它有四个值可以选择:fullscreenstandaloneminimal-uibrowser
模式展现形式
fullscreen全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏
standalone独立应用模式,这种模式下打开的应用有自己的启动图标,并且不会有浏览器的地址栏。因此看起来更像一个 Native App
minimal-ui该应用程序将看起来像一个独立的应用程序,与 standalone 相比,该模式会多出地址栏。 样式因浏览器而异。
browser默认的设置,一般来说,会和正常使用浏览器打开样式一致。
  • orientation: 控制Web App的方向。设置某些值会具有类似锁屏的效果(禁止旋转)。具体的值包括:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary

引用manifest.json

本站使用的是hexo默认主题,使用了ejs模板引擎,在公共head.ejs中添加下代码,其他主题应该类似。

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

部署后可以打开 控制台 - Application - Manifest / Service Workers / Storage,进行调试、查看缓存情况。

参考文档:


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-10-20
最后更新: 2023-07-17
本文标题: 让你的Hexo博客像原生APP一般丝滑
本文链接: https://www.tiven.cn/p/6dfc667a/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!