CycleTracker：安全连接

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

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

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

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

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

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

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

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

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

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

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

如果你安装了节点，你可能也安装了 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 在本地提供你的项目服务，从而防止任何安全警告。

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

在上述情况下，你可能需要在安装前添加 sudo 前缀。

前面的选项很好，并且在完成本 PWA 教程或任何 Web 开发项目时测试应用程序是必要的。虽然你可以将你的 Web 应用程序托管在你的设备上，并让任何有互联网连接的人都可以使用它，但这并不推荐。

为了获得 PWA 的附加功能，包括单次点击安装、独立 UI、应用商店接入，以及通过服务工作者实现的可选离线功能，我们需要安全连接。为了分发你的应用程序，让其他人可以查看、使用和安装你的 PWA，你需要将你的内容托管在安全的远程服务器上并使其可用。

正式发布 PWA 时，您可能需要投资于 域名和网站托管。对于开源项目，开发人员可以从代码库中学习，甚至回馈项目，您可以在 GitHub Pages 上托管您的进度。

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

要创建公开可用的安全网站，请创建 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 网站配置自定义域名。

我们能够查看 CycleTracker 应用程序外壳的样式化静态版本。现在我们知道如何查看要构建的应用程序，让我们开始构建它。接下来，我们创建 app.js，它将我们的静态设计转换为一个完全功能的 Web 应用程序，该应用程序在用户的机器上本地存储数据。

• 上一个
• 概述：CycleTracker
• 下一个