《PWA入门与实践》

1,210 阅读8分钟

前言

我初接触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手册的开发者。

序言

如今,互联网大流量早已进入了移动端,国内主流互联网产品的移动端流量已经普遍超过整体流量的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月于杭州

购买地址

有需要的欢迎购买支持~~

当当 购买

京东 购买

天猫 购买