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'
3+++

預載#

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}