通過簡單的配置,內容作者現在可以為在AEM Sites建立的體驗啟用漸進式Web應用(PWA)功能。
這是一項高級功能,它要求:
在使用此功能之前,建議您與開發團隊討論此功能,以定義將其用於項目的最佳方法。
漸進式Web應用(PWA) 通過允許站點在用戶電腦AEM上本地儲存並離線訪問,為站點啟用沈浸式應用程式樣的體驗。 即使丟失了Internet連接,用戶也可以在移動中瀏覽網站。 PWA即使網路丟失或不穩定,也能提供無縫體驗。
內容作者無需對站點進行任何重新編碼,而是可以將PWA屬性配置為 頁屬性 一個網站。
通過PWA,用戶擁有該網站的本地副本,即使沒有網際網路連接,也能提供類似應用的體驗。
漸進式Web應用是一種不斷發展的技術,支援本地應用安裝和其他功能 取決於您使用的瀏覽器。
為了能夠為您的站點使用PWA功能,您的項目環境有兩項要求:
這些是作者需要與開發團隊協調的技術步驟。 每個站點只需執行一次這些步驟。
核心元件2.15.0及更高版本完全支援站點的PWAAEM功能。 由於AEMaaCS始終包括最新版本的核心元件,因此您可以利用現成的PWA功能。 您的AEMaaCS項目自動滿足此要求。
Adobe不建議在自定義元件或元件上使用PWA功能 從核心元件擴展。
PWA特徵生成和使用 /content/<sitename>/manifest.webmanifest
的子菜單。 預設情況下, 調度員 不公開這些檔案。 要公開這些檔案,開發人員必須將以下配置添加到您的站點項目。
File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >
# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }
根據您的項目,您可能希望包括重寫規則的不同類型的擴展。 的 webmanifest
在引入規則時,擴展可以在重寫條件中包括,該規則將請求隱藏和重定向到 /content/<projectName>
。
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$
與 先決條件 met ,內容作者很容易將功能PWA到站點。 以下是如何執行此操作的基本概要。 各個選項的詳細資訊見 詳細選項。
登錄AEM。
在主菜單中,點擊或按一下 導航 -> 站點。
選擇您的站點項目,點擊或按一下 屬性 或使用熱鍵 p
。
選擇 漸進式Web應用 頁籤並配置適用的屬性。 您至少要:
選擇選項 啟用PWA。
定義 啟動URL。
將512x512 png表徵圖上載到DAM,並將其作為應用的表徵圖引用。
配置希望服務工作人員離線的路徑。 典型路徑為:
/content/<sitename>
/content/experiencefragements/<sitename>
/content/dam/<sitename>
/etc/clientlibs/<sitename>
點擊或按一下 保存並關閉。
您的站點現在已配置,您可以 將其作為本地應用安裝。
既然你 將您的站點配置為支援PWA, 你可以親身體驗。
以下部分提供了在以下情況下可用選項的詳細資訊: 配置您的站點以進行PWA。
這些設定允許您的站點像本地應用一樣運行,因為它可安裝在訪問者的主螢幕上,並可離線使用。
這些設定使此站點的部分部分離線可用,並可在訪問者設備上本地使用。 這允許控制Web應用的快取以優化網路請求和支援離線體驗。
您的開發人員團隊可能在如何設定離線配置方面有寶貴的資訊。
並非所有PWA功能都可用於AEM Sites。 這些是一些顯著的局限。
Adobe在實施PWA時還會提出以下建議。
Adobe建議您限制要預快取的頁數。
客戶端庫隨著快取選擇器的添加而傳遞,該選擇器遵循以下模式 lc-<checksumHash>-lc
。 每次組成庫的檔案(和依賴項)中的一個更改時,此選擇器都會更改。 如果列出了要由服務員預快取的客戶端庫,並且要引用新版本,則需要手動檢索和更新該條目。 因此,我們建議您在項目指令碼和樣式表穩定後將站點配置為PWA。
核心元件的圖AEM像元件確定前端是讀取的最佳格式副本。 此機制還包括與上次修改該資源的時間對應的時間戳。 此機制使PWA預快取的配置複雜化。
配置預快取時,用戶需要列出可讀取的所有路徑變化。 這些變化由質量和寬度等參陣列成。 強烈建議將這些變化的數目減少到最多三個 — 小、中、大。 您可以通過的 影像元件。
如果未仔細配置,記憶體和網路消耗會嚴重影響PWA的效能。 此外,如果您打算預快取(例如50個影像),並且每個影像有3個寬度,則維護站點的用戶必須在頁面屬性的PWA預快取部分中維護最多150個條目的清單。
Adobe還建議您在項目使用映像穩定後將站點配置為PWA。