CycleTracker

使用 Web 语言，我们将创建一个功能齐全的应用程序，它可以在线和离线工作，既可以在浏览器中工作，也可以在用户的操作系统 (OS) 上工作。像任何普通网站一样，CycleTracker 托管在 Web 服务器上，并可从 Web 服务器下载。我们只需要一个文本编辑器：CycleTracker，像所有 PWA 一样，不需要任何额外的编程语言知识、打包或专有 SDK。CycleTracker，像任何 PWA 一样，可以无缝安装在任何操作系统上，而无需应用商店（也不需要应用商店批准和费用）。

使用标准和开放的 Web 技术

从历史上看，要使应用程序能够安装在操作系统（如 Windows、iOS、MacOS、Linux 和 Android）上，应用程序需要使用操作系统支持的编程语言开发，例如 C#、.Net、Objective C、Swift、Kotlin、Java 或 Python。PWA 基于不同的模型：它们使用单个代码库，使用跨操作系统工作的标准开放 Web 技术（HTML、CSS 和 JavaScript）编写。

无需编译

对于大多数编程语言（例如 Java、C/C++ 和 Kotlin，它们通常用于构建 Android 应用，以及 Objective-C 和 Swift，用于 iOS），代码需要编译并打包成可安装格式，例如 .exe、.dmg、.elf 和 .apk，或其他可安装的文件类型，具体取决于操作系统。根据语言的不同，编译和打包可能需要操作系统的SDK。PWA 使用每个操作系统都支持的 Web 技术，不需要打包或编译。是的，开发团队可以拥有复杂的构建系统，但正如我们将在构建 CycleTracker 时演示的那样，PWA 可以仅由 HTML 和 JavaScript（以及 CSS，尽管样式对于 PWA 并非必需）构建。

随处可用

仅限单一操作系统的应用程序通过下载分发给用户，通常在专有的应用商店中分发。它们可通过供应商（如 Apple App Store、Google Play、Microsoft Store 或类似供应商）获得。PWA 没有这些要求。如果要分发 CycleTracker 应用，则不需要中间商。用户可以通过访问其在线版本来访问您的应用。但如果需要，也可以在 Play 商店和 App Store 上分发您的 PWA，与其他 iOS 或 Android 应用没有区别。

用户易于安装

从历史上看，下载的仅限单一操作系统的应用程序必须由用户有意安装。根据操作系统、安装格式和下载来源的不同，这可能是一个多步骤的安装过程。PWA 经过简化。任何拥有支持浏览器的用户都可以使用 PWA，并且只需点击几下即可安装。

安装后，可以使 PWA 的外观和行为类似于用户设备上安装的其他应用程序

应用程序窗口

使用清单文件设置，我们将使 CycleTracker 在其自己的应用程序窗口中打开，这意味着已安装的 PWA 类似于其他已安装的应用程序。

应用程序图标

PWA 在与用户操作系统上安装的其他应用程序相同的位置显示应用程序图标。这可能是主屏幕上的图标、工具栏上的图标、应用程序文件夹中的图标或设备显示应用程序图标的任何位置。我们将学习如何声明图标以供 CycleTracker 使用，因此，安装后，我们的 PWA 可以像用户设备上的任何其他已安装应用程序一样显示。

可离线工作

最初需要 Internet 访问才能下载应用程序，并且在与服务器或其他用户同步数据时也需要 Internet 访问。所有应用程序都需要此功能，而不仅仅是 PWA。我们将添加一个服务工作线程以创建离线体验，这意味着即使用户失去 Internet 访问权限，CycleTracker 也可以工作。我们只会触及 PWA 离线支持的功能。服务工作线程可用于使 PWA 离线工作，就像任何其他已安装的应用程序一样。如果用户在离线状态下进行更改，服务工作线程使 PWA 能够在连接恢复后同步数据。使用服务工作线程，用户无需主动使用 PWA，实际上，即使 PWA 未打开，它也可以发送和检索服务器数据。

本 PWA 教程的基本 Web 应用程序是一个经期跟踪器，用户可以在其中跟踪每个月经周期的开始和结束时间。我们将创建一个静态网站外壳并对其进行样式化，然后学习如何创建安全连接以查看我们的进度。我们将添加 JavaScript 功能，将 HTML 和 CSS 外壳转换为存储在 localStorage 中数据的完整功能应用程序。使用您构建的这个功能齐全的 Web 应用程序，我们将通过添加清单文件、包括图标和服务工作线程，逐步将此 Web 应用增强为具有离线功能的 PWA。

步骤包括

应用 HTML 和 CSS

逐行解释网站静态内容（CycleTracker 静态内容）的 HTML，以及用于设置该内容样式的 CSS。

本地开发环境或安全连接

为了能够安装，PWA 必须使用https://协议提供服务，或者作为使用127.0.0.1或localhostURL 通过http://协议提供的本地交付资源。我们将查看使用file://协议的页面，还将介绍创建安全本地主机连接以在完成教程步骤的过程中测试安装代码的选项。我们还介绍了如何使用 GitHub Pages 提供您的 PWA。

JavaScript 和 LocalStorage

完整解释 JavaScript 功能，以创建客户端经期跟踪器 Web 应用程序，以便我们拥有一个可以逐步增强为 PWA 的功能应用程序，使用localStorage存储经期信息。

清单文件：身份、外观和图标

PWA 需要一个清单文件，这是一个 JSON 文件，它描述了应用程序的名称、图标、描述以及应用程序在安装 PWA 的操作系统中如何工作的其他定义。我们将创建一个清单文件，定义安装后应用程序的外观，包括根据用户的设备使用哪些图标，以及应用程序视口的参数。我们还介绍了如何使用浏览器开发者工具调试清单文件。

服务工作线程

服务工作线程使应用程序能够离线工作。通过上一步中的安全连接，首次访问页面提供其基本功能，同时服务工作线程下载。安装并激活服务工作线程后，它将控制页面以提供更好的可靠性和速度。

要完成本教程，最好具备 HTML、CSS 和 JavaScript 的基本知识。本教程提供了有关创建清单文件和启动服务工作线程以及设置本地开发环境的说明，以便您可以查看您的进度。

虽然安全连接是必需的，但除了任何用于编写 PWA 的文本编辑器和用于查看它的浏览器之外，创建 PWA 没有其他软件要求。

您可以尝试实时经期跟踪器并在 GitHub 上查看经期跟踪器源代码。

• 下一步