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

将您的 AMP 网站转变为 PWA

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

本教程将教您如何通过添加 Web Manifest 和由 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 是浏览器在后台运行的脚本，与 Web 页面分开，它通过缓存请求来扩展浏览器的功能，从而提高性能并提供离线功能。从头开始构建 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 开发者工具测试您的 AMP Service Worker 是否正在缓存必要的资源并提供理想的离线解决方案。

我们将通过在 Windows 上按 Ctrl + Shift + I 或在 Mac 上按 Cmd + Opt + I 打开开发者工具面板来测试 Lyrical Lyghtning。您也可以右键单击页面，然后从菜单中选择 检查。然后选择 应用程序 以查看您的 service worker 注册。

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

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

恭喜！

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

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

阅读有关Service Worker 和离线 UX 注意事项的更多信息。学习使用分析跟踪参与度，并按照关于如何为您的 AMP 页面配置基本分析的教程进行操作。

作者：@crystalonscript