通过

开始开发 PWA

渐进式 Web 应用 (PWA) 是使用 WEB 技术（如 HTML、CSS 和 JavaScript）生成的应用，也可以从单个代码库在各种设备作系统上安装和运行。

通过将本文与温度转换器示例结合使用（为了解如何生成 PWA 而创建），你将能够：

  • 通过对示例代码进行细微修改来自定义温度转换器 PWA。

  • 通过复制并粘贴整个示例目录并广泛修改代码来创建自己的 PWA。

另请参阅：

渐进式 Web 应用的体系结构

下图显示了渐进式 Web 应用 (PWA) 的高级体系结构：

PWA 的体系结构图

在左侧，运行 PWA 前端的设备具有 PWA 前端代码的文件。

在右侧，Web 服务器运行后端代码 (或 PWA 的数据库内容) 。

设备包含前端代码，包括 HTML、CSS、JavaScript、服务辅助角色和清单。 无论渐进式 Web 应用 (PWA) 是用作浏览器中的 Web 应用，还是作为设备上安装的本地应用，都是如此。

与常规 Web 应用一样，渐进式 Web 应用使用 Web 编程语言（HTML、CSS 和 JavaScript）编写，并使用 Web 服务器分发给用户。 如果 Web 应用是渐进式 Web 应用，则用户最初会在 Web 浏览器中看到该 Web 应用，并且地址栏上还有一个 “应用可用 ”按钮，提示用户在本地安装应用。

在生产 Web 服务器上部署 PWA

若要使渐进式 Web 应用 (PWA) 可供用户使用，请将渐进式 Web 应用 (PWA) 部署在可通过 HTTPS (访问的 Web 服务器上，这与本地开发环境) 不同。 Web 服务器向用户发送前端代码，并运行 Web 应用的后端代码。

渐进式Web 应用 (PWA) 平台的某些部分（例如服务辅助角色）需要使用 HTTPS。

如果渐进式 Web 应用 (PWA) 没有后端代码，则可以从静态 Web 服务器提供渐进式 Web 应用 (PWA) 。 例如，位于 https://microsoftedge.github.io/Demos/temperature-converter/的温度转换器使用 GitHub 中的 github.io 静态服务器。

温度转换器示例一文让你在本地服务器上运行并测试示例渐进式 Web 应用。 当你自己的渐进式 Web 应用已经过测试并准备好分发时，可以通过 Web 服务器 (Web 托管提供商) 将经过测试的 PWA 分发给用户。

若要更新渐进式 Web 应用，请再次将新版本部署到 Web 服务器。

示例 Web 服务器主机

当渐进式 Web 应用 (PWA) 上线时，必须将其发布到 HTTPS URL。 许多主机默认使用 HTTPS，但如果主机不提供 HTTPS，Let's Encrypt 提供了一个免费替代方法，用于创建必要的证书。

例如，可以创建一个Azure免费帐户。 如果你在Microsoft Azure 应用服务托管网站，则默认通过 HTTPS 提供服务。

还可以在支持 HTTPS 的 pages.github.com GitHub Pages () 上托管网站。 请参阅GitHub Pages文档。

关于 localhost (http) 与生产服务器 (https)

在 localhost 地址使用本地开发 Web 服务器时，URL 通常以 http开头，而不是 https。 渐进式Web 应用平台的关键部分（例如服务辅助角色）需要使用 HTTPS，而不是 HTTP。

出于开发和调试目的，Microsoft Edge (或托管 PWA 本地应用的窗口) 允许地址 localhost 在没有 HTTPS 的情况下运行渐进式 Web 应用 (PWA) API。

前端代码文件 (UI 代码)

渐进式 Web 应用 (PWA) 具有前端代码文件，这些文件由 Web 服务器发送到本地设备上的浏览器。

前端代码是在用户设备上安装应用所需的资源，例如 HTML、CSS 和 JavaScript 代码。

渐进式 Web 应用 (PWA) 通常包含以下前端代码文件：

  • 用于描述应用中的内容的 HTML 文件，例如用户界面中显示的文本、图像、文本字段或按钮。

  • 一个 CSS 文件，用于在布局中组织 HTML 内容，并为元素提供样式。

  • 用于将用户交互添加到用户界面的 JavaScript 文件。

  • 一个 JSON 清单文件，用于向主机作系统描述应用。

  • 一个 JavaScript 服务辅助角色文件，用于缓存应用的前端代码文件并运行后台任务。

渐进式 Web 应用的前端代码 (PWA) 使用设备的 Web 浏览器运行。 在独立窗口中运行应用时，浏览器自己的 UI 不可见，独立窗口是具有最少浏览器 UI 控件的简化浏览器窗口。

后端代码、文件、终结点和数据 (服务器端代码)

渐进式 Web 应用 (PWA) 可能具有驻留在 Web 服务器上并运行的后端代码。

与 Web 应用一样，渐进式 Web 应用可以包含一些 后端代码 (服务器端代码) ，这些代码可实现应用在连接到 Internet 时所需的任何 Web 服务 API 终结点，以检索可能存储在服务器上的数据库中的动态内容。

