下载并运行 starter 代码
创建 Web App Manifest
添加 AMP Service Worker
- 创建 service worker 文件
- 在您的 AMP 页面上自动安装您的 service worker
自定义缓存的内容
- 缓存资产
- 预取链接
显示离线页面
测试您的 PWA
恭喜！

将您的 AMP 站点变成 PWA

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

本教程将教您如何通过添加由 AMP Service Worker 提供支持的 Web Manifest 和 Service Worker，将 AMP 站点变成具有离线功能的可安装 PWA。

下载并运行 starter 代码

在此处下载 starter 代码。

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

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

您应该能够查看 Lyrical Lyghtning（移动音乐魔法音乐节）的着陆页。主页上有一个链接，用于查看时间表和乐队所在的舞台。

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

创建 Web App Manifest

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

服务工作程序是一个脚本，您的浏览器在后台运行，独立于网页，通过缓存请求来提高性能并提供离线功能，从而扩展了浏览器的功能。从头开始构建服务工作程序是可能的，但很耗时。Workbox 等库很有帮助，但 AMP 更进一步，提供了AMP 服务工作程序，其中 AMP 直接自动执行许多步骤，包括缓存 AMP 脚本、资源和文档，以及实施导航预加载等常见最佳实践。

AMP 服务工作程序在安装后会自动缓存 AMP 脚本和文档，因为用户请求它们。我们将从添加基本 AMP 服务工作程序开始。

创建 service worker 文件

创建一个名为 sw.js 的文件，并添加以下代码

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

只需两行代码，即可将 AMP 服务工作程序导入到您的服务工作程序并对其进行初始化。

在您的 AMP 页面上自动安装您的 service worker

AMP 网站使用<amp-install-serviceworker>组件在浏览器后台安装服务工作程序，同时用户正在享受您的内容。

将必需的脚本标签放在 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>

重要提示 - 服务工作程序应从根目录 (/sw.js) 提供，以便能够缓存您网站的所有内容。

<amp-install-serviceworker> 通过创建一个 iframe 并运行 data-iframe-src 文件来安装服务工作程序。创建 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 服务工作程序文件注册到浏览器中。

自定义缓存的内容

AMP 服务工作程序附带内置优势，同时允许你可以根据应用需求进行优化的可选字段。

我们的音乐节应用将缓存我们的图像资源，预取阵容链接，并指定一个离线页面。

缓存资产

你可以配置 AMP 服务工作程序来缓存资源，例如图像、视频和字体。我们将使用它来缓存我们的背景图像和 AMP 徽标。打开 sw.js 文件并将其更新为以下代码

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

我们已将缓存策略指定为优先缓存。这意味着该应用将尝试首先从缓存中提供图像，然后再从网络请求任何内容。对于此应用而言，这特别有用，因为我们不会更新我们的背景图像或 AMP 徽标。

预取链接

AMP 服务工作程序预取具有 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 服务工作程序是否正在缓存必要的资源并提供理想的离线解决方案。

我们将通过在 Windows 上按 Ctrl + Shift + I 或在 Mac 上按 Cmd + Opt + I 打开 DevTools 面板来测试 Lyrical Lyghtning。你还可以右键单击页面并从菜单中选择 检查。然后选择 应用程序 以查看你的服务工作程序注册。

单击 离线 框以切换到离线模式。单击 查看完整阵容 链接并导航到 offline.html 以检查它们是否已正确缓存和预取。

提示 – 为了对渐进式网络应用的功能进行彻底分析，请运行 Google 的 Lighhouse 工具以生成报告。

恭喜！

你已成功使用 AMP 创建了一个 PWA！在本教程中，你学会了

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

详细了解 Service Worker 和离线 UX 注意事项。了解如何使用分析跟踪参与度，并按照教程了解如何为 AMP 页面配置基本分析。

作者 @crystalonscript