深入浅出 PWA

理论结合实践,帮助开发者全方位地掌握现代 Web 技术体系中的 PWA 架构。
676 购买
打开
作者 泪已无痕
发布时间 2020-03-24 03:35
更新时间 2020-09-19 15:50

作者介绍

启业云架构师,Taro 项目组成员;长期关注前端工程化、微前端、Web3.0、ETH、Hyperledger Fabric 等技术。

小册介绍

随着时代的发展,出于对低成本开发与维护复杂跨平台应用的追求,前端技术正在突破浏览器束缚,开始向桌面、移动等领域扩张。其中出现了以 Electron、Cordova、ReactNative、Weex 为代表的混合应用开发架构方案,这些方案虽然解决了传统 Web 无法与底层系统深层次交互、原生应用更新繁琐、应用开发维护成本过高等问题,但其依旧无法满足用户零安装、零更新、用完即走的需求。

当我们回顾技术发展史会发现,目前唯一能够打破平台限制、满足零安装更新等需求的正是不经任何加工的传统 Web 技术,得益于前端工程化体系的逐步完善,构建大型 Web 应用的开发维护成本已经得到大幅度降低,但由于 Web 自身的一些原因导致它无法替代平台原生应用:

  • 应用入口依赖于浏览器。
  • 不具备离线处理能力。
  • 不具备与底层系统深层次交互能力。

也正因为此,Google 的工程师于 2015 年提出了 PWA(Progressive Web App) 架构,它旨在不丢失 Web 开放特性的前提下,让 Web 应用能够以渐进的形式撕掉浏览器的标签,最终抹平与原生应用的差异。其主要特点有:

  • 可通过 Manifest 配置文件实现将应用添加到主屏幕,以解决应用入口依赖浏览器的问题。
  • 借助 Service Worker、离线存储、后台同步等技术来提供离线处理能力。
  • 通过推送通知、蓝牙、支付等新接口来突破浏览器限制,从而达到集成底层系统功能。

为了能够让大家更好地理解并掌握 PWA,我将个人在工作学习中的一些心得整理成小册《深入浅出 PWA》,希望通过学习,大家可以熟练掌握并使用 PWA 架构及其相关技术来构建高可用的现代化 Web 应用。

主要内容

本小册主要包含以下三个部分:

  1. 基础篇:通过对 Manifest 配置文件、Service Worker、离线存储、后台同步、推送通知等技术的学习,大家可以对 PWA 底层技术有一个全面的了解。
  2. 实战篇:我们将使用第一部分中所学到的知识来构建一个真实案例,以便大家更好地掌握 PWA。
  3. Workbox 详解篇:在理解并能够熟练使用 PWA 后,通过对 Workbox 这个工具包的学习,我们便能够更容易且高效地完成 PWA 应用的构建。

你将学到什么?

通过本小册,你将全方位地掌握 PWA 架构,并能熟练应用相关技术来构建高可用的现代化 Web 应用。该小册主要包括以下知识点:

  1. Manifest 应用配置文件的使用。
  2. Service Worker 预缓存、预加载、后台同步、推送通知等相关技术的使用。
  3. 如何通过应用 Shell 来解决页面切换过程中的白屏问题。
  4. 如何根据业务场景来选择数据的请求及缓存更新策略。
  5. 如何有效地处理 Service Worker 的更新问题。
  6. Workbox 工具包的使用。

适宜人群

  1. 对 PWA 相关技术感兴趣且有一定 Web 研发经验的开发者。

资源

  1. 小册示例代码仓库为:https://github.com/nanjingboy/pwa-demos

购买须知

  1. 本小册为图文形式内容服务,共计25节;
  2. 全部文章预计3月20日更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
  1. 基础篇 1:Manifest 配置文件
  2. 基础篇 2:Service Worker
  3. 基础篇 3:离线存储
  4. 基础篇 4:后台同步
  5. 基础篇 5:推送通知
  6. 实战篇 1:概述
  7. 实战篇 2:预缓存
  8. 实战篇 3:应用 Shell
  9. 实战篇 4:导航预加载
  10. 实战篇 5:请求策略
  11. 实战篇 6:缓存置换策略
  12. 实战篇 7:Service Worker 更新
  13. Workbox 详解篇 1:概述
  14. Workbox 详解篇 2:基本配置
  15. Workbox 详解篇 3:预缓存
  16. Workbox 详解篇 4:路由配置
  17. Workbox 详解篇 5:请求 & 缓存置换策略
  18. Workbox 详解篇 6:导航预加载
  19. Workbox 详解篇 7:可缓存对象
  20. Workbox 详解篇 8:缓存更新广播
  21. Workbox 详解篇 9:后台同步
  22. Workbox 详解篇 10:插件
  23. Workbox 详解篇 11:Workbox Window
  24. Workbox 详解篇 12:Workbox Build
  25. 结束语