CycleTracker：安全连接

PWA 只能在通过 https:// 协议提供服务时，或通过 http:// 协议从 127.0.0.1 和 localhost URL 本地提供服务时，才能使用清单文件安装。它们通常还使用受安全上下文限制的 API。

在上一节中，我们使用 HTML 和 CSS 创建了我们的经期追踪应用程序的外壳。在本节中，我们将在浏览器中打开 CycleTracker 静态内容，从本地启动的开发环境查看内容，并在远程安全服务器上查看内容。

使用 `file://` 协议查看

任何浏览器都会渲染您的 HTML。要查看您在上一节中创建的已应用 CSS 的 HTML 文件，请通过计算机的文件结构或使用浏览器的“打开文件”菜单选项导航到 index.html 文件并打开它。

更新 index.html，并将 style.css 放在同一目录中后，在狭窄的浏览器窗口中查看页面应类似于此屏幕截图：

Light green web page with a large header, a form with a legend, two date pickers and a button. The bottom shows two placeholder menstrual cycles and a header.

我们正在使用 file:// 协议查看我们的页面，该协议提供了一个安全上下文。这确保了页面可以以我们当前代码库的状态查看，并且当我们添加需要安全上下文的 JavaScript 功能时，它将继续工作。

注意：通过 https 提供应用程序服务不仅对 PWA 有益，对所有网站都有益，因为它确保 Web 服务器和用户浏览器之间传输的信息端到端加密。一些Web API 需要安全上下文。即使您没有创建可安装的 PWA，随着您向任何 Web 应用程序添加功能，您也可能会遇到需要安全上下文的情况。

虽然我们可以使用 file:// 协议查看和测试大多数应用程序功能，但我们不能使用它来测试使用清单文件的应用程序安装。

我们需要一个本地开发环境来测试包括安装在内的整个教程。使 PWA 可安装的一部分是安全服务器。文件将需要通过 Web 上的安全连接提供服务，以利用 PWA 提供的优势并将我们的应用程序作为 PWA 分发。

localhost

设置本地开发环境的默认方法因操作系统而异。虽然您的操作系统上索引和配置文件默认位置可能不同，但大多数桌面操作系统都允许您（开发人员）访问服务器配置。

例如，在 macOS 上，至少在 Sierra 和 Monterey 上，输入 sudo apachectl start 会启用 Apache HTTP 服务器。服务器启动后，在浏览器中输入 https:// 会显示一个基本网页，内容为“It works!”。默认情况下，显示的 HTML 文件是 Library/WebServer/Documents/index.html.en。要启用 .html.en 以外的文件扩展名或将根目录从 Library/WebServer/Documents/ 更改，您必须编辑位于 /etc/apache2/httpd.conf 的 Apache HTTP 配置文件。可以使用 sudo apachectl stop 停止服务器。

操作系统的默认 localhost 有一个易于记忆的 URL，但服务器根位置和配置过程却难以记忆。它也一次只允许在一个位置运行一个本地服务器。幸运的是，有更直观的服务器设置方法选项，可以在多个端口上创建多个本地开发环境。

带端口号的 localhost

有几个IDE扩展和特定于编程语言的包，只需单击或终端命令即可启动开发环境。您甚至可以启动多个本地服务器，每个服务器都有不同的端口号。

您可以使用VS Code 插件运行本地 HTTP 服务器，该插件可以在单个或不同端口上运行本地服务器。VS Code IDE 的Web 服务器预览扩展在编辑器当前打开的目录的根目录中创建一个服务器，默认端口为 8080。VS Code 扩展是可配置的。previewServer.port 设置是 Web 服务器的端口号。扩展的默认设置 8080 可以编辑和更改。默认情况下，在浏览器 URL 栏中输入 localhost:8080 将加载页面。

注意：Web 服务器预览扩展使用 Browsersync。当您的开发环境由此扩展启动时，localhost:3001 提供 Browsersync 的用户界面，提供当前服务器环境的概述。

了解如何使用Python或本地服务器端语言（如 PHP）设置本地测试服务器。

使用 npx 的 Localhost

如果安装了 node，您可能也安装了 npm 和 npx。在命令行中，输入 npx -v。如果返回版本号，则可以使用http-server（一个不可配置的静态 HTTP 服务器），而无需安装任何要求。在命令行中输入 npx http-server [path]，其中 [path] 是存储索引文件的文件夹。

