渐进式Web应用程序(PWA)简介：ServiceWorker和Manifest

来自菜鸟教程
跳转至：导航、​搜索

多亏了 Service Workers 等技术，网站和 Web 应用程序现在可以在支持它的浏览器上越来越像本机应用程序。 这就是我们所谓的渐进式 Web 应用程序 (PWA)。

渐进式网络应用程序允许您执行诸如安装到主屏幕之类的操作，并使您的应用程序在离线时可访问。 试试看，如果您使用的是 Chrome 或 Firefox，请关闭 Wi-Fi 并重新加载此页面。 您会看到页面加载正常，因为它已被缓存并且缓存的版本是从 Service Worker 提供的。

为了使 Web 应用程序被视为渐进式 Web 应用程序，需要具备以下条件：

渐进式 Web 应用程序清单

以下 3 项对于让基本的渐进式 Web 应用程序正常工作是最重要的：

  • 该网站必须通过 https 提供服务
  • 你的应用应该有一个 Web App Manifest 文件
  • 你的应用应该有一个正常工作的 Service Worker

涵盖了这三件事后，您将拥有一个基本的渐进式 Web 应用程序，它可以离线使用并从缓存中加载静态资产。 您可以使用 Lighthouse Chrome 扩展程序运行审核并查看您的应用程序在频谱中的位置：

网络应用清单

Web 应用清单是一个 Json 文件，其中包含有关您的应用的元数据。 清单中的内容对于允许 Android 手机上的 Chrome 等浏览器显示重复访问者在其主屏幕上安装 Web 应用程序的选项尤为重要。

这个 Web App Manifest Generator 可以轻松生成 manifest.json 文件。 它甚至可以从一个 512x512 图标生成所有不同大小的图标。

获得 manifest.json 文件后，将其包含在应用程序的 head 部分中，如下所示： 

<link rel="manifest" href="/path/to/manifest.json">

例如，此网站的 Web App Manifest 内容如下： 

{
  "name": "Alligator.io",
  "short_name": "Alligator",
  "theme_color": "#138e69",
  "background_color": "#f8ea48",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

服务工作者

Service Worker 是 一些现代浏览器 中可用的一项新技术，它允许控制网络请求。 Service Worker 可以缓存资产并控制在无法访问网络或访问速度非常慢时发生的情况。 对于 Web 应用程序，可以缓存应用程序外壳的资产，然后在离线或低连接时始终可用。

注册 Service Worker

让 Service Worker 就位的第一步是注册它。

这是一个可用于注册 Service Worker 的示例脚本。 请注意它如何首先检查是否支持 Service Worker： 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('ServiceWorker registration successful!');
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}

注意 Service Worker 在根文件夹中的位置。 这意味着它将被抓取到整个网络应用程序。 如果它位于子文件夹中，则默认情况下它将仅限于该子文件夹。

服务工作者

现在对于 Service Worker 本身，它会变得相当复杂，而像 SW-Toolbox 这样的工具可以真正帮助减少设置 Service Worker 所需的样板代码。 手动编写 Service Worker 需要为 install、activate 和 fetch 事件设置事件侦听器，但 SW-Toolbox 会在幕后处理这些。

你可以像这样从 npm 安装 SW-Toolbox： 

$ npm install --save sw-toolbox

然后，在您注册的 Service Worker（例如：service-worker.js）中，使用 self.importScripts() 导入 SW-Toolbox： 

self.importScripts('node_modules/sw-toolbox/sw-toolbox.js');

对于这个网站，除了导入 SW-Toolbox 之外，所需的一切如下： 

self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']);
self.toolbox.router.get('/*', toolbox.networkFirst);

这会预缓存一些资产，然后缓存所有内容，但如果网络不可用，则会先尝试从网络获取新数据，然后再默认为缓存版本。

这适用于像这样的静态网站，但缓存所有内容不适用于具有动态数据的实际 Web 应用程序。 您可以通过此 使用指南 和此 博客文章 深入了解您可以使用 SW-Toolbox 做什么。

如果你想深入了解 Service Worker，Mozilla 整理了一个 Service Worker Cookbook 以及 Service Worker 可以做的各种事情的示例代码。

测试

一切就绪后，您可以从 Chrome DevTools 的 Application 选项卡检查 Web App Manifest 和 Service Worker：

您可以使用 Offline 复选框来测试您的应用在离线时的反应。 在使用不同的 Service Worker 配置时，取消注册当前的 Service Worker 以便注册新版本的 Service Worker 也很有用。

了解更多

由于这只是一个简短的介绍，您可能希望更深入地了解渐进式 Web 应用程序。 这里有一些很好的资源：

取自“https://cainiaojiaocheng.com/index.php?title=渐进式Web应用程序(PWA)简介：ServiceWorker和Manifest&oldid=26462”
Powered by MediaWiki