如果您是技術主管或數位行銷分析師,想為 Adobe Experience Manager (AEM) 網頁應用程式提供新式網路體驗,且正在尋求相關解決方案,歡迎參考該文章。我們將介紹什麼是漸進式網頁應用程式 (PWA),以及透過設定 WorkBox 程式庫以在 AEM 中建構 PWA 時所需的資源,而不必編寫程式碼。
為什麼要使用 PWA?
而漸進式網頁應用程式會運用新式網路的功用。這類檔案可在裝置上安裝、快速載入,並即時載入後續造訪。這些元件能快速回應輸入內容。即使網路連線不穩定或離線,這類裝置就能正常運作。PWA 採用現代化的 API 提供與應用程式相似的互動體驗,使用者可選擇全螢幕使用者介面、背景更新,甚至離線存取資料。
![從網頁應用程式到漸進式網頁應用程式。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/from-web-app-progressive-ec86c954626d7.png?authuser=1&hl=zh-tw)
如要將網頁應用程式強化為漸進式網頁應用程式,必須新增兩項構件:
- 網頁應用程式資訊清單:這個 JSON 設定檔定義應用程式的進入點網址,用來代表 PWA 的圖示,以及其他描述應用程式的外觀與行為設定。
- 服務工作處理程序:這個指令碼會提供背景服務,透過定義 PWA 使用的資源和存取策略,充實 PWA。
什麼是 Service Worker?
Service Worker 的核心只是指令碼,瀏覽器會在和網頁應用程式互動時獨立運作。運作中的 Service Worker 會提供服務,例如使用 Cache API 進行智慧快取、使用 Background Sync API 讓資料保持最新狀態,並與推播通知整合。如果 Service Worker 具備適當的快取策略,就能針對各種情境提供穩定可靠的使用者體驗,立即傳回預先快取的資源、在快取中儲存資料,以及在連上網路時更新資源。
![Service Worker 位於用戶端,但透過 Proxy 網路處理。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/a-service-worker-lives-t-5dc26a26d945e.png?authuser=1&hl=zh-tw)
服務工作處理程序可能很難從頭開始編寫。我們打造了 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 網站提供簡單易用的使用者介面來設定屬性。
![在可安裝體驗對話方塊中設定資訊清單。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/configuring-manifest-th-f612ba85e8f16.png?authuser=1&hl=zh-tw)
起始網址是 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 後,您可以按一下滑鼠右鍵並檢查,開啟開發人員工具,然後查看「應用程式」面板下方的資訊清單。
![開發人員工具應用程式面板中的 PWA。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/a-pwa-the-devtools-appli-656ee8f8cae94.png?authuser=1&hl=zh-tw)
設定 Service Worker
您可以設定要快取的內容以及快取策略。
如果您一直在使用 Service Worker,可能很熟悉快取策略。快取策略會指定要快取哪些資源,以及要先在快取中尋找這些資源、優先在網路,或是具有網路遞補的快取中尋找資源。然後,您可以選擇在安裝 Service Worker 時要預先快取的資源。AEM 應用程式服務工作處理程序會實作「暖快取策略」,因此即使指定遺失或毀損的路徑,使用者體驗也不會中斷。
![使用「Cache Management (Advanced)」對話方塊設定 Service Worker。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/configuring-service-work-e2484075710d6.png?authuser=1&hl=zh-tw)
在 AEM 中,「clientlibs」一詞是指用戶端資料庫:這類程式碼結合了相關的 JavaScript、CSS 和靜態資源,這些資源是由用戶端網路瀏覽器提供並使用。只要在使用者介面中指定程式庫,就能輕鬆地將用戶端程式庫設為離線使用。
![用戶端程式庫對話方塊。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/the-client-side-libraries-e0d437c647e18.png?authuser=1&hl=zh-tw)
您也可以加入字型等第三方資源。這項離線快取設定會將設定資訊提供給在內部使用 Workbox 的應用程式所產生的 Service Worker。為您的應用程式啟用安裝功能,好處就是這麼簡單。安裝完成後,應用程式圖示就會出現在行動裝置主畫面上,就像顯示平台應用程式一樣。只要按一下該圖示,即可存取 WordPress 網站。
請注意,您可以隨時變更您的內容或這些設定。當您發布變更時,瀏覽器會在用戶端更新 Service Worker,並向使用者顯示訊息,告知有新版 PWA 可供使用。使用者可以按一下訊息重新載入應用程式,並取得最新的更新內容。您可以開啟瀏覽器開發人員工具和應用程式面板,查看 Service Worker 的詳細資料。
![開發人員工具 Service Worker 面板。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/the-devtools-service-work-d7bd480c6e814.png?authuser=1&hl=zh-tw)
您可以展開快取儲存空間,查看本機快取的內容:
![開發人員工具中的快取儲存空間檢視畫面。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/the-cache-storage-view-d-f7958fa57ea6e.png?authuser=1&hl=zh-tw)
成果
現在應該看看您努力的成果。只要經過設定,無須編寫程式碼,您就可以強化 AEM 網站,成為漸進式網頁應用程式。
Chrome 開發人員工具提供 Lighthouse 稽核功能,方便您檢查網頁應用程式和設定是否符合漸進式網頁應用程式標準。
![燈塔稽核報告。](https://web.developers.google.cn/static/case-studies/aem-with-workbox/image/a-lighthouse-audit-2f67560f69c94.png?authuser=1&hl=zh-tw)
結論
Progressive Web Apps 可針對您的網站提供類似應用程式的使用體驗,讓您使用跨平台和開放的網路特性,同時降低開發和維護成本,同時還可讓您掌控發布。這能提升參與度和留存率,最重要的是提高轉換率。只要搭配使用 AEM 與 Workbox,即可輕鬆地將現有網站強化為 PWA,而且完全不需撰寫程式碼。