通过

渐进式 Web 应用入门

  • 项目

渐进式 Web 应用 (PWA) 是使用 Web 技术生成的应用程序，可以从一个代码库安装并可在所有设备上运行。

若要详细了解什么是 PWA 及其优势，请参阅 渐进式 Web 应用 (PWA) 概述 。

本指南面向想要了解如何生成 PWA 的 Web 开发人员。 若要详细了解如何安装和运行 PWA，请参阅在 Microsoft Edge 中使用渐进式 Web 应用中安装PWA。

在本指南中，首先了解 PWA 的工作原理，然后创建第一个简单 PWA（将成为温度转换器应用），然后详细了解如何创建出色的 PWA。

可以在 PWA 入门演示应用存储库的本指南中找到要构建的应用的最终源代码。

必备条件

  • 安装 Visual Studio Code 以编辑 PWA 源代码。
  • 安装 Node.js 以将其用作本地 Web 服务器。
  • HTML、CSS 和 JavaScript 的工作知识也是一个优点。

PWA 的体系结构

渐进式 Web 应用使用 Web 编程语言（HTML、CSS 和 JavaScript）编写，并使用 Web 服务器分发给用户。

若要使应用可供用户使用，请将其部署在可通过 HTTPS 访问的 Web 服务器上。 服务器包含：

  • 后端代码：应用在连接到 Internet 时所需的终结点，用于检索可能存储在服务器上的数据库中的动态内容。
  • 前端代码：在用户设备上安装应用所需的资源，例如 HTML、CSS 和 JavaScript 代码。

后端代码可以使用所选的服务器端语言，例如 ASP.NET、Java、Node.js 或 PHP。 但请注意，根据要构建的应用，甚至可能不需要服务器端终结点。 在本教程中创建的 PWA 没有任何服务器端代码，因为应用以独占方式在安装它的设备上运行，并且不需要任何服务器端数据。

前端代码仅使用 HTML、CSS、JavaScript 和 JSON 清单。

使用 HTML 描述应用中的内容，例如用户界面中显示的文本、图像、文本字段或按钮。 然后，使用 CSS 在布局中组织 HTML 内容，并为元素提供样式。 使用 JavaScript 将用户交互添加到用户界面。 最后，使用 JSON 清单文件将应用程序描述到主机操作系统。

尽管前端代码使用设备的 Web 浏览器运行，但浏览器用户界面可能不可见，因为你的应用可以选择在独立窗口中运行。

除了用户界面代码，还可以使用 JavaScript，通过使用服务工作器文件，使应用程序更快、更可靠且独立于网络。 最后，前端代码还包含一个 JSON 清单文件，该文件将应用程序描述到主机操作系统。

下图显示了 PWA 的高级体系结构。 Web 服务器位于 PWA 的一侧，设备位于另一端。 设备包含前端代码，包括 HTML、CSS、JavaScript、服务辅助角色和清单：

PWA 的体系结构图

步骤 1 - 启动 Web 服务器

PWA 使用 Web 服务器分发给用户。 应用准备就绪后，使用 Web 托管提供程序将其部署到 Web。 然后，只需再次将新版本部署到 Web 服务器即可更新应用。

若要开始开发 PWA，可以改用本地 Web 服务器。 若要启动本地服务器，请执行以下操作：

  1. 在计算机上创建 Web 服务器将在其中运行的新文件夹。

    为此，可以打开命令提示符并键入：

    cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA

  2. 使用 http-server Node.js 库启动服务器：

    npx http-server

现在，你有一个在 http://localhost:8080上运行的简单本地 Web 服务器。

渐进式 Web 应用平台的关键部分（例如服务辅助角色）需要使用 HTTPS。 PWA 上线后，必须将其发布到 HTTPS URL。 许多主机默认使用 HTTPS，但如果主机不提供 HTTPS，Let's Encrypt 提供了一个免费替代方法，用于创建必要的证书。

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

还可以在支持 HTTPS 的 GitHub Pages 上托管网站。

出于调试目的，Microsoft Edge 还允许 localhost Web 服务器在没有 HTTPS 的情况下使用 PWA API。

步骤 2 - 创建应用起始页

到目前为止，Web 服务器上没有可用的内容。 首先创建用户在访问温度转换器应用时将看到的第一个页面。

  1. 打开 Visual Studio Code，选择“ 文件>打开文件夹 ”， MySamplePWA 然后选择在上一步中创建的目录。

  2. 按 Ctrl+N 在项目中创建新文件，添加以下内容，并将该文件 index.html另存为 ：

    <!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

  3. 转到 http://localhost:8080 以查看应用：

    在 localhost 上运行新的 PWA

应用目前在浏览器中运行，无法安装。 若要使应用可安装，应用需要 Web 应用清单。

步骤 3 - 创建 Web 应用清单

Web 应用清单是一个 JSON 文件，其中包含有关应用的元数据，例如其名称、说明、图标及其使用的各种操作系统功能。 有关详细信息，请参阅 使用 Web 应用清单将 PWA 集成到 OS 中。

若要向应用添加应用清单，请执行以下操作：

  1. 在 Visual Studio Code 中，按 Ctrl+N 创建包含以下内容的新文件，并将该文件另存为 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"
        }
    ]
}

  2. 将名为 icon512.png 的 512x512 像素应用图标图像添加到项目中。 可以将 示例映像 用于测试目的。

  3. 在 Visual Studio Code 中，打开 index.html，并在 标记中添加 <head> 以下代码。

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

上述代码片段将新的 Web 应用清单文件链接到您的网站。

VS Code 项目现在应如下所示：

