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

將您的 AMP 網站轉換為 PWA

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

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

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

下載並執行入門程式碼

在此處下載入門程式碼。

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

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

您應該能夠看到 Lyrical Lyghtning（行動音樂魔術節）的到達頁面。首頁上有一個連結可查看時間表以及樂團在哪個舞台上。

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

建立 Web App Manifest

Web App Manifest 是一個簡單的 JSON 檔案，用於告知瀏覽器您的 Web 應用程式及其在使用者行動裝置或桌面上「安裝」時的行為方式。許多瀏覽器需要有 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，同時使用者可以享受您的內容。

將必要的 script 標籤放在 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 是否正在快取必要的資源並提供理想的離線解決方案。

我們將透過按下 Windows 上的 Ctrl + Shift + I 或 Mac 上的 Cmd + Opt + I 來開啟 DevTools 面板，以測試 Lyrical Lyghtning。您也可以在頁面上按一下滑鼠右鍵，然後從選單中選取「檢查」。然後選取「應用程式」以檢視您的 service worker 註冊。

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

提示 – 若要徹底分析 Progressive Web App 的功能，請執行 Google 的 Lighthouse 工具以產生報告。

恭喜！

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

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