温度转换器示例

温度转换器示例是一个渐进式 Web 应用 (PWA) ，演示了如何生成 PWA 的基础知识。 可以修改此示例以开始创建自己的 PWA。

本文介绍如何获取示例、在 Windows 上安装它、运行示例并对其进行修改。 此示例适用于多个作系统，包括 Windows。 本文提供 Windows 的步骤;其他平台具有类似的步骤。

另请参阅：

• 开始开发 PWA。

步骤 1：预览在浏览器窗口中运行的应用

若要检查应用的用户界面，请执行以下作：

1. 在 Microsoft Edge 中，转到新窗口或选项卡中的实时 温度转换器 示例 Web 应用， (托管在 github.io) ：

   

   示例渐进式 Web 应用 (PWA) 最初以 Web 应用的形式显示在浏览器中，但地址栏中的“应用 可用 () 按钮 (尚未单击它) 。

2. 在 温度 文本框中，键入 22。

   显示的温度更改为 71.6 F。

3. 单击“ 从 ”下拉列表，然后在其外部单击。

4. 单击 要 下拉列表，然后单击其外部。

   可用单位包括：

   • 摄氏度
   • 华氏
   • 开尔文

5. 关闭应用的浏览器选项卡。

在后面的步骤中，将示例渐进式 Web 应用 (PWA) 安装为本地应用后，应用在其自己的窗口中运行：

该示例是渐进式 Web 应用，而不是常规网站。 因此，可以在设备上将渐进式 Web 应用 (PWA) 安装为应用，并且应用的窗口包含与完整 Web 浏览器中相同的应用 UI。

已安装的应用窗口是基于浏览器的窗口，没有大多数浏览器 UI。 已安装的应用已集成到设备的 UI 中，例如 Windows 任务栏和 Windows“开始”菜单。

示例应用的上述实例托管在 处 github.io。 在以下部分中，你将改用本地服务器来演示如何在开发时在本地测试渐进式 Web 应用 (PWA) 。 你将从本地服务器访问 Web 应用 (localhost) ，并从那里将其安装到设备。

步骤 2：安装Visual Studio Code

Visual Studio Code允许查看示例代码、修改示例，以及通过使用示例作为起点创建自己的渐进式 Web 应用 (PWA) 。

安装 (或选择性地更新 VS Code) ，如下所示：

1. 按 Windows 键，输入Visual Studio Code，然后单击“打开”。

2. 如果未安装Visual Studio Code，请转到Visual Studio Code，然后下载并安装它。

步骤 3：安装 git

安装或更新 git，如下所示：

1. 打开 Visual Studio Code。

2. 在“ 视图 ”菜单中，选择“ 终端”。

3. 输入命令： git -v

   如果安装了 git，则会显示版本号，例如 git version 2.51.0.windows.2。

4. 转到 git-scm.com 处的 “下载 ”。

   在右上角，记下 最新版本号 ，例如 2.51.1。

5. 如果尚未安装 git，或者你想要更新它， 请从 git-scm.com 下载并安装最新版本的 git。 否则，请跳到下面的下一部分。

6. 在安装过程中，可以接受默认值，但建议将默认编辑器从 vim 更改为 Visual Studio Code：

   

步骤 4：安装 Node.js

Node.js 包括用于在本地运行和测试示例的 Web 服务器。

安装或更新 Node.js，如下所示：

1. 打开 Visual Studio Code。

2. 在“ 视图 ”菜单中，选择“ 终端”。

3. 输入命令： node -v

   如果已安装 Node.js，则会输出版本号，例如 v22.19.0。

4. 转到 Node.js。

5. 在左下角的“ 最新 LTS ”按钮中，记下版本号，例如 v22.20.0。

6. 如果尚未安装 Node.js，或者想要更新它，请单击“ 获取 Node.js ”按钮。 否则，请跳到下面的下一部分。

   最终会到达一个页面，例如 “下载 Node.js”。

7. 单击 “Windows Installer (.msi) ”按钮。

   此时会打开 Microsoft Edge 的 “下载” 窗口，并显示文件名，例如 node-v22.20.0-x64.msi。

8. 单击文件名下的 打开 文件链接。

   此时会打开 “Node.js 安装向导” 窗口。

9. 单击“ 下一步 ”按钮，然后按照提示作。 可以接受默认值，然后单击“ 安装 ”按钮。

   “ Node.js 安装向导” 窗口将关闭。

10. 在 VS Code 的终端中，输入 命令： node -v

    将显示最新的版本号，例如 v22.20.0。

步骤 5：创建分支并克隆“MicrosoftEdge/Demos”存储库

