欢迎学习渐进式 Web 应用!

该课程详细介绍了现代渐进式 Web 应用开发的各个方面。

本课程以浅显易懂的方式介绍渐进式 Web 应用开发的基础知识。 在接下来的模块中,您将了解什么是渐进式 Web 应用,如何创建应用或升级现有 Web 内容,以及如何为离线安装式应用添加所有部分。请使用菜单窗格浏览各个模块。(桌面设备上菜单位于左侧,移动设备位于汉堡菜单后面。)

您将学习 PWA 基础知识,例如 Web 应用清单、Service Worker、如何设计应用的出发点,以及如何使用其他工具测试和调试 PWA。 完成这些基础知识的学习后,您将了解与平台和操作系统的集成、如何改善 PWA 的安装和使用体验,以及如何提供离线体验。

每个单元都包含互动式演示和自我评估,方便您测试自己的知识掌握情况。 您可以一边在手机、平板电脑或笔记本电脑上测试和试用演示版代码,一边学习代码,了解什么是渐进式 Web 应用的基础知识。

本课程面向初级和高级 Web 开发者。 您可以完整阅读该系列课程,以便从上到下大致了解 PWA,也可以将其用作特定主题的参考。如果您是 Web 开发新手,则需要具备 HTML、CSS 和 JavaScript 方面的基础知识才能学习相关知识。 请查看学习 CSS 以及有关 MDN 的 HTMLJavaScript 课程。

您将了解以下内容:

开始使用

如果您想构建渐进式 Web 应用,可能想知道从何处入手,能否从零开始将网站升级为 PWA,或者如何从平台专用应用迁移到 PWA。本文将帮助您解答这些问题。

基础知识

所有渐进式 Web 应用本质上都是现代网站,因此您的网站在响应式设计、移动等所有方面、内在设计和网页性能方面都具有坚实的基础,这一点很重要。

应用设计

渐进式 Web 应用与传统版网站和 Web 应用之间的主要区别之一是可安装性。从而打造与平台和操作系统更加集成的独立体验。由于我们没有围绕我们的内容设置浏览器界面,因此安装过程可以带来新的灵活性并带来新的责任。

资产和数据

渐进式 Web 应用是一种网站;它的所有资源都与 Web 中的资源相同,只不过其中包含一些新工具,可让这些资源在线加载且离线可用。

Service Worker

Service Worker 是 PWA 的基本组成部分。它们支持快速加载(无论网络如何)、离线访问、推送通知和其他功能。

缓存

您可以使用 Cache Storage API 下载、存储、删除或更新设备上的资产。然后,这些资源无需网络请求即可在设备上提供。

服务

利用 Service Worker 的提取事件,您可以拦截网络请求并使用不同的技术提供响应。

Workbox

Workbox 是一组模块,可简化路由和缓存等常见的 Service Worker 交互。每个模块讨论 Service Worker 开发的特定方面。Workbox 旨在尽可能简化 Service Worker 的使用,同时让您能够根据需要灵活地满足复杂的应用要求。

线下数据

为了打造可靠的离线体验,您需要实施存储空间管理。IndexedDB、Cache、Storage Manager、Persistent Storage 和 Content Indexing 等工具都可以派上用场。

安装

已安装的应用易于访问,并可利用与操作系统进行的一些更深入的集成。了解如何使 PWA 可安装,并获得这些优势。

Web 应用清单

Web 应用清单是一个 JSON 文件,用于定义应将 PWA 视为已安装应用的方式,包括操作系统中的外观和风格以及基本行为。

安装提示

对于符合 PWA 安装条件的网站,浏览器会触发事件来提示用户安装。好消息是,您可以使用此事件来自定义提示并邀请用户安装您的应用。

更新

您的 PWA 可能需要更新。本章将提供用于更新 PWA 不同部分(从资源到元数据)的工具。

增强功能

用户期望获得良好的体验。在本章中,您将了解如何使用启动画面、应用快捷方式以及会话的工作原理来增强 PWA。

检测

确定用户如何与您的应用互动,这对于自定义和改善用户体验大有裨益。例如,您可以检查应用是否已安装在用户的设备上,并实现诸如将导航从浏览器转移到独立应用等功能。

操作系统集成

现在,PWA 无需浏览器即可正常运行。本章将介绍如何在用户安装您的应用后进一步与操作系统集成。

窗口管理

浏览器之外的 PWA 会管理自己的窗口。在本章中,您将了解用于在操作系统中管理窗口的 API 和功能。

实验性功能

有些 PWA 功能仍在开发中,您可以参与其开发。在本章中,您将了解 Fugu 项目、如何注册源试用以及如何使用实验性 API

工具和调试

我们将探索可用于开发、调试和测试渐进式 Web 应用的工具。

架构

在开发 PWA 时,您需要做出一些决定,例如创建单页应用还是多页应用,以及是将其托管在网域的根目录中还是放在文件夹中。

复杂性管理

保持 Web 应用简单明了可能会非常复杂。此单元将介绍 Web API 如何与线程处理,以及如何将其用于常见的 PWA 模式(例如状态管理)。

功能

PWA 不仅仅与屏幕绑定。本章介绍 PWA 目前在硬件、传感器和平台使用方面的功能。

总结

后续步骤和资源。

准备好学习 PWA 了吗?