AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

将您的 AMP 站点转换为 PWA

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

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

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

下载并运行入门代码

在此处下载入门代码。

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

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

您应该能够查看 Mobile Music Magic 音乐节 Lyrical Lyghtning 的着陆页。主页上有一个链接可以查看日程安排和乐队所在的舞台。

我们网站的用户在活动中可能网络连接不稳定，他们很可能需要访问日程安排。这使得它非常适合转变为 PWA，可以安装到用户的手机主屏幕，并在离线时提供所有关键功能。

创建 Web App Manifest

Web App Manifest 是一个简单的 JSON 文件，用于告知浏览器您的 Web 应用程序以及在“安装”在用户的移动设备或桌面设备上时应如何表现。许多浏览器需要 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 是否正在缓存必要的资源并提供理想的离线解决方案。

我们将通过在 Windows 上按 Ctrl + Shift + I 或在 Mac 上按 Cmd + Opt + I 来打开 DevTools 面板，从而测试 Lyrical Lyghtning。您也可以右键单击该页面，然后从菜单中选择 inspect。然后选择 Application 以查看您的 service worker 注册。

单击 offline 框切换到离线模式。单击 see full lineup 链接，然后导航到 offline.html 以检查它们是否已正确缓存和预取。

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

恭喜！

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

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