接下来，你将通过为 Microsoft Edge/Demos 存储库创建分支来获取示例代码的本地副本。 由于你没有直接将提交推送到 Demos 开源存储库的权限，因此你将创建 Demos 存储库 的分支 来创建你自己的存储库副本，而不是 克隆 Demos 存储库。

你可能能够下载 Demos 存储库的“主”分支，并在“主”分支中编辑文件，而不是创建存储库的分支，然后创建 (test1) 在其中编辑文件的工作分支。 本文介绍更复杂但更灵活的方法：分支存储库。

分叉和克隆 MicrosoftEdge/Demos 存储库，如下所示：

1. 按 Windows+E。

   文件资源管理器打开。

   检查是否已克隆 Demos 存储库：

2. 导航到要将存储库克隆到的位置，例如：

   C:\Users\localAccount\GitHub\

   如果尚未克隆存储库（例如 C:\Users\localAccount\GitHub\Demos\），请执行以下步骤;否则，请跳到下一部分。

   对存储库进行分支：

3. 在新窗口或选项卡中打开 MicrosoftEdge/Demos 存储库。

4. 在右上角，单击“ 分叉 ”按钮上的向下箭头，然后选择“ 创建新分支”。

   有关详细信息 ，请参阅在 GitHub Docs 中分 叉存储库 。

5. 单击“ 创建分支 ”按钮。

   将分支克隆到本地驱动器：

6. 在 GitHub 上，导航到 MicrosoftEdge/Demos 存储库的分支。

7. 在文件列表上方，单击“ 代码 ”按钮。

8. 在“ HTTPS ”选项卡中，单击“ 复制到剪贴板 ” () 按钮。

9. 打开 Visual Studio Code。

10. 在“ 视图 ”菜单中，选择“ 终端”。

11. 更改为要克隆 Demos 存储库的目录：

    cd ~/GitHub
    

    或者输入以下命令，指定本地帐户：

    cd c:/users/localAccount/GitHub/
    

12. 键入 git clone，然后粘贴之前复制的 URL。 它将如下所示，使用 GitHub 用户名而不是 YOUR-USERNAME：

    git clone https://github.com/YOUR-USERNAME/Demos.git
    

13. 按 Enter 键。

    将创建分叉 Demos 存储库的本地克隆。

另请参阅：

• 为存储库创建分支
  • 为存储库 分叉中的 存储库分叉。
  • 在分支存储库中克隆分支存储库。
• 克隆存储库

步骤 6：在本地 Web 服务器上将 PWA 作为 Web 应用运行

接下来，你将在本地 Web 服务器上运行并测试示例渐进式 Web 应用 (PWA) ，Microsoft Edge。 你将使用 http-server（可在 Node.js 中运行的本地开发 Web 服务器）。

开发或测试网站或应用（包括 PWA）时，可以使用本地 Web 服务器。 但是，当应用可供用户使用时，可以使用 Web 托管提供程序将应用部署到 Web。 与常规网站或应用一样，PWA 使用 Web 服务器分发给用户。

更改为 /temperature-converter/ 克隆的 Demos 存储库的目录，并从那里启动 http-server ，如下所示：

1. 打开 Visual Studio Code。

2. 在“ 文件 ”菜单中，选择“ 打开文件夹”。

   “ 打开文件夹 ”对话框随即打开。

3. 导航到克隆的 Demos 存储库文件夹，例如 C:\Users\localAccount\GitHub\Demos\，选择 \temperature-converter\ 其中的文件夹，然后单击“ 选择文件夹 ”按钮。

4. 在“ 视图 ”菜单中，选择“ 终端”。

   终端窗格随即打开，提示为 Demos\temperature-converter\，例如 C:\users\localAccount\GitHub\Demos\temperature-converter。

5. 输入以下命令：

   npx http-server
   

   使用 NPM 包启动 http-server 本地开发 Web 服务器：

   

6. 如果 VS Code 的终端使用 PowerShell) ， (出现“禁用正在运行脚本”错误，请输入执行策略 PowerShell 命令，然后再次发出 npx 命令：

   Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
   npx http-server
   

   示例输出：

   Need to install the following packages:
   http-server@14.1.1
   Ok to proceed? (y)
   

7. 如果需要，请按 Y ，然后按 Enter。

   将显示输出，例如：

   Starting up http-server, serving ./
   ...
   Available on:
     http://10.0.1.2:8080
     http://127.0.0.1:8080
   Hit CTRL-C to stop the server
   

8. 在 Microsoft Edge 中，从npx http-server命令) 转到http://localhost:8080终端中输出的 (或等效 URL。

   温度转换器应用显示在浏览器中：

   

