CycleTracker PWA 教程

PWA 的优势

使用 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 应用，您将不需要中间商。用户可以通过访问其在线版本来访问您的应用。但是，如果您愿意，也可以将 PWA 分发到 Play 商店和 App Store，与其他 iOS 或 Android 应用无异。

用户易于安装

历史上，下载的仅支持单一操作系统的应用程序需要用户主动安装。根据操作系统、安装格式和下载来源，这可能是一个多步骤的安装过程。PWA 更加 streamlined。PWA 可供任何拥有支持浏览器的用户访问，并且只需点击几下即可安装。

与操作系统安装的软件应用相比

安装后，PWA 可以看起来和行为上与其他安装在用户设备上的应用程序类似

应用程序窗口

通过一个manifest 设置，我们将使 CycleTracker 在自己的应用程序窗口中打开，这意味着已安装的 PWA 与其他已安装的应用程序类似。

应用程序图标

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

离线工作

最初需要互联网连接来下载应用程序，在与服务器或其他用户同步数据时也需要。这适用于所有应用程序，不仅仅是 PWA。我们将添加一个service worker 来创建离线体验，这意味着即使在用户失去互联网连接时，CycleTracker 也能工作。我们只会触及 PWA 离线支持的强大功能。Service worker 可用于使 PWA 像任何其他已安装的应用程序一样离线工作。如果用户在离线状态下进行更改，service worker 可以使 PWA 在恢复连接后同步数据。有了 service worker，用户无需主动与 PWA 交互，事实上，PWA 甚至不需要打开，就可以发送和检索服务器数据。

CycleTracker PWA 课程

本 PWA 教程的基础 Web 应用是一个生理周期追踪器，用户可以追踪每个生理周期的开始和结束。我们将创建一个静态网站 shell 并对其进行样式设计，然后学习如何创建安全的连接来查看我们的进度。我们将添加 JavaScript 功能，将 HTML 和 CSS shell 转换为功能齐全的应用，并将数据存储在 localStorage 中。使用您构建的这个功能齐全的 Web 应用，我们将通过添加 manifest 文件、包含图标和 service worker，逐步将其增强为一个支持离线功能的 PWA。

步骤包括

应用 HTML 和 CSS

对网站的静态内容、CycleTracker 静态内容以及用于样式化这些内容的 CSS 进行逐行解释。

本地开发环境或安全连接

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

JavaScript 和 LocalStorage

对 JavaScript 功能进行全面解释，以创建一个客户端的生理周期追踪 Web 应用，从而拥有一个可以通过渐进式增强为 PWA 的功能性应用，使用localStorage 存储生理周期信息。

Manifest：身份、外观和图标

PWA 需要一个 manifest，它是一个 JSON 文件，描述了应用程序的名称、图标、描述以及在 PWA 安装的操作系统上运行方式的其他定义。我们将创建一个 manifest 文件，该文件定义了应用程序安装时的外观，包括根据用户设备使用的图标，以及应用程序视口参数。我们还将查看使用浏览器开发者工具调试 manifest 文件。

Service Workers

Service worker 使应用程序能够离线工作。通过上一步的安全连接，初次访问页面时提供其基本功能，同时 service worker 正在下载。安装并激活 service worker 后，它将控制页面，提供更可靠和更快的性能。

要完成本教程，最好对 HTML、CSS 和 JavaScript 有基本的了解。本教程提供了关于创建 manifest 文件和初始化 service worker 的说明，以及设置本地开发环境以便您可以查看您的进度。

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

您可以尝试实时生理周期追踪器，并在 GitHub 上查看生理周期追踪器源代码。

• 下一页