PWA渐进式Web应用是最近很火的前端技术能让网页应用拥有类似原生App的体验，比如离线访问推送通知添加到主屏幕等等。

Google在大力推动PWA很多大公司，比如Twitter阿里巴巴淘宝等等都已经推出了PWA版本的应用效果很不错。

我最近学习了PWA从零基础到能独立开发PWA应用走了一些弯路也积累了一些经验。

今天想分享一下我学习PWA的学习路线和经验帮想学习PWA的朋友少走弯路快速入门。

一、什么是PWA

在讲学习路线之前，先简单介绍一下什么是PWA。

PWA全称是Progressive Web App渐进式Web应用。它不是一门新的技术，或者框架而是一种Web应用的开发理念和最佳实践通过一系列Web技术让网页应用拥有类似原生App的体验。

PWA的核心特性有：

  1. 可靠（Reliable）：即使在网络不稳定，或者离线的情况下也能快速加载正常使用。
  2. 快速（Fast）：页面加载快交互流畅对用户操作响应迅速。
  3. 沉浸式（Engaging）：能添加到主屏幕全屏运行支持推送通知给用户类似原生App的沉浸式体验。

PWA的"渐进式"体现在它是渐进增强的在支持的浏览器上能获得完整的PWA体验在，不支持的浏览器上也能正常使用只是没有PWA的特性不会影响基本功能。

PWA的优势有：

  • 无需下载安装：用户不需要去应用商店下载安装直接通过浏览器访问就能使用也能添加到主屏幕。
  • 跨平台：一套代码能在各种平台和设备上运行包括桌面和，移动不需要分别开发iOS和Android版本。
  • 更新方便：Web应用的更新是即时的用户不需要手动更新应用刷新页面就能获得最新版本。
  • 成本低：相比开发原生App开发PWA的成本更低周期更短维护也更方便。

当然PWA也有一些局限，比如对硬件的访问能力不如原生AppiOS对PWA的支持还不够完善等等，但是随着技术的发展这些问题都在逐步解决。

二、PWA的核心技术

PWA是由一系列Web技术组成的下面介绍PWA的核心技术。

1. Service Worker：

Service Worker是PWA的核心技术它是一个运行在浏览器后台的脚本独立于网页能拦截和，处理网络请求缓存资源推送通知等等。

Service Worker是PWA能实现离线访问的关键。通过Service Worker能缓存应用的静态资源和，数据在离线的情况下也能从缓存中读取资源正常使用应用。

Service Worker还能实现推送通知，即使用户没有打开网页也能收到推送消息类似原生App的推送。

Service Worker有自己的生命周期包括注册安装激活等阶段需要理解它的生命周期才能正确使用。

2. Web App Manifest：

Web App Manifest是一个JSON文件用来描述应用的信息，比如应用名称图标主题色启动方式等等。

通过Web App Manifest能让网页应用被添加到主屏幕像原生App一样有图标和，名称点击能全屏启动隐藏浏览器的地址栏和工具栏给用户沉浸式的体验。

Web App Manifest的主要字段有：

  • name：应用名称
  • short_name：短名称显示在主屏幕
  • icons：应用图标各种尺寸
  • start_url：启动URL
  • display：显示模式fullscreenstandaloneminimal-uibrowser
  • background_color：背景色
  • theme_color：主题色
  • orientation：屏幕方向

3. HTTPS：

PWA要求网站必须使用HTTPS因为Service Worker和很多PWA相关的API都要求安全的上下文也就是HTTPS或者localhost。

所以开发PWA之前，要确保网站已经部署了HTTPS证书。

4. Cache API：

Cache API是配合Service Worker使用的用来缓存请求和响应能让Service Worker精确控制缓存哪些资源什么时候使用缓存什么时候更新缓存。

Cache API提供了各种方法，比如caches.opencache.addcache.putcache.match等等能灵活管理缓存。

5. Push API和Notification API：

Push API和Notification API用来实现推送通知功能。Push API让服务端能向客户端推送消息Notification API让网页能显示系统通知。

通过这两个APIPWA能实现类似原生App的推送通知功能，即使用户没有打开网页也能收到消息。

6. 其他相关API：

PWA还涉及很多其他的Web API比如：

  • Background Sync API：后台同步在网络恢复后自动同步数据
  • IndexedDB：客户端数据库存储大量结构化数据
  • Fetch API：网络请求API替代XMLHttpRequest
  • Promises：异步编程的基础
  • Async/Await：更简洁的异步编程方式

