AMP
EN
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 (網站應用程式資訊清單)

網站應用程式資訊清單是一個簡單的 JSON 檔案，可告知瀏覽器關於您的網站應用程式以及在「安裝」到使用者的行動裝置或桌上型電腦時應如何運作。許多瀏覽器都需要資訊清單才能顯示「新增至主螢幕」提示。

將名為 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 是否正在快取必要的資產並提供理想的離線解決方案。

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

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

提示 – 如需 Progressive Web App 功能的完整分析，請執行 Google 的 Lighhouse 工具以產生報告。

恭喜！

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

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