PWAs(漸進式 web 應用程序 ) 是使用一些特定的科技和標準模式開發的,允許它們同時利用 web 和本機應用程序功能。
我們正處於 PWA 的實驗階段,但添加了一些主要功能,如將網站安裝到主荧幕、預緩存檔案和離線可用。
站点配置
首先,我們需要指定 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 |
Manifest
接著,我們在設定檔中添加一個名為 MANIFEST
的自定義輸出格式,以便讓我們的網站可安裝。
1[mediaTypes]
2 [mediaTypes."application/manifest+json"]
3 suffixes = ["json"]
4
5[outputFormats]
6 [outputFormats.MANIFEST]
7 name = "manifest"
8 baseName = "manifest"
9 mediaType = "application/manifest+json"
然後在 home
輸出追加 MANIFEST
。
1[outputs]
2 home = ["HTML", "RSS", "JSON", "MANIFEST"]
Hugo 會在網站根目錄生成
manifest.json
。
離線
如果在沒有網絡的情况下請求新頁面,將顯示離線頁面。
我們需要在 content
目錄中創建一個名為 offline/index.md
的離線頁面,其首要內容如下。
1+++
2title = 'Offline'
3layout = 'offline'
4+++
預載
現時,我們還沒有提供任何預緩存自定義檔案的方法。 如果您需要此功能,請隨時通知我們。
評論