三、我的学习路线

下面分享一下我学习PWA的学习路线供大家参考。

阶段1：打好前端基础：

在学习PWA之前，要先打好前端基础，因为PWA是建立在Web技术之上的。

需要掌握的前端基础有：

  • HTML5：语义化标签表单多媒体等等
  • CSS3：布局动画响应式设计FlexboxGrid等等
  • JavaScript：基础语法DOM操作事件异步编程ES6+新特性等等
  • HTTP：HTTP协议基础请求响应缓存Cookie等等
  • 浏览器原理：浏览器的渲染机制缓存机制等等

如果这些基础还不扎实建议先补一下基础再学习PWA否则会很吃力。

阶段2：理解PWA的核心概念：

打好基础之后，开始学习PWA的核心概念。

首先，了解什么是PWAPWA的特性优势局限应用场景等等建立对PWA的整体认识。

然后重点理解Service Worker的概念和，生命周期这是PWA的核心也是最难的部分。要理解Service Worker是什么能做什么它的生命周期是，怎样的注册安装激活 fetch事件等等。

还要理解Web App Manifest的作用和字段Cache API的使用HTTPS的要求等等。

这个阶段主要是看文档和教程建立概念不需要太深入实践先有整体认识。

阶段3：动手实践开发第一个PWA：

理解了核心概念之后，就要动手实践开发第一个PWA应用。

建议从简单的应用开始，比如一个天气应用，或者一个待办事项应用不要一开始就做太复杂的应用。

开发步骤大概是：

  1. 创建基本的Web应用：先用HTMLCSSJavaScript开发一个普通的Web应用实现基本功能。
  2. 添加Web App Manifest：创建manifest.json文件配置应用信息在HTML中引用。
  3. 注册Service Worker：创建Service Worker文件在主页面中注册。
  4. 实现缓存策略：在Service Worker中实现资源缓存离线访问等功能。
  5. 测试PWA特性：用ChromeDevTools测试PWA的特性，比如离线功能添加到主屏幕等等。
  6. 部署到HTTPS：把应用部署到支持HTTPS的服务器测试真实环境下的效果。

开发第一个PWA的过程中会遇到很多问题，比如Service Worker注册失败缓存策略不对离线不生效等等不要怕遇到问题解决问题的过程就是学习的过程。

阶段4：深入学习掌握高级特性：

开发了第一个PWA之后，对PWA有了基本的实践经验，然后开始深入学习掌握高级特性。

需要深入学习的内容有：

  1. Service Worker高级用法：更复杂的缓存策略，比如Cache FirstNetwork FirstStale While Revalidate等等根据不同的资源类型选择合适的缓存策略。
  2. 推送通知：学习Push API和Notification API实现服务端推送消息客户端显示通知的功能。
  3. 后台同步：学习Background Sync API实现离线时记录操作网络恢复后自动同步的功能。
  4. IndexedDB：学习IndexedDB在客户端存储大量数据实现离线数据存储和查询。
  5. PWA框架和工具：学习一些PWA相关的框架和工具，比如WorkboxPWACompat等等提高开发效率。
  6. 性能优化：学习PWA的性能优化，比如首屏加载优化资源预加载懒加载等等让PWA更快更流畅。

这个阶段需要多看文档多实践做一些更复杂的PWA项目积累经验。

阶段5：实战项目积累经验：

掌握了高级特性之后，就可以做一些实战项目积累经验把PWA用到实际的项目中。

可以把自己以前的Web应用改造成PWA或者开发新的PWA应用，比如博客论坛电商工具类应用等等。

在实战中会遇到各种实际的问题，比如兼容性问题性能问题用户体验问题等等解决这些问题能快速提升能力。

也可以参与开源项目，或者写技术博客分享自己的经验和心得和社区交流学习。

四、推荐的学习资源

下面推荐一些我学习PWA时觉得不错的学习资源。

官方文档：

  1. Google Developers - PWA：Google官方的PWA文档很全面很权威是学习PWA的首选资源。
  2. MDN Web Docs - PWA：Mozilla的MDN文档也很全面对PWA的各种API有详细的介绍。
  3. Web Fundamentals：Google的Web基础教程包含PWA性能优化等各种Web开发最佳实践。

书籍：

  1. 《Progressive Web Apps》：Dean Hume写的PWA书籍很系统很实用适合入门和进阶。
  2. 《Building Progressive Web Apps》：Tal Ater写的PWA书籍深入讲解Service Worker和各种PWA技术。

