PWAs(漸進式 web 應用程序) 是使用一些特定的科技和標準模式開發的，允許它們同時利用 web 和本機應用程序功能。
HBS 提供了一些基本的特性，如將網站安裝到主荧幕、預緩存檔案和離線可用。
站点配置
首先，我們需要指定 pwa 參數，即使為空。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
pwa | Object | - | |
pwa.manifest | Object | - | Web app manifest |
pwa.manifest.name | String | - | 默認為站點標題 |
pwa.manifest.short_name | String | - | 站點短名稱 |
pwa.manifest.display | String | standalone | |
pwa.manifest.description | String | - | 默認為站點描述 |
pwa.manifest.theme_color | String | - | |
pwa.manifest.background_color | String | - | |
pwa.manifest.icons | Array | - | |
pwa.manifest.icons.sizes | String | - | 圖標尺寸，如：“96x96” |
pwa.manifest.icons.src | String | - | 圖標 URL |
pwa.precache | Object | - | Precache assets |
pwa.precache.fonts | Array | - | Precache fonts |
pwa.precache.images | Array | - | Precache images |
pwa.precache.pages | Array | - | Precache pages |
pwa.precache.scripts | Array | - | Precache scripts |
pwa.precache.styles | Array | - | Precache styles |
Manifest
主題會自動生成 manifest.json。
離線
離線頁面
如果在沒有網絡的情况下請求新頁面，將顯示離線頁面。
我們需要在 content 目錄中創建一個名為 offline/_index.md 的離線頁面，其首要內容如下。
1+++
2title = 'Offline'
3+++
離線圖片
與離線頁面壹樣，有壹個脫機圖片用於在沒有網絡的情況下請求圖片。HBS 提供了壹個內置的離線圖片，文件名是 assets/images/offline.png。
妳可以通過在妳的網站根目錄下創建妳自己的具有相同文件名的離線圖片來覆蓋它。
預載
params.toml
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 = ['/assets/js/foo.js']
7 styles = ['https://fonts.googleapis.com/css2?family=Roboto&display=swap']
params.yaml
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 - /assets/js/foo.js
12 styles:
13 - https://fonts.googleapis.com/css2?family=Roboto&display=swap
params.json
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 "/assets/js/foo.js"
16 ],
17 "styles": [
18 "https://fonts.googleapis.com/css2?family=Roboto\u0026display=swap"
19 ]
20 }
21 }
22}
評論