如果您是技術主管或數位行銷分析師,且有意為 Adobe Experience Manager (AEM) 網頁應用程式提供現代化的網頁體驗,並一直在尋找相關選項,那麼這篇文章正是您要找的。本課程將說明漸進式網頁應用程式 (PWA) 的定義,以及在 AEM 中透過設定利用 WorkBox 程式庫建立 PWA 時,需要具備哪些條件,且無需進行編碼。
為什麼要使用 PWA?
漸進式網頁應用程式會運用新型網頁的功能。這類應用程式可安裝在裝置上、快速載入,並即時載入後續造訪。而且可快速回應輸入內容。在連線不穩定或離線時,這些方法都能正常運作。PWA 會使用新式 API,提供類似應用程式的體驗,包括可選的全螢幕 UI、背景更新功能,以及離線存取資料的功能。
如要將網頁應用程式升級為漸進式網頁應用程式,您必須新增兩個構件:
- 網頁應用程式資訊清單:JSON 設定檔,用於定義應用程式的進入點網址、用來代表 PWA 的圖示,以及描述應用程式外觀和行為的其他設定。
- 服務工作者:提供背景服務的程式碼,可定義 PWA 使用的資源和存取資源的策略,進而強化 PWA。
什麼是 Service Worker?
Service Worker 的核心只是指令碼,瀏覽器會在和網頁應用程式互動時獨立運作。啟用的服務工作站會提供服務,例如使用 Cache API 進行智慧快取、使用 Background Sync API 保持資料更新,以及整合推播通知。使用正確快取策略的服務工作者,可在各種情境下提供穩定可靠的使用者體驗,例如立即傳回預先快取的資源、在快取中儲存資料,以及在連線至網路時更新資源。
從頭開始編寫 Service Worker 可能很困難。我們建立 Workbox 就是為了簡化這項作業。Workbox 是一組程式庫,可協助您編寫及管理服務工作者,並透過 Cache Storage API 進行快取。服務工作者和 Cache Storage API 搭配使用時,可控制如何從網路或快取記憶體要求資產 (HTML、CSS、JS、圖片等),甚至可讓您在離線時傳回快取的內容。有了 Workbox,您就能使用正式版程式碼快速設定及管理這兩項功能,以及更多功能。
將 AEM 網站升級為 PWA
Adobe Experience Manager (AEM) 是一項完整的內容管理解決方案,可用於建構網站、行動應用程式、表單和數位看板。方便管理行銷內容和素材資源。
雖然 AEM 提供豐富的程式庫,可用於建構網路應用程式,但目前要透過新增服務工作站和資訊清單來建構 PWA 並不容易。
Adobe Experience Manager Sites 是 Adobe Experience Manager 的 UI 建構工具。當 Adobe Experience Manager 用於雲端服務時,AEM Sites 可輕鬆將任何現有的 AEM 網站或單頁應用程式轉換為可安裝的離線 Progressive Web App,只需進行設定即可,無須編寫程式碼。它會使用 Workbox 提供漸進式網頁應用程式的最佳做法,並抽象化編寫樣板資訊清單和服務工作者的複雜性。
AEM 支援內容本地化,也就是說,您可以為不同語言代碼提供不同的品牌,甚至是不同的離線內容。為此,請為每個語言主檔建立不同的 PWA 設定。
開始在 AEM 上設定 PWA
以雲端服務的身份登入 Adobe Experience Manager,選取任何 Adobe Experience Manager Sites 頁面或語言主控項,然後按一下屬性。您應該會看到名為 Progressive Web App 的分頁 (注意:如果您沒有看到這個分頁,請與 Adobe 聯絡以啟用這項功能)。只要按幾下滑鼠,即可設定漸進式網頁應用程式的安裝方式和外觀。
如果您已完成 AEM Sites 教學課程,可能曾看過 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 後,您可以按一下滑鼠右鍵並檢查,開啟開發人員工具,然後查看「應用程式」面板下方的資訊清單。
設定服務工作站
您可以設定要快取的內容,以及要使用的快取策略。
如果您已使用服務工作站,可能就熟悉快取策略。快取策略會指定要快取哪些資源,以及是否要先在快取中尋找這些資源,還是先在網路中尋找,或是在快取中尋找,並以網路做為備用機制。接著,您可以選擇在服務工作者安裝時預先快取的資源。AEM Application service worker 會實作暖快取策略,也就是說,即使您指定缺少或損毀的路徑,使用者體驗也不會中斷。
在 AEM 中,「clientlibs」一詞是指用戶端程式庫:加入專案的相關 JavaScript、CSS 和靜態資源組合,由用戶端網路瀏覽器提供並使用。只要在使用者介面中指定程式庫,就能輕鬆地將用戶端程式庫設為離線使用。
您也可以加入第三方資源,例如字型。這項離線快取設定會為服務工作站提供設定資訊,該工作站會為在內部使用 Workbox 的應用程式產生。這就是讓應用程式可安裝的所有步驟。安裝完成後,應用程式圖示就會出現在行動裝置的主畫面上,就像顯示平台應用程式一樣。按一下該圖示即可存取編織網站。
請注意,您可以隨時變更您的內容或這些設定。當您發布變更時,瀏覽器會在用戶端更新 Service Worker,並向使用者顯示訊息,告知有新版 PWA 可供使用。使用者可以按一下訊息重新載入應用程式,並取得最新的更新內容。您可以開啟瀏覽器開發人員工具和應用程式面板,查看服務工作單元詳細資料。
您可以擴充快取儲存空間,查看已在本機快取的內容:
成果
您辛苦的成果,現在可以一睹為快了。只要進行設定,無須撰寫程式碼,就能將 AEM 網站升級為漸進式網頁應用程式。
Chrome 開發人員工具提供 Lighthouse 稽核工具,可讓您檢查網頁應用程式和設定是否符合漸進式網頁應用程式標準。
結論
漸進式網頁應用程式可為您的網站提供類似應用程式的體驗,以較低的開發和維護成本,運用網路的跨平台和開放性,同時提供發布控制功能。這有助於提升參與度和留存率,更重要的是,還能提高轉換率。只要搭配使用 AEM 與 Workbox,即可輕鬆地將現有網站強化為 PWA,而且完全不需撰寫程式碼。