作者：王乐平
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
PWA入门与实践试读：
前言
我最初接触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技术上的沉淀与更多人分享。最后要感谢工作团队的伙伴们，很多时候大家一起“脑暴”，产出了很多想法。第1章 初识PWA
PWA是什么？它是用来做什么的？在一些Web前端技术大会上为什么经常听到这个关键字？它和Web有什么关系？我该如何使用它？
本章将针对以上问题介绍PWA产生的背景以及PWA的核心诉求，通过原生应用与PWA的比较了解到它们之间的关系和优劣，以及目前主流前端框架、浏览器厂商对PWA的支持情况。通过一些实际的企业接入PWA后的数据，来了解PWA对企业带来的真实影响。
本章也会为你搭建一个PWA的开发和调试环境，并为你开启第一个PWA应用。1.1 背景
根据全球性互联网信息服务提供商comScore公司的数据统计，早在2013年，全球网络移动端的用户数量就超过了桌面端，目前互联网已进入了移动时代。
移动端的用户会花费78%的时间去使用应用程序，而在移动网页上仅花费13%左右的时间。但这一数据并不能证明应用程序全是优点，把重点放到开发应用程序上也并非就万事大吉了。应用程序面临一个很大的问题，那就是多数用户会把78%的时间放在常用的3个应用程序上。那么，如果你的应用程序不是用户常用的3个软件，那将会非常糟糕。
调查显示，用户每月安装的新软件平均数量很少，相比之下，每月访问的移动端网站数量大约为100。
此外，还需要看一下应用程序和Web推广的获利成本问题。在中国有90多个应用商店，排行前十的应用商店占据了90%的市场份额，竞争十分激烈，获取用户的成本高。目前一些应用市场如图1-1所示。图1-1 应用市场
大约每次推广应用程序成功获取一个用户需要花费3.75美元，而通过推广Web成功获取一个用户仅花费0.07美元，如图1-2所示。图1-2 应用程序和Web的推广成本对比
对比应用程序和Web可以看出：应用程序具有更强大的能力，如桌面进入、使用系统硬件、可离线工作等；Web具有更好的易达性，用一个URL就可以访问、被搜索和分享。两者的优势对比如图1-3所示。图1-3 应用程序和Web的优势
有没有什么方法可以让开发的应用程序既有原生应用程序的能力，又有Web的易达性呢？比如让用户在移动端主屏幕上点击相应的程序图标，程序就可以快速启动，当网络处于离线状态时也可以正常工作，程序可以运行在后台，即使程序关闭依然可以接收到推送消息，还可以使用摄像头、麦克风等系统硬件资源，且不需要为每个不同的平台开发不同的版本。
那就是我们的主角——PWA，它赋予Web更强大的能力，如图1-4所示。图1-4 PWA在Web和应用程序中的角色1.2 PWA概述
PWA（Progressive Web App，直译是渐进式Web应用）最早在2015年由Alex Russell正式提出，2016年开始，Google大力对PWA进行支持和推广，让PWA的概念深入人心，此后的各种Web技术大会中PWA也成了必不可少的分享主题。2018年年初，iOS Safari正式对PWA进行了支持，扫除了PWA落地的一大障碍。
PWA中的P（Progressive）有两层含义，一方面是渐进增强，用渐进增强的方式来让Web App的体验和功能能够更接近原生App的体验及功能，另一方面是指下一代Web技术。
PWA并不是描述某一个技术，而是一些技术的合集，如图1-5所示。图1-5 PWA的组成部分
PWA从根本上改变了端到端的用户体验，为了做到这一点，PWA专注于4个方面，如图1-6所示。图1-6 PWA的专注点
·快速：使Web快速运行。
·集成：使Web能力与系统能力集成。
·可靠：确保其可靠运行。
·有吸引力：能够提供和原生应用一样的体验。1.2.1 快速
用户期待的应用程序应该是可以快速加载的，并且可以平滑过渡。在Web开发中，我们会着重关注性能问题，尤其在一些中低端的移动手机上性能问题表现得特别明显。因为对页面的加载时间会直接影响用户对应用的使用态度。
当打开一个网页所用时间超过3秒时，有20%甚至更多的用户将会放弃访问该网站，如图1-7所示。图1-7 网页加载时间对应的会话率和跳出率
所以，访问速度对网站来说是十分重要的。1.2.2 集成
打开网站时，用户不必通过打开浏览器来访问网站，甚至用户意识不到这是一个网站。用户可以与网站有一个很好的互动，即便在不同的设备上这些应用也是一样的。网站可通过过主屏幕的图标启动，可以在任务栏里看到它，它也有权限访问系统所有的功能和硬件。像Web支付，用户无须填写复杂的账单信息，而是可以通过API直接调用支付系统。在不同的设备上添加网站到主屏幕也保持了相同的集成体验。如图1-8所示。图1-8 PWA的支付能力和添加到主屏幕能力1.2.3 可靠
在互联网时代，用户在使用网站时已经习惯了一直在线的状态，他们不关心网络环境，而是希望无论在什么环境下网站都是可靠的。
然而手机并不是总在线，或许用户开启了飞行模式，或许用户在地铁、地下停车场等无信号区域。在这种离线状态下，访问网站时会出现一个类似“您处于离线状态”的页面，如图1-9所示，这样的用户体验是糟糕的。图1-9 离线情况下的网页表现
为了让网站在主屏幕上有一席之地，即使在网络不可靠的情况下，我们也要让网站可靠。1.2.4 有吸引力
有吸引力的网站可使用户的整个体验过程十分愉悦，可以轻松完成他们需要做的事情。例如Web推送能力，它可以及时通知用户了解情况，即使浏览器处于关闭状态，用户仍然可以接收到推送消息。Web推送能力使移动端的用户从每月活跃用户向每日活跃用户转变。1.2.5 PWA的布局结构
PWA的所有能力都是由浏览器层进行赋能，开发者调用浏览器层的相应API，浏览器再去调用系统的相关资源，以此来实现PWA的能力。开发者在使用PWA能力时，无须关心处于什么操作系统，一切由浏览器“抹平”，在任何系统环境下都能保证一致的用户体验。PWA的布局结构如图1-10所示。图1-10 PWA的布局结构
PWA的相关API由W3C定制，由浏览器厂商实现。可以在支持的浏览器上进行渐进增强，在还未支持的浏览器上进行优雅降级。1.3 应用程序与PWA
下面对应用程序和PWA进行对比，看一下两者的区别和优劣势。从以下角度进行对比：
·能力。
·开发成本。
·安装包大小。
·推广成本。
·系统结构。1.3.1 能力
应用程序：
·可以操作设备中几乎所有硬件资源。
·性能好，速度快。
·几乎无约束，自定义能力强。
PWA：
·可操作的设备硬件资源有限，但用户常用设备基本都可以使用。
·性能依赖于浏览器，目前性能还不错。
·用户的一切行为限制于浏览器支持的API。
从能力方面可以看出应用程序占优势。1.3.2 开发成本
应用程序：
·不同的操作系统，需要进行单独开发。
·即便有一些多端方案，仍然需要对不同的平台进行特殊处理。
·开发人员需要足够了解系统及多种编程语言。
PWA：
·只需要一套代码，就可以在任意平台运行。
·无须关心平台的差异性，因为在任何平台上展示的效果都是一样的。
·只需要会Web的编程语言即可开发。
在开发成本方面，PWA占优势。1.3.3 安装包大小
应用程序：
·对不同的操作系统要开发不同的安装包。
·安装包的大小从几MB到几百MB不等。
PWA：
·无安装包，只需要一个URL即可。
·页面的大小也只有几KB到几MB。
可以拿Twitter应用的安装包来对比一下：
·Android：24MB。
·iOS：214MB。
·PWA：0.6MB。
在安装包大小方面，PWA占优势。1.3.4 推广成本
应用程序：
·应用程序属于封闭型软件，不可分享，不可被搜索，只能借助于应用市场进行推广。
·拿国内来说，应用市场众多，但是每个应用市场中都需要接入成本，并且每个应用市场的推广成本都非常高。
·用户要想使用你的应用程序，必须下载，这增加了用户接入成本。
PWA：
·用一个URL即可进行推广。
·可分享，可被搜索。
·无下载安装成本。
·推广费用低。
在推广成本方面，PWA占优势。1.3.5 系统结构
应用程序：
·直接与系统进行通信，可以调用系统支持的一切API。
PWA：
·能力依赖于浏览器提供的能力。
在系统结构方面，应用程序占优势。
二者在系统结构方面的对比如图1-11所示。图1-11 PWA与应用程序的系统结构对比1.3.6 综合
通过对比可以看到，PWA拥有更少的开发成本、更少的推广成本和更少的用户接入成本，同时拥有接近应用程序的能力和体验。
如果你的站点已经有了应用程序，那么可以将PWA赋能到你的Web站点上，作为用户在Web和应用程序间的过渡。
如果你要做一个应用程序，那么建议先做一个成本更低、更易推广的PWA站点。1.4 PWA的生态支持
PWA的能力依赖于浏览器的支持，那么目前浏览器对PWA的支持度如何呢？PWA的生态现状又在发生着哪些变化？Web开发者有哪些惊喜？本节将介绍这些方面。1.4.1 浏览器对PWA的支持
目前各个浏览器对PWA的支持如图1-12所示。图1-12 各浏览器对PWA的支持情况
可以看到大多数浏览器都对PWA进行了支持，开发者可以放心地开发PWA，当然，还是那句话，“渐进增强，优雅降级”。iOS 11.3也开始对PWA的核心能力进行了支持。
2019年5月，Chrome也在Windows、Mac、Linux平台中支持了添加到桌面特性。整体时间进度如图1-13所示。图1-13 各时间阶段浏览器厂商对PWA的支持情况1.4.2 PWA的生态
目前PWA的生态很繁荣，从主流的前端框架到不同系统平台的应用商店以及底层的硬件厂商都对它进行了比较好的支持。其生态体系如图1-14所示。
Chrome在72版本中，对Android平台使用了Trusted Web Activities(TWA)和Digital Asset Links(DAL)，将Web结合到了应用程序中，并支持发布到Google play商店。
2018年6月，微软也宣布PWA可以基于UWP发布到Microsoft Store中，作为应用程序使用。图1-14 PWA的生态1.5 成功案例
自PWA推出以来，世界上知名的企业基本都接入了PWA。未来会有超过50%的企业进行PWA能力的接入。下面通过几个实际接入PWA的案例数据来了解一下它给企业带来的真实影响。1.5.1 Twitter
Twitter是一家美国社交网络及微博客服务的网站，是全球互联网上访问量最大的十个网站之一。
接入PWA后：
·会话浏览量增加65%。
·推文发送量增加75%。1.5.2 HOUSING.com
HOUSING是印度知名的房产搜索网站。
接入PWA后：
·页面加载速度提升30%。
·用户转化率增加38%。1.5.3 兰蔻
兰蔻是全球知名的高端化妆品品牌。
接入PWA后：
·页面加载速度提升84%。
·用户转化率提升8%。
·移动端使用量增加53%。
·转化次数增加13%。
试读结束[说明：试读内容隐藏了图片]