AMP
繁體中文
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 简体中文 Polski Tiếng việt

將您的 AMP 網站轉換為 PWA

重要事項：本文件不適用於您目前選取的格式 廣告！

漸進式網頁應用程式 (Progressive Web Apps) 運用 Service Worker 的強大功能，在不同的網路強度下實現豐富的離線功能和一致的使用者體驗。透過在瀏覽器中快取資源，PWA 能夠向使用者提供資料、資產和離線頁面，以保持他們的參與和知情。

本教學課程將教您如何透過新增 Web Manifest 和由 AMP Service Worker 驅動的 Service Worker，將 AMP 網站轉換為可安裝且具備離線功能的 PWA。

下載並執行入門程式碼

在此處下載入門程式碼。

使用本機網路伺服器預覽網站。

提示 – 若要快速建立網路伺服器，請執行 python -m SimpleHTTPServer。

您應該能夠檢視 Lyrical Lyghtning 音樂祭的首頁。首頁上有一個連結可檢視節目表以及樂團演出的舞台。

我們網站的使用者在活動現場的網路連線可能不穩定，但他們很可能想要存取節目表。這非常適合轉換為 PWA，讓使用者可以安裝到主畫面，即使離線也能提供所有關鍵功能。

建立 Web App Manifest

Web App Manifest 是一個簡單的 JSON 檔案，可告知瀏覽器您的網路應用程式，以及在使用者行動裝置或桌面上「安裝」時應如何運作。許多瀏覽器都要求必須有 manifest 才能顯示新增至主畫面提示。

將名為 manifest.json 的檔案新增至您的儲存庫，並包含以下程式碼

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

新增 AMP Service Worker

Service Worker 是一個指令碼，您的瀏覽器會在背景執行，與網頁分開，透過快取請求以提高效能並提供離線功能，從而擴展瀏覽器的功能。從頭開始建置 Service Worker 是有可能的，但非常耗時。Workbox 等程式庫有所幫助，但 AMP 更進一步，提供了 AMP Service Worker，其中 AMP 直接自動執行許多步驟，包括快取 AMP 指令碼、資產和文件，以及實作常見的最佳做法，例如導航預先載入。

AMP Service Worker 會在安裝後，在使用者請求時自動快取 AMP 指令碼和文件。我們將從新增基本 AMP Service Worker 開始。

建立 Service Worker 檔案

建立一個名為 sw.js 的檔案，並新增以下程式碼

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();

只需兩行程式碼，即可將 AMP Service Worker 匯入您的 Service Worker 並初始化。

在您的 AMP 頁面上自動安裝 Service Worker

AMP 網站使用 <amp-install-serviceworker> 組件在瀏覽器的背景中安裝 Service Worker，同時使用者可以享受您的內容。

將必要的指令碼標籤放在 index.html 的 head 中，並將 <amp-install-serviceworker> 元素放在 <body> 內

…

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

重要事項 – Service Worker 應從根目錄 (/sw.js) 提供，才能快取您網站的所有內容。

<amp-install-serviceworker> 透過建立 iframe 並執行 data-iframe-src 檔案來安裝 Service Worker。建立 install-sw.html 檔案並新增以下程式碼

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

iframe 會將 AMP Service Worker 檔案註冊到瀏覽器中。

自訂快取內容

AMP Service Worker 具有內建優勢，同時允許您可以設定的選用欄位，以針對您應用程式的需求進行最佳化。

我們的音樂祭應用程式將快取我們的圖片資產、預先載入節目表連結，並指定離線頁面。

快取資產

您可以設定 AMP Service Worker 來快取資產，例如圖片、影片和字型。我們將使用它來快取我們的背景圖片和 AMP 標誌。開啟 sw.js 檔案並將其更新為以下程式碼

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

我們已將快取策略指定為快取優先。這表示應用程式會嘗試先從快取提供圖片，然後再向網路請求任何內容。這對於此應用程式特別有用，因為我們不會更新我們的背景圖片或 AMP 標誌。

AMP Service Worker 會預先載入具有 data-rel=prefetch 屬性的連結。這讓使用者即使尚未造訪過頁面，也能離線檢視頁面。我們將把此屬性新增到 lineup.html 的連結標記。

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

顯示離線頁面

為了處理非預期的情況或點擊未預先載入頁面的連結，我們將新增一個離線頁面，以提供一致且「符合品牌形象」的使用者體驗，而不是顯示通用的瀏覽器離線頁面。在此處下載 offline.html 並將 sw.js 更新為以下程式碼

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

測試您的 PWA

您可以透過 Chrome DevTools 測試您的 AMP Service Worker 是否正在快取必要的資產並提供理想的離線解決方案。

我們將透過開啟 DevTools 面板來測試 Lyrical Lyghtning，方法是在 Windows 上按下 Ctrl + Shift + I 或在 Mac 上按下 Cmd + Opt + I。您也可以在頁面上按一下滑鼠右鍵，然後從選單中選取 inspect。然後選取 Application 以檢視您的 Service Worker 註冊。

按一下 offline 方塊以切換到離線模式。按一下 see full lineup 連結並導覽至 offline.html，以檢查它們是否已正確快取和預先載入。

提示 – 若要徹底分析漸進式網頁應用程式的功能，請執行 Google 的 Lighhouse 工具 以產生報告。

恭喜！

您已成功使用 AMP 建立 PWA！在本教學課程中，您學會了

閱讀更多關於 Service Worker 和 離線 UX 考量的資訊。學習追蹤分析數據的參與度，並依照關於如何為您的 AMP 頁面設定基本分析數據的教學課程進行。