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 的絕佳候選者，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 是否正在快取必要的資產並提供理想的離線解決方案。

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

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

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

恭喜！

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

深入瞭解 Service Worker 和 離線 UX 考量。學習 追蹤分析參與度，並遵循關於 如何為您的 AMP 頁面設定基本分析的教學課程。