Adobe Experience Manager 搭配 WorkBox 的現代化網路體驗

Kalyanaraman Balasubramaniam Krishnan

Salvatore Denaro

如果您是技術主管或數位行銷分析師，且有意為 Adobe Experience Manager (AEM) 網頁應用程式提供新式網頁體驗，並想找出可採用的方案，歡迎參考正確文章。本課程將介紹漸進式網頁應用程式 (PWA)，以及需要透過設定來運用 WorkBox 程式庫以 AEM 建構 PWA 時需要具備哪些條件，而且完全不需要編寫程式碼。

為何選擇 PWA？

漸進式網頁應用程式會使用新式網路的功能，在你的裝置上安裝並能快速載入，後續造訪即載入。能快速回應輸入。即使在不穩定的連線或離線狀態下，也能順利運作。PWA 採用新型 API，透過選用的全螢幕 UI、背景更新和離線存取資料功能，提供類似於應用程式的使用體驗。

如要將網頁應用程式強化為漸進式網頁應用程式，必須新增兩個構件：

網頁應用程式資訊清單：定義應用程式進入點網址的 JSON 設定檔、用於代表 PWA 的圖示，以及其他描述應用程式外觀和行為的設定。
Service Worker：此指令碼會定義 PWA 使用的資源和存取策略，以提供背景服務，藉此充實 PWA。

什麼是 Service Worker？

服務工作處理程序的核心只是指令碼，當您與網頁應用程式互動時，瀏覽器會獨立執行。正在執行的服務工作處理程序會使用 Cache API 提供智慧快取等服務、使用 Background Sync API 隨時更新資料，以及整合推播通知。具備合適的快取策略的 Service Worker 可針對各種情況提供穩定可靠的使用者體驗，立即傳回預先快取資源、將資料儲存在快取中，並在連線至網路時更新資源。

服務工作人員可能很難從頭開始撰寫。簡化了工作資料夾Workbox 是一組程式庫，可協助您編寫及管理服務工作站，並使用 Cache Storage API 進行快取。Service Worker 和 Cache Storage API 搭配使用時，會控制網路或快取的資產 (HTML、CSS、JS、圖片等) 要求方式，甚至能在離線時傳回快取內容。有了 Workbox，你就能利用可投入實際工作環境的程式碼，快速設定及管理這兩種項目。

將 AEM 網站升級為 PWA

Adobe Experience Manager (AEM) 是一套全方位的內容管理解決方案，專門用來建構網站、行動應用程式、表單和數位電子看板，輕鬆管理行銷內容和資產。

雖然 AEM 提供了豐富的程式庫，可用於建構網頁應用程式，但現在並不容易藉由新增 Service Worker 和資訊清單來建構 PWA。

Adobe Experience Manager 協作平台是 Adobe Experience Manager 中的 UI 建立工具。只要將 Adobe Experience Manager 做為雲端服務使用，AEM 協作平台就能輕鬆將任何現有的 AEM 網站或單一網頁應用程式轉換為可安裝離線的漸進式網頁應用程式，完全不必編寫程式碼。它使用 Workbox 提供漸進式網頁應用程式的最佳做法，並簡化撰寫樣板資訊清單和 Service Worker 的複雜作業。

AEM 可以將內容本地化，也就是說，你可為不同的地區設定不同的品牌宣傳元素，甚至是不同的離線內容。為此，請為每個語言主要版本建構不同的 PWA 設定。

開始在 AEM 上使用 PWA 設定

以雲端服務的形式登入 Adobe Experience Manager，然後選取任何 Adobe Experience Manager 網站頁面或語言專家，然後按一下「屬性」。您應該會看到一個名為「Progressive Web App」的分頁 (注意：如果沒有看到這個分頁，請與 Adobe 聯絡以便啟用這項功能)。您只需按幾下滑鼠，就能設定漸進式網頁應用程式的安裝程序和外觀和風格。

如果您已完成 AEM 網站教學課程，可能已經看過 WKND 網站。本文是以 WKND 示範為起點。完成後，您就會使用 WorkBox，從網頁應用程式將 WKND 更新為 PWA。

設定資訊清單

網頁應用程式資訊清單是 JSON 檔案，內含描述 PWA 外觀和行為的屬性。Adobe 體驗管理工具網站提供易於使用的使用者介面，方便您設定屬性。

起始網址是 PWA 的進入點。使用者輕觸手機上的 PWA 圖示後，就會存取啟動網址。顯示模式可設定應用程式為視窗模式還是全螢幕體驗。您也可以指定應用程式的螢幕方向。主題顏色是指視窗和工具列的顏色，背景顏色則是應用程式啟動時的啟動畫面顏色。圖示是指應用程式安裝在裝置上時，顯示在裝置主畫面或應用程式導覽匣中的圖片。映像檔中的設定會產生如下所示的資訊清單 JSON。

{
  "name": "WKND Adventures and Travel",
  "short_name": "WKND Adventures and Travel",
  "start_url": "/content/wknd/us/en.html",
  "display": "standalone",
  "theme_color": "#FFDC00",
  "background_color": "#FF851B",
  "orientation": "any",
  "icons": [
    {
      "src": "/content/dam/wknd/pwa-logo.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ]
}

起始網址可以與網域的預設到達網頁不同。變更 start_url 參數後，您就能將使用者直接導向應用程式體驗，而不是顯示預設網頁，也就是未經驗證或新使用者的資訊。這可讓 PWA 使用者享有更流暢且更類似應用程式的體驗。

AEM 瞭解不同的地區可能會有不同的外觀和風格。您可以針對不同的語言代碼或語言指定不同的屬性、顏色和圖示，然後將設定與連結的網頁保持同步。

透過瀏覽器存取 PWA 後，只要在瀏覽器上按一下滑鼠右鍵，即可檢查開發人員工具，進而開啟開發人員工具並在「應用程式」面板下方查看資訊清單。

設定 Service Worker

您可以設定要快取的內容和要使用的快取策略。

如果您曾經使用 Service Worker，建議可能熟悉快取策略。快取策略會指定要快取的資源，以及是否要先在快取中搜尋這些資源，還是先在快取中搜尋，或是於快取 (含有網路備用) 中尋找資源。接著您可以在安裝 Service Worker 時選擇要預先快取的資源。AEM 應用程式服務工作處理程序會執行「暖快取策略」，這表示即使您指定遺失或毀損的路徑，使用者的體驗也不會中斷。

在 AEM 中，「clientlibs」是指用戶端程式庫，也就是用戶端網路瀏覽器提供並使用的相關 JavaScript、CSS 和靜態資源，共同加入專案。只要在使用者介面中指定程式庫，就能輕鬆設定可離線使用的用戶端程式庫。

您也可以加入字型等第三方資源。這項離線快取設定為 Service Worker 提供設定資訊；Service Worker 則為應用程式在內部使用 Workbox 而產生的設定資訊。這就是應用程式可以安裝的。安裝完成後，應用程式圖示就會出現在行動裝置的主畫面上，就像平台應用程式一樣。只要按一下圖示，即可存取編織網站。

請注意，您隨時可以變更內容或這些設定。發布變更之後，瀏覽器就會更新 Service Worker，並向使用者顯示訊息，告知使用者已有新版 PWA。使用者只要按一下訊息，即可重新載入應用程式並取得最新資訊。您可以開啟瀏覽器的開發人員工具和應用程式面板，查看 Service Worker 的詳細資料。