VS Code 的屏幕截图，其中显示了示例 PWA 项目，其中包含 index.html、manifest.json和图标文件

步骤 4 - 继续构建应用的用户界面

现在，你的应用具有 Web 应用清单文件和起始页，现在可以构建主应用功能了。

在本教程的此步骤中，我们将创建温度单位转换应用。

  1. 若要创建主用户界面内容，请复制以下 HTML 代码并将其粘贴到 index.html 文件中，替换 <h1> HTML 标记：

    <form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

    上述 HTML 代码包含一个表单，其中包含多个输入元素，应用将使用这些元素将温度值从一个单位转换为另一个单位。

  2. 若要使转换器正常工作，请使用 JavaScript 代码。 在项目中创建名为 converter.js 的新文件，并向其添加以下代码：

    const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

  3. 再次打开文件， index.html 并在结束 </form> 标记后添加以下代码，以加载 JavaScript 文件：

    <script src="converter.js"></script>

  4. 现在，向应用添加一些 CSS 样式，使其更具视觉吸引力。 在项目中创建名为 converter.css 的新文件，并向其添加以下代码：

    html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

  5. 再次打开 index.html ，通过在 标记中添加以下代码 <head> 来引用其中的新 CSS 文件：

    <link rel="stylesheet" href="converter.css">

    Visual Studio Code 项目现在应如下所示：

    Visual Studio Code 中的示例 PWA 项目，其中包含 index.html、converter.js、converter.css和manifest.json文件

  6. 转到 http://localhost:8080 以查看应用：

    在 localhost 上使用前端代码运行新的 PWA

你的应用现在执行了一些有用的操作，用户可以将其安装为独立应用。 在安装应用之前，请创建一个服务辅助角色，使应用脱机工作。

步骤 5 - 添加服务辅助角色

服务辅助角色是一项关键技术，可帮助使 PWA 快速且独立于网络条件。

服务辅助角色是一个专用 的 Web 辅助角色 ，可以截获来自 PWA 的网络请求，并启用如下方案：

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

PWA 无需为 Microsoft Edge 提供服务辅助角色即可安装应用。 但是，我们建议将服务辅助角色添加到 PWA，使其更快，并使 PWA 更可靠，例如，当设备具有间歇性网络连接或脱机时。

服务辅助角色在应用加载的 JavaScript 文件中定义。 若要向项目添加服务辅助角色，请执行以下操作：

  1. 在 Visual Studio Code 中， (Ctrl+N) 创建一个新文件，添加以下内容，并将该文件 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.
        }
    }
  })());
});

    该文件 sw.js 将充当 PWA 的服务辅助角色。 上面的代码侦 install 听事件，该事件在用户安装应用时触发，并使用它来缓存应用脱机运行所需的资源，例如初始 HTML 页、转换器 JavaScript 文件和转换器 CSS 文件。

    该代码还会截获 fetch 每次应用向服务器发送请求时发生的事件，并应用缓存优先策略。 服务辅助角色返回缓存的资源，以便你的应用可以脱机工作，如果失败，则尝试从服务器下载。

  2. 打开 index.html 并在标记末尾 <body> 添加以下代码，以注册服务辅助角色：

    <script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>

若要确认服务辅助角色正在运行，请执行：

  1. 在 Microsoft Edge 中，转到 http://localhost:8080。

  2. 要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

  3. 打开 应用程序 工具，然后单击“ 服务辅助角色”。 如果未显示服务辅助角色，请刷新页面。

    DevTools 应用程序工具，其中显示了“服务辅助角色”面板，新的 sw.js 辅助角色正在运行

  4. 通过展开缓存 存储 并选择 temperature-converter-v1 来查看服务辅助角色缓存。 应显示服务辅助角色缓存的所有资源。 服务辅助角色缓存的资源包括应用图标、应用清单和初始页。

    DevTools，显示查看缓存资源的位置

  5. 尝试将 PWA 作为脱机应用。 在 DevTools 中，打开 “网络 ”工具，并将“ 限制” 值更改为 “脱机”。

  6. 刷新应用。 它仍应使用服务辅助角色提供的缓存资源在浏览器中正确显示。

    DevTools，显示将“限制”值切换到“脱机”的位置

步骤 6 - 安装应用

现在，你的应用具有 Web 应用清单，支持浏览器可以将你的应用安装为 PWA。

在 Microsoft Edge 中，刷新应用后，地址栏中会显示 “应用可用 ”按钮。 单击 “应用可用 ”按钮会提示在本地安装应用。

Microsoft Edge，选项卡中包含示例 PWA。单击地址栏中的“应用可用”按钮，并显示安装提示

单击“ 安装 ”在本地安装应用。 安装完成后，应用将显示在其自己的窗口中，并在任务栏中显示自己的应用程序图标。

在其自己的窗口中安装并运行的示例 PWA

若要详细了解如何安装 PWA，请参阅 在 Microsoft Edge 中使用渐进式 Web 应用。

后续步骤

到目前为止，你构建的温度转换器 PWA 只是 PWA 可以执行的操作的一小部分示例。 上述步骤是任何 PWA 的重要先决条件，但有一些重要的最佳做法将使 PWA 在安装时感觉为真实的应用。

当用户安装应用程序时，他们对这些应用程序可以执行的操作有某些期望：例如：

  • 用户希望应用脱机工作。
  • 用户希望应用在操作系统中集成，例如通过处理文件。
  • 用户希望应用执行非普通的计算任务。
  • 用户希望在应用商店中查找应用。

若要构建出色的 PWA，请参阅 PWA 的最佳做法。

另请参阅