一个分解现代渐进式 Web 应用开发各个方面的课程。
本课程以易于理解的方式介绍了渐进式 Web 应用开发的基础知识。在接下来的模块中,您将了解什么是渐进式 Web 应用,如何创建或升级您现有的 Web 内容,以及如何为离线、可安装的应用添加所有组件。使用菜单窗格导航模块。(菜单位于桌面上的左侧,或移动设备上汉堡菜单的后面。)
您将学习 PWA 基础知识,如 Web 应用 Manifest、Service Worker、如何以应用为中心进行设计,以及如何使用其他工具来测试和调试您的 PWA。在这些基础知识之后,您将学习与平台和操作系统的集成、如何增强 PWA 的安装和使用体验,以及如何提供离线体验。
每个模块都包含交互式演示和自我评估,供您测试您的知识。您将能够在手机、平板电脑或笔记本电脑上测试和尝试演示,同时玩转代码,以了解构成渐进式 Web 应用的基础知识。
本课程专为初学者和高级 Web 开发者而设计。您可以从头到尾学习本系列课程,全面了解 PWA,或者您可以将其用作特定主题的参考。对于 Web 开发新手,您需要掌握 HTML、CSS 和 JavaScript 才能跟上课程进度。请查看Learn CSS,以及 MDN 上的 HTML 和 JavaScript 课程。
以下是您将学习的内容
入门指南
如果您想构建渐进式 Web 应用,您可能想知道从哪里开始,是否可以在不从头开始的情况下将网站升级为 PWA,或者如何从特定于平台的应用迁移到 PWA。本文将帮助您回答这些问题。
基础知识
所有渐进式 Web 应用本质上都是现代网站,因此重要的是您的网站在响应式设计、移动优先和一切优先、内在设计以及 Web 性能方面具有坚实的基础。
应用设计
渐进式 Web 应用与经典网站和 Web 应用之间的关键区别之一是可安装性。这创造了一种更独立的体验,更深入地集成到平台和操作系统中。安装带来了新的灵活性和新的责任,因为我们的内容周围不会有浏览器的用户界面。
资源和数据
渐进式 Web 应用是一个网站;它的所有资源都与 Web 上的资源相同,但具有新的工具,可以使这些资源在在线时快速加载,并在离线时可用。
Service Worker
Service Worker 是 PWA 的基本组成部分。它们实现了快速加载(无论网络状况如何)、离线访问、推送通知和其他功能。
缓存
您可以使用 Cache Storage API 在设备上下载、存储、删除或更新资源。然后,这些资源可以在设备上提供服务,而无需网络请求。
服务
使用 Service Worker 的 fetch 事件,您可以拦截网络请求,并使用不同的技术提供响应。
Workbox
Workbox 是一组模块,可以简化常见的 Service Worker 交互,例如路由和缓存。每个模块都解决了 Service Worker 开发的特定方面。Workbox 旨在尽可能简化 Service Worker 的使用,同时允许在需要时灵活地适应复杂的应用程序需求。
离线数据
要构建可靠的离线体验,您需要实施存储管理。IndexedDB、Cache、Storage Manager、Persistent Storage 和 Content Indexing 等工具可以提供帮助。
安装
安装的应用易于访问,并且可以利用与操作系统的更深层次集成。学习如何使您的 PWA 可安装并获得这些好处。
Web 应用 Manifest
Web 应用 Manifest 是一个 JSON 文件,用于定义 PWA 应如何作为已安装的应用程序处理,包括外观和基本行为在操作系统中。
安装提示
对于通过 PWA 安装标准的网站,浏览器会触发一个事件,提示用户安装它。好消息是,您可以使用此事件自定义您的提示,并邀请用户安装您的应用。
更新
您的 PWA 很可能需要更新。本章为您提供了更新 PWA 不同部分的工具,从资源到元数据。
增强功能
您的用户期望获得良好的体验。在本章中,您将了解如何使用启动画面、应用快捷方式以及会话的工作方式来增强您的 PWA。
检测
识别用户与您的应用的交互方式有助于自定义和改进用户体验。例如,您可以检查您的应用是否已安装在用户的设备上,并实施诸如将导航从浏览器转移到独立应用等功能。
操作系统集成
您的 PWA 现在可以在浏览器之外工作。本章介绍了用户安装您的应用后如何进一步与操作系统集成。
窗口管理
PWA 在浏览器之外管理自己的窗口。在本章中,您将了解用于管理操作系统内窗口的 API 和功能。
实验性功能
有些 PWA 功能仍在建设中,您可以参与其开发。在本章中,您将了解 Fugu 项目、如何注册 Origin Trial 以及如何使用实验性 API
工具和调试
我们将探索可用于开发、调试和测试您的渐进式 Web 应用的工具。
架构
在开发 PWA 时,您会做出一些决定,例如是创建单页应用程序还是多页应用程序,以及您是将其托管在域的根目录还是文件夹中。
复杂性管理
保持 Web 应用简单可能出乎意料地复杂。在本模块中,您将学习 Web API 如何与线程一起工作,以及如何将其用于常见的 PWA 模式,例如状态管理。
功能
PWA 不仅限于屏幕。本章介绍 PWA 今天在硬件、传感器和平台使用方面具备的功能。
结论
后续步骤和资源。
那么,您准备好学习 PWA 了吗?