Module 02 · Web Design Methodologies网页设计方法论

Progressive Web Applications in Action渐进式 Web 应用（PWA）实践

Coursera ↗

观看本视频后，你将能够：

解释渐进式 Web 应用（PWA）的核心特性
回顾不同 PWA 的各种特性

什么是渐进式 Web 应用（PWA）？

渐进式 Web 应用（PWA）结合了网站和 移动应用 的优势，利用最新的技术提供更加流畅、强大的用户体验。

📌 PWA 的核心特性：

跨设备兼容性，适用于手机、平板和笔记本电脑等各种设备
离线功能，即使在网络不稳定或离线时仍能工作
本地应用般的体验，能在后台更新内容，确保用户获取最新信息
推送通知，及时提醒用户活动和事件
可添加至主屏幕，像原生应用一样运行

PWA 实际应用案例：Home Depot

📌 HomeDepot.com 是一个使用 PWA 技术的实际案例。
如何将 PWA 添加到手机主屏幕：
1️⃣ 打开 Safari 浏览器，访问 HomeDepot.com
2️⃣ 点击 添加到主屏幕 图标
3️⃣ 添加后，可以像原生应用一样通过图标访问该网站

通过这个操作，用户可以享受类似原生应用的体验，快速加载并且不依赖于持续的网络连接。

PWA 实际应用案例：Target

📌 Target 进行了一项客户分析研究，发现大多数用户开始购物时使用手机，然后转到电脑完成购买。为了适应这种趋势，Target 很快推出了 PWA。

Target PWA 的特点

适配各种设备，无论是手机、平板还是电脑
快速加载，无论图片大小，加载速度都非常快
简单易用的导航，增强了用户体验

通过 PWA，Target 提升了用户参与度，并使购物体验更加流畅。

PWA 实际应用案例：金融时报

📌 金融时报 是新闻行业中最好的 PWA 之一。
该 PWA 为用户提供了与传统报纸相似的界面和体验，使用了经典的 三文鱼色背景。

金融时报 PWA 的特点

离线功能，即使在网络不佳的情况下，用户仍然可以访问内容
实时后台更新，确保用户获取最新的新闻信息
快速加载，为用户提供流畅的浏览体验
无缝的视频播放体验，适合移动设备和桌面使用

金融时报的 PWA 提高了新闻的可达性，特别适合商务人士在出差时使用。

PWA 实际应用案例：Webboard

📌 Webboard 是一个绘图应用，它使用 PWABuilder 来构建。
Webboard 允许用户使用 PWA 功能 创建和保存图形。

Webboard 的特点

低延迟墨水，支持 触控、鼠标和笔
集成文件系统，提供与原生应用相似的编辑和保存体验

PWABuilder 使得 Webboard 可以轻松实现与原生应用一样的编辑体验。

PWA 实际应用案例：PWAmp

📌 PWAmp 是一个 Web 音频播放器，它是一个可安装的 Web 应用，并且能够与桌面设备集成。

PWAmp 的特点

支持音频播放、暂停和跳过歌曲
可以添加新歌曲、排序播放列表、导出歌曲等功能
离线功能，支持文件系统访问，增强用户体验

PWAmp 使用了 PWA 的离线功能，为用户提供与传统桌面音频播放器相似的体验。

PWA 实际应用案例：1Div

📌 1Div 是一个 CSS 编辑器，允许用户只使用 一个 HTML 元素和 CSS 代码 来创建图形。

1Div 的特点

动态创建图形，并将其保存在浏览器内存中
支持本地保存，用户可以随时创建和保存设计
展示 Window Controls Overlay 功能，允许动态改变颜色，并可在设备上本地存储和删除设计

这个演示项目展示了 CSS 编辑器 的强大功能，同时也展示了 PWA 技术 的灵活性和强大能力。

课程总结

本视频中，你学习了：

PWA 的特性：适配各种设备，支持离线功能，能够发送推送通知
多个实际案例：如 HomeDepot、Target、金融时报，展示了如何利用 PWA 提升性能、用户体验和跨平台兼容性
Webboard、PWAmp 和 1Div 的应用，展示了如何用 PWABuilder 创建交互式 Web 应用
PWA 的优势：提供类似原生应用的功能、增强用户互动和提高应用性能

🚀 通过学习 PWA，提升你的 Web 应用性能，创造更流畅的用户体验！ 🌍🔥