渐进式 Web 应用的后端代码可以使用所选的服务器端语言，例如：

  • ASP.NET
  • Java
  • Node.js
  • PHP

可能不需要服务器端 Web 服务 API 终结点，具体取决于要构建的应用。

温度转换器示例 PWA 没有任何服务器端代码，因为应用以独占方式在安装它的设备上运行，并且不需要任何服务器端数据。

其余部分介绍构成 PWA 示例的文件。

web 应用清单 (manifest.json)

常规 Web 应用仅在浏览器中运行。 通过添加 Web 应用清单，Web 应用将成为渐进式 Web 应用 (PWA) 。 Web 应用清单允许支持 PWA 的浏览器在设备上将 Web 应用作为渐进式 Web 应用安装。

Web 应用清单是一个 JSON 文件，其中包含有关渐进式 Web 应用的元数据，例如其名称、说明、图标及其使用的各种作系统功能。 JSON 代码将应用描述到主机作系统。 清单文件提供有关渐进式 Web 应用的基本信息，供设备的作系统使用。

文件名 manifest.json 是一种常见约定，而不是严格的要求。

示例 manifest.json：

{
  "lang": "en-us",
  "name": "Temperature converter app",
  "short_name": "Temperature converter",
  "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
  "start_url": "./",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
      {
          "src": "./icon512.png",
          "sizes": "512x512"
      }
  ]
}

另请参阅：

在本地设备上缓存应用文件的服务辅助角色 (sw.js)

渐进式 Web 应用 (PWA) 可以使用服务辅助角色 JavaScript 文件 (（如 sw.js) ）将前端 UI 文件缓存到本地设备。 服务辅助角色在由应用加载的专用 JavaScript 文件中定义，该文件 (与包含应用逻辑) 的主 .js 文件不同。

服务辅助角色是一个专用的 Web 辅助角色，可以截获来自渐进式 Web 应用的网络请求。 服务辅助角色支持如下方案：

  • 脱机支持，包括与 Internet 的间歇性连接。
  • 设备上的高级缓存。
  • 运行后台任务，例如接收 PUSH 消息、向应用图标添加锁屏提醒或从服务器提取数据。

服务辅助角色是一项关键技术，可帮助使渐进式 Web 应用快速且独立于网络条件。 服务辅助角色创建应用：

  • 更快。
  • 更可靠。
  • 独立于网络;即使 Internet 连接缺失或间歇性，应用仍以某种方式) 以某种方式 (工作。

此示例 sw.js 文件是一个服务辅助角色，它管理属于温度转换器 PWA 的缓存文件，将文件缓存到本地驱动器，并在没有 Internet 连接时提供这些文件。

sw.js:

const CACHE_NAME = `temperature-converter-v1`;
    
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      './',
      './converter.js',
      './converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);
    
          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed
        }
    }
  })());
});

此服务辅助角色显式缓存三个文件：

  • ./ 方法 index.html
  • ./converter.js
  • ./converter.css

浏览器会自动缓存另外两个文件：

  • 图标文件 (.png) 。
  • 清单文件 (.json) 。

侦 install 听事件

服务辅助角色侦 install 听事件，该事件在用户安装应用时触发，并使用它来缓存应用脱机运行所需的资源，例如：

  • 初始 HTML 页。
  • 应用的主要 JavaScript 文件，其中包含应用逻辑。
  • 应用的 CSS 文件。

为了启用应用安装，JavaScript 服务辅助角色文件通过在本地设备上缓存所需的前端文件，使应用能够脱机工作 (而无需始终) Internet 连接。

侦 fetch 听事件

服务辅助角色会 fetch 截获每次应用向服务器发送请求时发生的事件，并应用缓存优先策略。

服务辅助角色返回缓存的资源，以便应用可以脱机工作，如果失败，服务辅助角色将尝试从服务器下载文件。

服务辅助角色是可选的

渐进式 Web 应用 (PWA) 不需要为 Microsoft Edge 提供服务辅助角色即可安装应用。 但是，我们建议在你自己的渐进式 Web 应用中加入服务辅助角色，使其更快，并使应用更可靠，例如，当设备具有间歇性网络连接或脱机时。

另请参阅：

后续步骤

执行 温度转换器示例中的步骤。 然后，若要创建自己的渐进式 Web 应用 (PWA) ，可以复制、粘贴和修改目录 Demos\temperature-converter 。 温度转换器示例仅演示了渐进式Web 应用 (PWA) 可以执行的作的一小部分示例。 此示例演示了对于任何渐进式 Web 应用 (PWA) 都很重要的代码，例如在没有 Internet 连接的情况下工作。

对于 PWA，还有其他最佳做法 使渐进式 Web 应用 (PWA) 感觉为本机应用：

  • 将应用集成到作系统中，例如通过处理文件。

  • 执行非琐碎的计算任务。

  • 将应用上传到应用商店。

另请参阅

MDN：

好客：

示例：

  • Last updated on