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。

您应该能够查看 Lyrical Lyghtning 移动音乐魔术节的登录页面。主页上有一个链接可以查看乐队的时间表和舞台。

我们网站的用户在活动中可能会遇到网络连接不稳定的情况，届时他们可能需要访问时间表。这使其成为将其转变为 PWA 的绝佳候选者，该 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。

将所需的 script 标记放在 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 和 离线用户体验注意事项的更多信息。学习使用分析跟踪参与度，并按照有关如何为您的 AMP 页面配置基本分析的教程进行操作。