步骤 7：从 localhost Web 服务器安装 PWA 作为本地应用

将示例渐进式 Web 应用 (PWA) 作为 Windows 上的应用从 localhost Web 服务器安装为应用，如下所示：

1. 在“地址”栏中，单击“ 可用应用”。“安装温度转换器 ( “) ”按钮。

   此时会打开 “安装应用 ”对话框：

   

2. 单击“ 安装 ”按钮。

   应用在本地安装。 应用内将打开 “已安装应用 ”对话框：

   

3. 单击“ 允许” 按钮。

   Windows 应用 对话框询问“是否要将温度转换器固定到任务栏？ 此请求来自温度转换器。”

4. 单击“ 是 ”按钮。

   温度转换器应用的图标 () 显示在 Windows 任务栏上。

   温度转换器应用在其自己的应用窗口中显示：

   

   该窗口是没有大多数浏览器 UI 的浏览器窗口。

5. 关闭 “温度转换器 ”应用窗口。

步骤 8：打开已安装的应用

在设备上将示例渐进式 Web 应用 (PWA) 作为本地应用运行。

1. 按 Windows 键，开始键入 “温度转换器”，然后单击“ 打开”。

   已安装 的温度转换器 应用在其自己的窗口中打开。

   由于你从 localhost安装了应用，因此启动应用时，标题栏右侧会显示 localhost：8080 几秒钟：

   

   如果已从 github.io 服务器安装应用，则启动应用时，标题栏右侧将改为显示 microsoftedge.github.io 几秒钟：

   

   你还可以通过设备支持的其他方式打开已安装的应用，例如 温度转换器 () 固定到 Windows 任务栏的按钮。

2. 在 温度 文本框中，输入 22。

   显示的温度已更新为 71.6 F。

3. 单击“ 从 ”和 “到 ” 下拉列表。

   可用单位包括：

   • 摄氏度
   • 华氏
   • 开尔文

步骤 9：检查服务辅助角色处理脱机缓存

渐进式 Web 应用 (PWA) 的本地应用窗口是基于浏览器的窗口，因此可以使用 Microsoft Edge DevTools 来处理 PWA。

将 PWA 作为本地应用打开时，确认服务辅助角色 (sw.js) 正在运行，如下所示：

1. 打开已安装 的温度转换器 应用。