默认情况下，在浏览器 URL 栏中输入 localhost:8080 将加载页面。如果您已经启动了端口 8080 的服务器，它将自动更改端口号，使用可用端口（例如 8081）启动开发环境。

您可以选择不同的端口号。输入 npx http-server /user/yourName/CycleTracker -p 8787 将在端口 8787 上启动本地服务器（如果可用）。如果不可用，如果您输入的端口号已被占用，您将收到 address already in use 或类似的错误。如果成功，在浏览器 URL 栏中输入 localhost:8787 将渲染存储为 ~/user/yourName/CycleTracker/index.html 的索引文件，如果不存在索引文件，则会显示 ~/user/yourName/CycleTracker/ 的目录内容。

这个不可配置的静态 HTTP 服务器足以满足我们的基本应用程序。通过 localhost 和 127.0.0.1 提供服务的应用程序免于 https 限制，并始终被视为安全。浏览器不安全警告（如果有）可以绕过。虽然不是必需的，但要配置您的本地 Web 服务器通过 HTTPS 提供服务，您可以添加内置 TLS 证书。有了证书，您将能够从命令行安装和运行local-web-server，以便通过 https 在本地为您的项目提供服务，从而防止任何安全警告。

bash

npm install -g local-web-server
cd ~/user/yourName/CycleTracker/
ws --https

在上述情况中，您可能需要在安装命令前加上 sudo。

注意：如果您追求隐私，请注意您正在自己构建此 PWA，并且可以从您自己的开发环境将其安装在您的机器上，而无需访问互联网。此应用程序没有跟踪功能。它是您可以获得的最私密的应用程序。

安全外部服务器

前面的选项对于您在 PWA 教程或任何 Web 开发项目中测试应用程序来说是好的，也是必要的。虽然您可以在您的设备上托管您的 Web 应用程序并使其可供任何有互联网连接的人使用，但我们不建议这样做。

为了获得 PWA 的附加功能，包括一键安装、独立 UI、进入应用商店以及通过 Service Worker 实现可选的离线功能，我们将需要一个安全连接。要分发您的应用程序，使其他人能够查看、使用和安装您的 PWA，您需要将您的内容托管并放在一个安全的远程服务器上。

正式发布 PWA 时，您可能需要投入域名和 Web 托管。对于开源项目，开发人员可以从代码库中学习甚至为项目做贡献，您可以将您的进度托管在GitHub Pages上。

GitHub Pages

CycleTracker 应用程序的当前状态可在 GitHub 上查看，通过 https://mdn.github.io/pwa-examples/cycletracker/html_and_css/ 安全地提供服务。我们已将文件发布到 MDN GitHub 帐户。同样，如果您有 GitHub 帐户，您可以将其发布到您的帐户。请注意，虽然通过 TLS 安全地提供服务，但 GitHub 上的操作不一定是私密的，并且所有 GitHub Pages 都是公开的。如果您居住在政府压制并追踪月经周期的地区，请考虑复制粘贴代码而不是分叉它。

要创建可公开访问的安全站点，请创建GitHub Pages 站点。创建一个名为 <username>.github.io 的存储库，其中 <username> 是您的 GitHub 用户名。创建一个 gh-pages 分支。您应用程序的此分支将在 https://<username>.github.io 上可用。

如前所述，即使您将存储库设置为私有，所有 GitHub Pages 仍会在互联网上公开可用。由于月经数据使用 localStorage 保存，因此该应用程序将通过 GitHub URL 可用，但用户的数据仅在输入数据的那个设备上的一个浏览器中可用。直接在浏览器中删除 localStorage 将删除所有存储的数据。

如果您不希望您的 PWA 位于顶级，您可以让您的应用程序看起来像是驻留在子目录中。您可以在 <username>.github.io 存储库中创建子目录，或从 PWA 的单独存储库发布。通过配置发布源在您的 PWA 存储库中，您的应用程序将在 https://<username>.github.io/<repository> 可见，其中 <repository> 是存储库的名称。您可以将 GitHub 设置为在更改发布到该存储库中的特定分支（包括 main）时自动发布您的站点。

在 CycleTracker 演示应用程序处于开发的不同阶段的情况下，<username> 是 mdn，存储库是 pwa-examples。由于此存储库有多个示例 PWA，每个 PWA 在开发过程中都有几个步骤的进展，因此文件（以及 PWA）嵌套了几个级别深。

请注意，您可以为 GitHub Pages 站点配置自定义域。