在线课程：

  1. Google PWA Training：Google官方的PWA在，线课程免费很系统有代码示例和练习。
  2. Udacity - Progressive Web Apps：Udacity的PWA课程由Google合作开发很不错。

工具和库：

  1. Workbox：Google开发的Service Worker库能简化Service Worker的开发提供了各种缓存策略和工具方法推荐使用。
  2. Lighthouse：Google开发的Web应用审计工具能检查PWA的合规性性能可访问性等等ChromeDevTools里自带了。
  3. PWACompat：Google开发的库能让PWA在，各种浏览器上更好地兼容包括iOSSafari。

社区和博客：

  1. PWA Rocks：PWA相关的资源聚合网站有很多PWA案例和，文章。
  2. Medium - PWA：Medium上有很多PWA相关的技术文章。
  3. 掘金SegmentFault：国内的技术社区也有很多PWA相关的中文教程和文章。

五、常见的坑和注意事项

最后分享一下我学习PWA时遇到的一些常见的坑和注意事项帮大家避免踩坑。

坑1：HTTPS的要求：

Service Worker要求HTTPS环境除了localhost本地开发的时候，用localhost没问题，但是部署到服务器之后，必须用HTTPS否则Service Worker注册不了。

所以开发PWA之前，要确保有HTTPS的部署环境可以用Let's Encrypt免费证书，或者GitHub PagesNetlify等支持HTTPS的托管服务。

坑2：Service Worker的作用域：

Service Worker有作用域的概念Service Worker文件放在，哪个目录就只能控制那个目录及其子目录的请求。

比如Service Worker文件放在/js/sw.js那么它的作用域就是，/js/只能控制/js/路径下的请求不能控制根目录的请求。

如果想让Service Worker控制整个网站要把Service Worker文件放在网站根目录，比如/sw.js这样作用域就是整个网站。

也可以在注册Service Worker的时候，用scope选项指定作用域，但是不能超出Service Worker文件所在的目录的上级目录。

坑3：缓存更新的问题：

Service Worker缓存了资源之后，更新资源的时候，可能会出现用户看到的还是旧的缓存的问题。

这是，因为Service Worker的生命周期和缓存策略的问题。需要合理设计缓存策略和更新机制，比如给静态资源加版本号，或者哈希用Cache First策略HTML用Network First或者Stale While Revalidate策略等等。

还要注意Service Worker本身的更新浏览器会在每次访问的时候，检查Service Worker文件是否更新，如果更新了会安装新的Service Worker但是新的Service Worker要等所有旧的Service Worker控制的页面都关闭之后，才会激活。可以用self.skipWaiting()和clients.claim()让新的Service Worker立即激活接管页面。

坑4：iOS Safari的兼容性：

iOSSafari对PWA的支持还不够完善，比如推送通知后台同步等功能在iOS上不支持，或者支持不好。

而且iOSSafari的Service Worker有一些限制，比如缓存大小限制生命周期管理等等和Chrome不一样。

所以开发PWA的时候，要注意iOS的兼容性做好降级处理在不支持PWA特性的浏览器上保证基本功能正常使用。可以用PWACompat等库提升兼容性。

坑5：不要滥用缓存：

Service Worker能缓存资源实现离线访问，但是不要滥用缓存什么都缓存。

要根据资源的类型和更新频率选择合适的缓存策略。比如静态资源（CSSJS图片等）更新不频繁可以用Cache First策略缓存时间长一些。HTML和API数据更新频繁应该用Network First或者Stale While Revalidate策略优先获取最新数据。

还要注意缓存的清理不要让缓存无限增长占用用户的存储空间要定期清理旧的缓存。

六、写在最后

以上就是我学习PWA的学习路线和经验分享。

PWA是一个很有前景的技术能让Web应用拥有类似原生App的体验，同时保留Web的优势，比如跨平台无需安装更新方便等等。随着浏览器对PWA的支持越来越完善PWA的应用会越来越广泛。

学习PWA不难，只要打好前端基础理解核心概念多动手实践就能快速入门。当然要精通还是需要多做项目多积累经验。

希望我的学习路线和经验能帮想学习PWA的朋友少走弯路快速入门。

如果有什么问题，或者不同的看法欢迎在评论区留言我们一起交流。

最后用一句话结束这篇文章："PWA是Web的未来早学早受益。"

愿大家都能学好PWA开发出优秀的渐进式Web应用。