2. 在应用窗口中右键单击) 标题栏下方 (，然后选择“ 检查”。

   DevTools 将在单独的窗口中打开;undocked。 (其他停靠选项灰显且不可用。) 应用窗口是包含 DevTools Inspect 命令的浏览器窗口。

3. 在 DevTools 中，选择 “应用程序 () 工具。

4. 在左侧树的“ 应用程序 ”部分，选择“ 服务辅助角色”。

   显示有关服务辅助角色的信息：

   

   服务辅助角色的 源 为 sw.js， 状态 为 “已激活”且正在运行。

5. 在左侧树的 “存储 主要”部分中，展开 “缓存存储”，然后选择“ temperature-converter-v1”：

   

   显示服务辅助角色缓存。 列出了由服务辅助角色 (缓存或浏览器) 自动缓存的所有资源：

   • / index.html () - 应用的 HTML 网页，用于定义控件的布局。
   • /converter.css - 应用的网页样式。
   • /converter.js - 包含应用逻辑的 JavaScript 文件。
   • /icon512.png - 用于表示应用的应用图标图像文件。
   • /manifest.json - 应用清单，其中包含有关应用的基本信息，供设备作系统使用。

   服务辅助角色将三个文件显式添加到缓存， (.html、 .css和 .js) 。 浏览器会自动缓存 () 和清单 (.json) 的图标.png。

步骤 10：使用 DevTools 关闭 Internet 连接并脱机测试 PWA

尝试将渐进式 Web 应用 (PWA) 作为脱机应用，如下所示：

1. 在“DevTools”窗口中，打开 “网络 ” () 工具。

2. 在顶部附近，在“禁用缓存”复选框右侧的“限制”菜单中，从“无限制”更改为“脱机”：

   

   “ 网络 ”选项卡会添加警告图标来提醒你此限制。

3. 在“温度转换器”窗口中，右键单击，然后选择“ 刷新”。

4. 在 温度 文本框中，键入 22。

   显示的温度更改为 71.6 F。通过使用由服务辅助角色管理的本地缓存资源，应用仍然正确显示并正常工作。

5. 在 DevTools 窗口中，在“禁用缓存”复选框右侧的“限制”菜单中，从“脱机”更改为“无限制”。

   将从“ 网络 ”选项卡中删除限制警告图标。

6. 关闭 DevTools 窗口。

7. 关闭 “温度转换器 ”应用窗口。

当应用作为 Web 应用（而不是已安装的应用）在 Microsoft Edge 中时，DevTools 的这种同样用法也有效。 有关详细信息，请参阅网络功能参考中的模拟脱机。

步骤 11：卸载已安装的应用

卸载渐进式 Web 应用 (PWA) ，如下所示：

1. 单击固定在 Windows 任务栏上的 “温度转换器 ”按钮。

   将打开已安装 的温度转换器 应用。

2. 在标题栏中，单击，然后单击“应用设置”。

   在 Microsoft Edge 中，“ 应用 ”选项卡将打开 (edge://apps) ，其中显示有关 温度转换器 应用的详细信息：

   

3. 在底部，单击“ 卸载 ”按钮。

   此时会打开“ 在所有同步设备上从 Microsoft Edge 卸载应用？” 对话框。

4. 选中 “删除应用历史记录和数据 ”复选框，然后单击“ 卸载 ”按钮。

从 Windows“开始”菜单卸载本地应用

注意：作为 OS 集成的示例，可以通过 Windows“开始”菜单卸载应用，如下所示：

1. 按 Windows 键。

2. 开始键入“温度转换器”。

3. 单击“ 卸载”：

   

从 Microsoft Edge 开始卸载本地应用

注意：作为替代方法，可以从 Microsoft Edge 开始卸载示例渐进式 Web 应用 (PWA) ，如下所示：

1. 在 Microsoft Edge 中，选择 “设置和更多 (...) >更多工具>”“应用>查看应用”。

   “ 应用 ”对话框在 Microsoft Edge 中打开，其中列出了所有已安装的 PWA：

   

2. 右键单击“温度转换器”卡，然后单击“管理应用”。

   将在 打开edge://apps“所有应用/温度转换器”页。

3. 在底部，单击“ 卸载 ”按钮。

继续执行以下步骤。

步骤 12：修改示例

可以将示例修改为自己的渐进式 Web 应用 (PWA) 的起点。 你将在存储库的工作分支中将应用的名称从“温度转换器”更改为“TC”，然后在本地安装修改后的应用。

创建工作分支并切换到它，如下所示：

1. 打开 Visual Studio Code。

   在 VS Code 中打开文件夹

2. 在“ 文件 ”菜单中，选择“ 打开文件夹”。

   “ 打开文件夹 ”对话框随即打开。

3. 导航到克隆的 Demos 存储库文件夹（例如 C:\Users\localAccount\GitHub\Demos\），选择 temperature-converter 其中的文件夹，然后单击“ 选择文件夹 ”按钮。

4. 在 “资源管理器 ”窗格中，打开 \temperature-converter\index.html。

   

   在Visual Studio Code的左下角，指示了主分支。

   创建工作分支并切换到它

5. 在Visual Studio Code的“视图”菜单中，选择“终端”。

6. 按 Ctrl+C。

   localhost Web 服务器 (http-server) 停止（如果正在运行）。 提示显示当前路径，例如： PS C:\Users\localAccount\GitHub\Demos\temperature-converter>

   无需停止服务器、修改代码和查看结果。 我们只是暂时停止 终端 中的服务器，以便返回到提示符，以输入一些 git 命令。

7. 输入以下命令，创建存储库的工作分支并切换到它：

   git checkout -b test1
   

   如果分支已存在，则命令输出：“fatal：名为'test1'的分支已存在”。

8. 如果分支已存在，请输入以下命令以切换到分支：

   git checkout test1
   

   示例输出： Switched to a new branch 'test1'

   在 Visual Studio Code的左下角，分支从 main 更改为 test1。

9. 关闭“ 终端 ”窗格。

   在 Visual Studio Code 的左下角，指示 test1 分支：

   

   修改文件

10. 在 Visual Studio Code 的“资源管理器”窗格中，打开 /temperature-converter/index.html。

11. 在 中 index.html，将应用的名称更改为两行，从“温度转换器”更改为“TC”，如下所示：

    更改自：

    <title>Temperature converter</title>
    <meta name="application-name" content="Temperature converter">
    

    更改为：

    <title>TC</title>
    <meta name="application-name" content="TC">
    

12. 保存文件。

13. 在 “资源管理器 ”窗格中，打开 /temperature-converter/manifest.json。

14. 在 中 manifest.json，将应用的名称更改为两行，从“温度转换器”更改为“TC”，如下所示：

    更改自：

    "name": "Temperature converter",
    "short_name": "Temperature converter",
    

    更改为：

    "name": "TC",
    "short_name": "TC",
    

15. 保存文件。

步骤 13：在浏览器中查看修改的应用

在浏览器中查看修改的应用，如下所示：

1. 在Visual Studio Code的“视图”菜单中，选择“终端”。

   启动服务器

   我们之前在 终端中停止了 Web 服务器，只是为了输入一些 git 命令来切换到工作分支。

2. 输入以下命令：

   npx http-server
   

   本地开发 Web 服务器会再次启动。

   查看 Web 应用

3. 在 Microsoft Edge 中，从npx http-server命令) 转到http://localhost:8080终端中输出的 (或等效 URL。

4. (F5) 网页刷新。

   这不会提供所需的结果。 刷新会从浏览器缓存重新加载网页，因此你会看到之前在该 URL 处缓存的应用， (选项卡标题为“ 温度转换器) ”。

5. ) 网页 (Shift+F5 进行硬刷新。

   硬刷新直接从 Web 服务器显示当前内容。

   选项卡标题从 温度转换器 更改为 TC：

   

步骤 14：将修改后的示例重新安装为本地应用

从 localhost 浏览器中将修改的应用安装到设备上，如下所示：

1. 继续上述内容：在 Microsoft Edge 的地址栏中，单击可用的应用。 () 按钮。

   在浏览器中打开 “安装 TC 应用 ”对话框：

   

2. 单击“ 安装 ”按钮。

   修改的应用在本地安装。 应用内将打开 “已安装应用 ”对话框：

   

3. 单击“ 允许” 按钮。

   Windows 应用 对话框询问“是否要将 TC 固定到任务栏？ 此请求来自 TC。”

4. 单击“ 是 ”按钮。

   TC 应用的图标 () 显示在 Windows 任务栏上。

   TC 应用显示在其自己的窗口中，标题栏现在显示 TC：

   

步骤 15：卸载修改后的本地应用

卸载修改后的本地应用，如下所示：

1. 在 TC 应用窗口中，选择 “设置和更多 (...) >应用设置”。

   在 Microsoft Edge 中，将打开“ 应用 ”选项卡，其中显示有关 TC 应用的详细信息。

2. 在底部，单击“ 卸载 ”按钮。

   此时会打开“ 在所有同步设备上从 Microsoft Edge 卸载应用？” 对话框。

3. 选中 “删除应用历史记录和数据 ”复选框，然后单击“ 卸载 ”按钮。

步骤 16：停止开发 Web 服务器

1. 在Visual Studio Code的“视图”菜单中，选择“终端”。

2. 按 Ctrl+C。

   服务器停止，并显示输出消息： http-server stopped.

这是示例步骤的结束。

加快修改/重新安装周期

每次修改应用时，都可以跳过上述一些步骤，具体取决于修改的文件：

• 如果修改 HTML 文件、CSS 文件或主 JavaScript 文件，则可以跳过卸载和重新安装应用。 对缓存进行压缩并刷新页面足以重新加载 HTML、CSS 和 JavaScript 更改。

• 如果修改清单文件，则必须卸载并重新安装应用。

地址栏中的 PWA 按钮

安装应用后，如果转到浏览器中的 Web 应用，地址栏中的 PWA 按钮已从“ 应用可用 ”图标 () 按钮更改为“ 在应用中打开 () 按钮。

如果单击“ 在应用中打开 ” () 按钮，将在浏览器中打开 “打开温度转换器 ”对话框：

后续步骤

接下来，可以：

• 研究代码;请参阅 温度转换器源文件。

• 对示例代码进行其他次要修改。

• 复制并粘贴整个示例目录 /Demos/temperature-converter/ 并修改代码以创建自己的渐进式 Web 应用 (PWA) 。

另请参阅

• 在 Microsoft Edge 中使用 PWA
  • 在 Microsoft Edge 中使用 PWA 安装 PWA。
• 开始开发 PWA
• 温度转换器源文件
• 在 DevTools 网络功能参考中脱机模拟。

Localhost：

• http://localhost:8080 - 或命令输出的 npx http-server 等效 URL。

GitHub：

• MicrosoftEdge/Demos 存储库。
  • 托管在 github.io 的温度转换器示例。
• 为存储库创建分支
  • 为存储库 分叉中的 存储库分叉。
  • 在分支存储库中克隆分支存储库。
• 克隆存储库

VS Code：

• Visual Studio Code

git：

• 下载 git-scm.com。

Node.js：

• Node.js
• 下载 Node.js