如果您是技術主管或數位行銷分析師，想為 Adobe Experience Manager (AEM) 網頁應用程式提供新式網路體驗，且正在尋求相關解決方案，歡迎參考該文章。我們將介紹什麼是漸進式網頁應用程式 (PWA)，以及透過設定 WorkBox 程式庫以在 AEM 中建構 PWA 時所需的資源，而不必編寫程式碼。
為什麼要使用 PWA？
而漸進式網頁應用程式會運用新式網路的功用。這類檔案可在裝置上安裝、快速載入，並即時載入後續造訪。這些元件能快速回應輸入內容。即使網路連線不穩定或離線，這類裝置就能正常運作。PWA 採用現代化的 API 提供與應用程式相似的互動體驗，使用者可選擇全螢幕使用者介面、背景更新，甚至離線存取資料。
如要將網頁應用程式強化為漸進式網頁應用程式，必須新增兩項構件：
- 網頁應用程式資訊清單：這個 JSON 設定檔定義應用程式的進入點網址，用來代表 PWA 的圖示，以及其他描述應用程式的外觀與行為設定。
- 服務工作處理程序：這個指令碼會提供背景服務，透過定義 PWA 使用的資源和存取策略，充實 PWA。
什麼是 Service Worker？
Service Worker 的核心只是指令碼，瀏覽器會在和網頁應用程式互動時獨立運作。運作中的 Service Worker 會提供服務，例如使用 Cache API 進行智慧快取、使用 Background Sync API 讓資料保持最新狀態，並與推播通知整合。如果 Service Worker 具備適當的快取策略，就能針對各種情境提供穩定可靠的使用者體驗，立即傳回預先快取的資源、在快取中儲存資料，以及在連上網路時更新資源。
服務工作處理程序可能很難從頭開始編寫。我們打造了 Workbox 來減輕生活負擔。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 中的使用者介面建立工具，只要和 Adobe Experience Manager 用做雲端服務，就能利用 AEM 網站將現有的 AEM 網站或單一頁面應用程式，轉換成可離線安裝的漸進式網頁應用程式，只要設定即可，完全不必編寫程式碼。運用 Workbox 提供漸進式網頁應用程式的最佳做法，並省去撰寫樣板資訊清單和 Service Worker 的複雜問題。
AEM 支援本地化內容，也就是說，你可以針對不同地區提供不同的品牌和離線內容。為此，您需要為每個語言主要執行個體建構不同的 PWA 設定。
開始在 AEM 上使用 PWA 設定
以「雲端服務」的身分登入 Adobe Experience Manager，然後選取任何 Adobe Experience Manager 網站網頁或語言的主要並按一下 [屬性]。系統應該會顯示名為「Progressive Web App」的分頁。(注意：如果找不到這個分頁，請與 Adobe 聯絡以啟用這項功能)。只需按幾下滑鼠，即可設定 Progressive Web Apps 的安裝作業和外觀和風格。
若您已完成 AEM 協作平台教學課程，可能已經看過 WKND 網站。本文使用 WKND 示範做為起點。完成後，請使用 WorkBox 將網頁應用程式的 WKND 更新為 PWA。
設定資訊清單
網頁應用程式資訊清單為 JSON 檔案，內含描述 PWA 外觀和行為的屬性。Adobe Experience Manager 網站提供簡單易用的使用者介面來設定屬性。
起始網址是 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 和靜態資源，這些資源是由用戶端網路瀏覽器提供並使用。只要在使用者介面中指定程式庫，就能輕鬆地將用戶端程式庫設為離線使用。
您也可以加入字型等第三方資源。這項離線快取設定會將設定資訊提供給在內部使用 Workbox 的應用程式所產生的 Service Worker。為您的應用程式啟用安裝功能，好處就是這麼簡單。安裝完成後，應用程式圖示就會出現在行動裝置主畫面上，就像顯示平台應用程式一樣。只要按一下該圖示，即可存取 WordPress 網站。
請注意，您可以隨時變更您的內容或這些設定。當您發布變更時，瀏覽器會在用戶端更新 Service Worker，並向使用者顯示訊息，告知有新版 PWA 可供使用。使用者可以按一下訊息重新載入應用程式，並取得最新的更新內容。您可以開啟瀏覽器開發人員工具和應用程式面板，查看 Service Worker 的詳細資料。
您可以展開快取儲存空間，查看本機快取的內容：
成果
現在應該看看您努力的成果。只要經過設定，無須編寫程式碼，您就可以強化 AEM 網站，成為漸進式網頁應用程式。
Chrome 開發人員工具提供 Lighthouse 稽核功能，方便您檢查網頁應用程式和設定是否符合漸進式網頁應用程式標準。
結論
Progressive Web Apps 可針對您的網站提供類似應用程式的使用體驗，讓您使用跨平台和開放的網路特性，同時降低開發和維護成本，同時還可讓您掌控發布。這能提升參與度和留存率，最重要的是提高轉換率。只要搭配使用 AEM 與 Workbox，即可輕鬆地將現有網站強化為 PWA，而且完全不需撰寫程式碼。