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

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

預載

現時,我們還沒有提供任何預緩存自定義檔案的方法。 如果您需要此功能,請隨時通知我們。