PWAs(渐进式 web 应用程序) 是使用一些特定的技术和标准模式开发的,允许它们同时利用 web 和本机应用程序功能。

我们正处于 PWA 的实验阶段,但添加了一些主要功能,如将站点安装到主屏幕、预缓存文件和离线可用。

站点配置#

首先,我们需要指定 pwa 参数,即使为空。

名称类型默认值描述
pwaObject-
pwa.manifestObject-Web app manifest
pwa.manifest.nameString-默认为站点标题
pwa.manifest.short_nameString-站点短名称
pwa.manifest.displayStringstandalone
pwa.manifest.descriptionString-默认为站点描述
pwa.manifest.theme_colorString-
pwa.manifest.background_colorString-
pwa.manifest.iconsArray-
pwa.manifest.icons.sizesString-图标尺寸,如:“96x96”
pwa.manifest.icons.srcString-图标 URL
pwa.precacheObject-Precache assets
pwa.precache.fontsArray-Precache fonts
pwa.precache.imagesArray-Precache images
pwa.precache.pagesArray-Precache pages
pwa.precache.scriptsArray-Precache scripts
pwa.precache.stylesArray-Precache styles

Manifest#

主题会自动生成 manifest.json

离线#

如果在没有网络的情况下请求新页面,将显示脱机页面。

我们需要在 content 目录中创建一个名为 offline/index.md 的脱机页面,其首要内容如下。

1+++
2title = 'Offline'
3layout = 'offline'
4+++

预载#

1[pwa]
2  [pwa.precache]
3    fonts = ['/assets/katex/fonts/KaTeX_Math-Italic.woff2']
4    images = ['/images/logo.webp', '/images/profile.webp']
5    pages = ['/']
6    scripts = ['https://utteranc.es/client.js']
7    styles = ['https://fonts.googleapis.com/css2?family=Roboto&display=swap']
 1pwa:
 2  precache:
 3    fonts:
 4    - /assets/katex/fonts/KaTeX_Math-Italic.woff2
 5    images:
 6    - /images/logo.webp
 7    - /images/profile.webp
 8    pages:
 9    - /
10    scripts:
11    - https://utteranc.es/client.js
12    styles:
13    - https://fonts.googleapis.com/css2?family=Roboto&display=swap
 1{
 2   "pwa": {
 3      "precache": {
 4         "fonts": [
 5            "/assets/katex/fonts/KaTeX_Math-Italic.woff2"
 6         ],
 7         "images": [
 8            "/images/logo.webp",
 9            "/images/profile.webp"
10         ],
11         "pages": [
12            "/"
13         ],
14         "scripts": [
15            "https://utteranc.es/client.js"
16         ],
17         "styles": [
18            "https://fonts.googleapis.com/css2?family=Roboto\u0026display=swap"
19         ]
20      }
21   }
22}