基本信息
【插图】
编辑推荐
前端一线开发者实战经验的结晶，多位技术专家联袂推荐。
全方位介绍PWA基础知识、核心技术及相关实践，从商业视角的推广成本到体验视角的秒开、离线体验等。
内容简介
目录
序 言
前 言
第1章 初识PWA1
1.1 背景1
1.2 PWA概述4
1.2.1 快速5
1.2.2 集成5
1.2.3 可靠6
1.2.4 有吸引力7
1.2.5 PWA的布局结构7
1.3 应用程序与PWA8
1.3.1 能力8
1.3.2 开发成本8
1.3.3 安装包大小9
1.3.4 推广成本9
1.3.5 系统结构9
1.3.6 综合10
1.4 PWA的生态支持10
1.4.1 浏览器对PWA的支持11
1.4.2 PWA的生态11
前 言
第1章 初识PWA1
1.1 背景1
1.2 PWA概述4
1.2.1 快速5
1.2.2 集成5
1.2.3 可靠6
1.2.4 有吸引力7
1.2.5 PWA的布局结构7
1.3 应用程序与PWA8
1.3.1 能力8
1.3.2 开发成本8
1.3.3 安装包大小9
1.3.4 推广成本9
1.3.5 系统结构9
1.3.6 综合10
1.4 PWA的生态支持10
1.4.1 浏览器对PWA的支持11
1.4.2 PWA的生态11
前言
我最初接触PWA是在2017年年初，当时参加了一个前端分享会，其中一个主题就是与PWA相关的，介绍了PWA的Service Worker和安装到桌面的能力，以及这门技术未来的发展趋势，听完这个分享后，我就为PWA的一些能力所吸引。
Web本身的优势就非常明显，如可分享，可搜索，无须下载，在任何设备上有相同的展示等，现在再加上PWA的能力，让Web在原有的基础上具备了类原生应用程序的功能，这对于Web开发者来说是一个福音，可以让Web提供更好的用户体验，也能带来更多红利。随后，我便开始了对PWA的学习和探索之路。
在实际工作中，有很多场景适合使用PWA，这也使我的PWA实践之路有了一个很好的前提条件。在实践的过程中，并没有想象的那么顺利，PWA的大多数概念都有一些理解成本，一不小心就会犯错，大多数情况下是一边“挖坑”一边“填坑”。当然，最后在很多合适的场景中，我发现PWA的接入确实带来了非常好的效果，为业务产品带来了更多价值，提升了用户体验。
本书是一本PWA技术入门和实践的图书。通过本书，你可以对PWA有较深入的理解并进行一些项目实践。本书对PWA的核心技术做了比较透彻的讲解，对PWA中可能遇到的问题及一些注意事项也进行了充分说明。阅读过程中，所有的PWA知识点基本都可以在本书中找到说明。本书既可以作为一本PWA的入门图书，也可以作为一本PWA的使用手册。遇到关于PWA的问题时，请阅读这本书，相信本书可以让你找到问题的解决方法。
第1章介绍PWA的发展历程及生态环境，并为你开启第一个PWA应用示例，让你对PWA有一个基本了解。第2章介绍PWA的一些前置技术及预备知识，让你后面的学习过程更顺畅，如果你对这部分知识已有所了解，则可以跳过这一章。第3章开始对PWA最核心的部分—Service Worker进行讲解，这一章详细讲解了Service Worker的各个知识点、注意事项及实践。第4章开始进入 PWA的核心API部分，在这一章中，你可以学习PWA的一些核心API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送，该章中各小节属于并行知识点，可根据需求阅读任意一节。第5章介绍PWA使用过程中的一些配套工具，包括调试工具、评测工具和提效工具，等等，让你的PWA开发过程更顺畅。第6章为PWA的实践部分，针对不同的功能需求进行实践讲解。第7章讲解Web的系统集成能力，让系统集成能力配合PWA，使Web可以和应用程序相媲美。
本书主要面向有一定Web开发基础的读者，以及想学习PWA或者需要一本全面的PWA手册的开发者。
本书中用到的项目代码可以通过GitHub下载，地址为https://github.com/lecepin/PWA-Book。
致谢
首先要感谢我的前主管兰弼，他在实际工作中给了我充分的时间深挖PWA的价值和使用场景，并给了我在实际产品项目中落地的实践机会，让我在这方面有了非常多的实践经验。然后要感谢我的现主管仙甲对我在PWA技术上的支持和鼓励。经过长期实践和经验总结，我对这门技术有了一定的研究，也就有了分享的欲望，所以我还要感谢机械工业出版社华章公司的吴怡编辑，是她找到了我，给我提供了写书的机会，让我可以把在PWA技术上的沉淀与更多人分享。最后要感谢工作团队的伙伴们，很多时候大家一起“脑暴”，产出了很多想法。
Web本身的优势就非常明显，如可分享，可搜索，无须下载，在任何设备上有相同的展示等，现在再加上PWA的能力，让Web在原有的基础上具备了类原生应用程序的功能，这对于Web开发者来说是一个福音，可以让Web提供更好的用户体验，也能带来更多红利。随后，我便开始了对PWA的学习和探索之路。
在实际工作中，有很多场景适合使用PWA，这也使我的PWA实践之路有了一个很好的前提条件。在实践的过程中，并没有想象的那么顺利，PWA的大多数概念都有一些理解成本，一不小心就会犯错，大多数情况下是一边“挖坑”一边“填坑”。当然，最后在很多合适的场景中，我发现PWA的接入确实带来了非常好的效果，为业务产品带来了更多价值，提升了用户体验。
本书是一本PWA技术入门和实践的图书。通过本书，你可以对PWA有较深入的理解并进行一些项目实践。本书对PWA的核心技术做了比较透彻的讲解，对PWA中可能遇到的问题及一些注意事项也进行了充分说明。阅读过程中，所有的PWA知识点基本都可以在本书中找到说明。本书既可以作为一本PWA的入门图书，也可以作为一本PWA的使用手册。遇到关于PWA的问题时，请阅读这本书，相信本书可以让你找到问题的解决方法。
第1章介绍PWA的发展历程及生态环境，并为你开启第一个PWA应用示例，让你对PWA有一个基本了解。第2章介绍PWA的一些前置技术及预备知识，让你后面的学习过程更顺畅，如果你对这部分知识已有所了解，则可以跳过这一章。第3章开始对PWA最核心的部分—Service Worker进行讲解，这一章详细讲解了Service Worker的各个知识点、注意事项及实践。第4章开始进入 PWA的核心API部分，在这一章中，你可以学习PWA的一些核心API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送，该章中各小节属于并行知识点，可根据需求阅读任意一节。第5章介绍PWA使用过程中的一些配套工具，包括调试工具、评测工具和提效工具，等等，让你的PWA开发过程更顺畅。第6章为PWA的实践部分，针对不同的功能需求进行实践讲解。第7章讲解Web的系统集成能力，让系统集成能力配合PWA，使Web可以和应用程序相媲美。
本书主要面向有一定Web开发基础的读者，以及想学习PWA或者需要一本全面的PWA手册的开发者。
本书中用到的项目代码可以通过GitHub下载，地址为https://github.com/lecepin/PWA-Book。
致谢
首先要感谢我的前主管兰弼，他在实际工作中给了我充分的时间深挖PWA的价值和使用场景，并给了我在实际产品项目中落地的实践机会，让我在这方面有了非常多的实践经验。然后要感谢我的现主管仙甲对我在PWA技术上的支持和鼓励。经过长期实践和经验总结，我对这门技术有了一定的研究，也就有了分享的欲望，所以我还要感谢机械工业出版社华章公司的吴怡编辑，是她找到了我，给我提供了写书的机会，让我可以把在PWA技术上的沉淀与更多人分享。最后要感谢工作团队的伙伴们，很多时候大家一起“脑暴”，产出了很多想法。
序言
如今，互联网大流量早已进入了移动端，国内主流互联网产品的移动端流量已经普遍超过整体流量的80%。在移动端应用开发中，我们要面临为不同操作系统（Android、iOS、Windows 10）、不同设备（手机、平板）开发应用的问题，为此我们需要投入额外的成本应对这些差异。就算我们投入了成本，开发出了产品，在下载和安装环节，仍然存在很大的推广成本问题。统计学研究表明，安装烦琐是用户放弃尝试更多应用的主要原因之一。
PWA技术可以很好地解决这些问题。PWA运用现代的Web API能力为Web进行了扩展和增强，使Web具有与原生应用程序类似的体验度和能力。作为一种W3C的规范实现，PWA可以正常地运行在各个平台的浏览器中，真正做到一套代码解决所有平台一致性问题。同样，由于PWA具备安装成本几乎为0的特点，它非常适合实现Web端到应用端的过渡，提升转化率。
目前，国内外越来越多的网站对PWA进行了接入，如星巴克、优步、推特、脸书、淘宝、饿了么，等等，接入后的性能和转化率都有明显提升。如今谷歌、微软、英特尔等公司为PWA投入了技术支持和发展，Web的主流框架React、Vue等对PWA提供了快速接入方案，主流的浏览器厂商也紧跟其后，共同为PWA生态系统提供支持。
然而，根据我近几年对国内业界和前端社区的观察，可以说PWA在国内还没有发挥出它应有的作用。在这里，我尝试分析一下其中的原因，以及未来趋势。
第一，至少近三年，国内前端领域的技术发展，除了跟随国外最新动向之外，总的趋势是业务属性较强的技术更受重视。其中，最令人瞩目的小程序相关技术，以及低代码搭建相关技术，就是典型—两者分别迎合了国内头部互联网公司流量分发强管控的现实需求，以及中国互联网产业逐步转向企业服务的大背景。
PWA作为一个中立性很强的技术组合，尽管主要由Google推动，但其开放性以及主要着眼点在于优化具体的产品体验而非满足业务诉求的特点，导致它在国内主要由社区推动，声量明显不如商业推动力强的技术，处于一种“大家各取所需，却不知道别人也在各取所需”的微妙境地。
面对这种状况，作为技术人，我们要理性看待，而不是像一些跟风者一样片面地去肯定或者否定一项技术。事实上，PWA作为一个渐进式的技术组合，其中的若干技术，比如Service Worker、离线存储，乃至性能评估工具Lighthouse等，早已因其极强的实用性，在国内得到了广泛应用。
第二，一项工程技术的落地，除了原理论证以及各种功能点与性能指标的验证之外，还需要一个成本颇高的“踩坑”过程。这不是找一两个实习生通过Demo做个演示就可以解决的，而是需要实实在在的经验积累，其中既包含实现细节、性能优化、技术权衡、应对国内特殊场景的技巧等知识的积累，又包含开发、运维、数据统计等必不可少的开发工作链路上的基础设施建设与经验积累。
一直以来，PWA技术领域都缺乏优质、可靠的中文技术资料。对其做调研的团队，一方面直接参考官方文档，一方面只能通过各种技术博客等不可靠的渠道获取一些零散的信息，通过拼凑和尝试积累经验，这无形中推高了技术调研的成本。
而你现在看到的这本书可以作为一个好的开始。作为第一本出现在我视野中的中文PWA技术书籍，这本书的优点在于，它既不是文档翻译，也不是手把手教你敲命令，把开发技术写成“菜谱”，而是涵盖了从理论准备到实操流程，再到经验分享的一本“全链路书籍”。它可以帮你真正理解PWA，同时获得一些由作者亲自验证过的工程落地中“踩坑”的经验。从这个角度来说，这本书完全可以称为“PWA民间中文指南”，有了它，我们终于拥有了一些可靠的、系统化的、本地化的、开箱即用的PWA技术资产。
第三，PWA的定位在于让开发者快速开发出同时具备“优质的Web，轻盈的应用”两种属性的产品。而这样的属性，在粗放发展的互联网业态中，暂时没有得到应有的重视。
然而，事情正在发生变化。
在大家都在谈论“互联网下半场”的时代，我们有必要思考“下半场”对于我们而言有什么样的具体含义。我的个人理解是，所谓上半场，比的是人无我有，人慢我快；而下半场，比的是人有我优，人粗放我精致，我们现在正在见证这样的市场转变。而PWA，作为一种显著提高用户体验的技术，必然在这个过程中展现出它的优势，谁能更快更好地利用这种优势，谁就能在新阶段的前端技术竞争中占领先机。
综上，这是一本值得期待的书，它在一定程度上弥补了国内PWA领域技术书籍的空白，并且将这个任务完成得相当漂亮。如果有人请我分享前端技术书单，我想这本书应该会位列其中。
—知乎知名技术作者欲三更
2020年4月于杭州
PWA技术可以很好地解决这些问题。PWA运用现代的Web API能力为Web进行了扩展和增强，使Web具有与原生应用程序类似的体验度和能力。作为一种W3C的规范实现，PWA可以正常地运行在各个平台的浏览器中，真正做到一套代码解决所有平台一致性问题。同样，由于PWA具备安装成本几乎为0的特点，它非常适合实现Web端到应用端的过渡，提升转化率。
目前，国内外越来越多的网站对PWA进行了接入，如星巴克、优步、推特、脸书、淘宝、饿了么，等等，接入后的性能和转化率都有明显提升。如今谷歌、微软、英特尔等公司为PWA投入了技术支持和发展，Web的主流框架React、Vue等对PWA提供了快速接入方案，主流的浏览器厂商也紧跟其后，共同为PWA生态系统提供支持。
然而，根据我近几年对国内业界和前端社区的观察，可以说PWA在国内还没有发挥出它应有的作用。在这里，我尝试分析一下其中的原因，以及未来趋势。
第一，至少近三年，国内前端领域的技术发展，除了跟随国外最新动向之外，总的趋势是业务属性较强的技术更受重视。其中，最令人瞩目的小程序相关技术，以及低代码搭建相关技术，就是典型—两者分别迎合了国内头部互联网公司流量分发强管控的现实需求，以及中国互联网产业逐步转向企业服务的大背景。
PWA作为一个中立性很强的技术组合，尽管主要由Google推动，但其开放性以及主要着眼点在于优化具体的产品体验而非满足业务诉求的特点，导致它在国内主要由社区推动，声量明显不如商业推动力强的技术，处于一种“大家各取所需，却不知道别人也在各取所需”的微妙境地。
面对这种状况，作为技术人，我们要理性看待，而不是像一些跟风者一样片面地去肯定或者否定一项技术。事实上，PWA作为一个渐进式的技术组合，其中的若干技术，比如Service Worker、离线存储，乃至性能评估工具Lighthouse等，早已因其极强的实用性，在国内得到了广泛应用。
第二，一项工程技术的落地，除了原理论证以及各种功能点与性能指标的验证之外，还需要一个成本颇高的“踩坑”过程。这不是找一两个实习生通过Demo做个演示就可以解决的，而是需要实实在在的经验积累，其中既包含实现细节、性能优化、技术权衡、应对国内特殊场景的技巧等知识的积累，又包含开发、运维、数据统计等必不可少的开发工作链路上的基础设施建设与经验积累。
一直以来，PWA技术领域都缺乏优质、可靠的中文技术资料。对其做调研的团队，一方面直接参考官方文档，一方面只能通过各种技术博客等不可靠的渠道获取一些零散的信息，通过拼凑和尝试积累经验，这无形中推高了技术调研的成本。
而你现在看到的这本书可以作为一个好的开始。作为第一本出现在我视野中的中文PWA技术书籍，这本书的优点在于，它既不是文档翻译，也不是手把手教你敲命令，把开发技术写成“菜谱”，而是涵盖了从理论准备到实操流程，再到经验分享的一本“全链路书籍”。它可以帮你真正理解PWA，同时获得一些由作者亲自验证过的工程落地中“踩坑”的经验。从这个角度来说，这本书完全可以称为“PWA民间中文指南”，有了它，我们终于拥有了一些可靠的、系统化的、本地化的、开箱即用的PWA技术资产。
第三，PWA的定位在于让开发者快速开发出同时具备“优质的Web，轻盈的应用”两种属性的产品。而这样的属性，在粗放发展的互联网业态中，暂时没有得到应有的重视。
然而，事情正在发生变化。
在大家都在谈论“互联网下半场”的时代，我们有必要思考“下半场”对于我们而言有什么样的具体含义。我的个人理解是，所谓上半场，比的是人无我有，人慢我快；而下半场，比的是人有我优，人粗放我精致，我们现在正在见证这样的市场转变。而PWA，作为一种显著提高用户体验的技术，必然在这个过程中展现出它的优势，谁能更快更好地利用这种优势，谁就能在新阶段的前端技术竞争中占领先机。
综上，这是一本值得期待的书，它在一定程度上弥补了国内PWA领域技术书籍的空白，并且将这个任务完成得相当漂亮。如果有人请我分享前端技术书单，我想这本书应该会位列其中。
—知乎知名技术作者欲三更
2020年4月于杭州
媒体评论
本书从PWA的概念说起，包括从商业视角的推广成本到体验视角的秒开、离线体验等，配合实例代码，能够让读者从快速了解到快速上手。PWA技术体系是Web应用的方向，希望通过这本书，能够让更多的读者了解未来Web应用需要具备的一些能力，投身到Web技术中，让未来的数字世界触手可及。
—— 叶周全，阿里巴巴资深前端技术专家
PWA是近几年来在网页前端十分热门的议题之一，它为网页前端带来前所未有的丰富体验。本书作者对PWA有深刻的理解，将枯燥的技术问题转化成简单易懂的文字，配合许多案例及数据，这本书可谓是PWA宝典。
—— 廖凯明，谷歌移动技术顾问
这本书十分全面地介绍了PWA的基础知识、核心技术以及相关实践，非常适合开发者快速入门PWA，对PWA进行全面的学习。
—— 韩骏，微软开发工具事业部软件工程师
这本书由浅入深，基本上我想看到的内容都覆盖了。PWA是一个非常好的拓宽浏览器边界的技术，可以说对Service Worker和缓存的增强是一个极好的演进。PWA一方面解决了弱网的问题，在用户体验上提升很多，另一方面在PC、HTML 5中可以媲美原生应用，在保留开发方式不变的前提下，让Web开发有了更大的发挥空间。下一代Web颠覆者不一定是PWA，但一定是基于PWA演变而来的。推荐阅读。
—— 狼叔，《狼书：更了不起的Node.js》作者
如果想要短时间内快速上手PWA开发，这本书绝对不容错过。
—— 张鑫旭，知名CSS专家
PWA将Web和Native App的优势融合在一起，赋予了Web App离线化的能力。本书由浅入深，详细阐述了PWA的方方面面，很适合尚未了解PWA的开发者和想进一步掌握其能力的开发者，强烈推荐！
—— 王涵冰，腾讯IVWEB PWA项目负责人
—— 叶周全，阿里巴巴资深前端技术专家
PWA是近几年来在网页前端十分热门的议题之一，它为网页前端带来前所未有的丰富体验。本书作者对PWA有深刻的理解，将枯燥的技术问题转化成简单易懂的文字，配合许多案例及数据，这本书可谓是PWA宝典。
—— 廖凯明，谷歌移动技术顾问
这本书十分全面地介绍了PWA的基础知识、核心技术以及相关实践，非常适合开发者快速入门PWA，对PWA进行全面的学习。
—— 韩骏，微软开发工具事业部软件工程师
这本书由浅入深，基本上我想看到的内容都覆盖了。PWA是一个非常好的拓宽浏览器边界的技术，可以说对Service Worker和缓存的增强是一个极好的演进。PWA一方面解决了弱网的问题，在用户体验上提升很多，另一方面在PC、HTML 5中可以媲美原生应用，在保留开发方式不变的前提下，让Web开发有了更大的发挥空间。下一代Web颠覆者不一定是PWA，但一定是基于PWA演变而来的。推荐阅读。
—— 狼叔，《狼书：更了不起的Node.js》作者
如果想要短时间内快速上手PWA开发，这本书绝对不容错过。
—— 张鑫旭，知名CSS专家
PWA将Web和Native App的优势融合在一起，赋予了Web App离线化的能力。本书由浅入深，详细阐述了PWA的方方面面，很适合尚未了解PWA的开发者和想进一步掌握其能力的开发者，强烈推荐！
—— 王涵冰，腾讯IVWEB PWA项目负责人
