下载并运行起始代码
创建 Web 应用程序清单
添加 AMP Service Worker
- 创建 Service Worker 文件
- 在您的 AMP 页面上自动安装您的 Service Worker
自定义缓存内容
- 缓存资源
- 预取链接
显示离线页面
测试您的 PWA
恭喜！

将您的 AMP 网站转变为 PWA

重要提示：本文档不适用于您当前选择的格式 email！

渐进式 Web 应用程序利用 Service Worker 的强大功能，在不同的网络强度下实现丰富的离线功能和一致的用户体验。通过在浏览器中缓存资源，PWA 能够向用户提供数据、资产和离线页面，从而保持用户的参与和知情。

本教程将教您如何通过添加 Web 清单和由 AMP Service Worker 驱动的 Service Worker，将 AMP 网站转变为可安装的、具有离线功能的 PWA。

下载并运行起始代码

请在此处下载起始代码。

使用本地 Web 服务器预览该网站。

提示 – 对于快速 Web 服务器，请运行 python -m SimpleHTTPServer。

您应该能够看到“Lyrical Lyghtning”移动音乐节的着陆页。主页上有一个链接，可查看日程表以及乐队所在的舞台。

我们网站的用户在活动中可能网络连接不稳定，而他们届时很可能想要访问日程表。这使其非常适合转变为 PWA，可以安装到用户的起始屏幕，并在离线时提供所有关键功能。

创建 Web 应用程序清单

Web 应用程序清单是一个简单的 JSON 文件，用于告知浏览器您的 Web 应用程序以及在“安装”到用户的移动设备或桌面设备上时该如何运行。许多浏览器都需要清单才能显示“添加到起始屏幕”提示。

在您的存储库中添加一个名为 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 的头部，并将 <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，以检查它们是否已正确缓存和预取。

提示 – 要全面分析渐进式 Web 应用的功能，请运行Google 的 Lighthouse 工具以生成报告。

恭喜！

您已成功使用 AMP 创建了 PWA！在本教程中，您学习了

创建 Web 应用程序清单
使用 amp-install-serviceworker 在 AMP 中安装 Service Worker
自定义 AMP Service Worker
预取链接
创建离线页面

阅读有关Service Worker 和离线 UX 注意事项的更多信息。了解如何通过分析跟踪互动，并按照关于如何为您的 AMP 页面配置基本分析的教程进行操作。

由 @crystalonscript 撰写