渐进式 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 免费帐户。 如果你在 Microsoft Azure 应用服务上托管网站，则默认情况下会通过 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 文件，其中包含有关应用的元数据，例如应用的名称、说明、图标及其使用的各种操作系统功能。

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

  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 应用清单文件和起始页，是时候构建main应用功能了。

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

  1. 若要创建main用户界面内容，请复制以下 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 消息、向应用图标添加锁屏提醒或从服务器提取数据。

若要使 Microsoft Edge 能够安装应用，你的应用必须具有服务辅助角色文件。

服务辅助角色在应用加载的 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 的最佳做法。

另请参阅