具体描述
Progressive Web App(PWA)是由谷歌提出的一整套技术解决方案,它致力于为 Web 提供出色的用户体验,并完美体现了渐进增强原则。作为为数不多的实战入门用书,《PWA 实战:面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成:第一部分介绍 PWA 的概念及解锁 PWA 应用的关键—Service Worker,第二部分介绍如何构建响应速度更快的 Web 应用,第三部分介绍如何构建更吸引人的 Web 应用,第四部分介绍如何构建应对各种复杂网络的 Web 应用,第五部分介绍 PWA 的发展前景。
《PWA实战:面向下一代的Progressive Web APP》适合Web 开发人员及前端技术爱好者阅读,稍有 HTML、CSS 和JavaScript 基础学习效果更佳。
作者简介
Dean Alan Hume 是一名作者、博主、软件开发者,同时也是谷歌开发专家。他写过很多文章,并发表过几十篇演讲,同时还是Fast ASP.NET Websites(Manning, 2013)和Building Great Startup Teams(Blurb, 2017) 的作者。他还为A Career On The Web: On the Road to Success(Smashing Magazine, 2015)一书做出了贡献。作为一名软件开发人员,他对Web 性能调优充满热情,并且经常在他的博客 deanhume.com 上撰写软件开发相关的文章。他的爱好广泛,包括冲浪、滑雪、拳击和参加三项全能运动。目前,他正在学习啤酒酿造。
目录信息
前言 XV
致谢 XVI
关于本书 XVII
第1部分 定义PWA
第1章 理解PWA 3
1.1 PWA有什么优势 3
1.2 PWA 基础 5
构建 PWA 的业务场景 6
1.3 Service Worker:PWA的关键 8
1.3.1 理解 Service Worker 9
1.3.2 Service Worker 生命周期 10
1.3.3 Service Worker 基础示例 11
1.3.4 安全考虑 13
1.4 性能洞察: Flipkart 14
1.5 总结 15
第2章 构建PWA的第一步 16
2.1 建立在现有基础之上 16
2.2 构建 PWA 的前端架构方式 18
2.2.1 应用外壳架构 18
2.2.2 性能优势 21
2.2.3 应用外壳架构实战 22
2.3 逐步剖析现有的 PWA 23
2.3.1 前端架构 24
2.3.2 缓存 25
2.3.3 离线浏览 26
2.3.4 观感 27
2.3.5 最终产品 27
2.4 总结 28
第2部分 更快的Web应用
第3章 缓存 31
3.1 HTTP 缓存基础 31
3.2 Service Worker 缓存基础 34
3.2.1 在 Service Worker 安装过程中预缓存 34
3.2.2 拦截并缓存 38
3.2.3 整合所有代码 42
3.3 缓存前后的性能比对 45
3.4 深入 Service Worker缓存 46
3.4.1 对文件进行版本控制 46
3.4.2 处理额外的查询参数 48
3.4.3 需要多少内存 48
3.4.4 将缓存提升到一个新的高度:Workbox 49
3.5 总结 51
第4章 拦截网络请求 52
4.1 Fetch API 52
4.2 fetch 事件 55
Service Worker 生命周期 56
4.3 fetch实战 58
4.3.1 使用WebP 图片的示例 58
4.3.2 使用 Save-Data 请求头的示例 61
4.4 总结 65
第3部分 吸引人的Web应用
第5章 观感 69
5.1 Web 应用清单 69
5.2 添加到主屏幕 71
5.2.1 定制图标 74
5.2.2 添加启动页面 75
5.2.3 设置启动样式和 URL 76
5.3 添加到主屏幕的高级用法 77
5.3.1 取消提示 78
5.3.2 判断使用情况 78
5.3.3 推迟提示 79
5.4 调试清单文件 81
5.5 总结 82
第6章 推送通知 84
6.1 与用户互动 84
6.2 参与度洞见:Weather Channel 86
6.3 浏览器支持 87
6.4 第一个推送通知 88
6.4.1 订阅通知 89
6.4.2 发送通知 92
6.4.3 接收通知并与之互动 93
6.4.4 取消订阅 97
6.5 第三方推送通知 98
6.6 总结 99
第4部分 有弹性的Web应用
第7章 离线浏览 103
7.1 解锁缓存 103
7.2 提供离线文件 104
7.3 几个需要注意的问题 109
7.4 缓存是非永久性的 110
7.5 离线用户体验 110
7.6 跟踪离线使用情况 113
7.7 总结 114
第8章 构建更富弹性的应用 116
8.1 现代网站所面临的网络问题 116
理解 lie-fi 和单点故障 117
8.2 Service Worker的营救 119
8.3 使用 Workbox 123
8.4 总结 125
第9章 保持数据同步 126
9.1 理解后台同步 126
9.1.1 准备开始 127
9.1.2 Service Worker 130
9.1.3 提供备用方案 132
9.1.4 测试 134
9.2 通知用户 134
9.3 定期同步 137
9.4 总结 138
第5部分 PWA的未来
第10章 流式数据 141
10.1 理解 Web Stream 141
10.1.1 Web Stream 有什么优势 142
10.1.2 可读流 143
10.2 基础示例 144
10.3 页面渲染加速 146
10.4 Web Stream API的未来 151
10.5 总结 152
第11章 PWA故障排除 153
11.1 添加到主屏幕 153
11.1.1 如何得知网站上有多少用户使用了添加到主屏幕功能 .153
11.1.2 添加到主屏幕操作栏对我来说没有任何意义,如何禁用或隐藏 154
11.1.3 求助,我的添加到主屏幕(A2HS)功能没效果 155
11.1.4 如果用户安装了我的Web 应用到他们的主屏幕上,但他们又清除了Chrome 的缓存,那么我的网站缓存的资源也会被清除吗 155
11.1.5 我不确定manifest.json 文件是否正常工作,那么该如何进行测试 155
11.2 缓存 156
11.2.1 我在Service Worker 文件中使用代码将资源添加到缓存中,但是当我更改文件时,缓存并没有更新,而且即使刷新了
页面,看到的仍是旧版本的文件,这是为什么 157
11.2.2 如何对 Service Worker 代码进行单元测试 158
11.2.3 PWA 可以使用用户设备上的多少内存 158
11.2.4 缓存的资源似乎每隔一段时间就会过期,如何确保它们永久性地缓存呢 158
11.2.5 如何处理查询字符串和缓存 159
11.3 调试 Service Worker 的具体问题 159
11.3.1 Service Worker 文件多久更新一次 160
11.3.2 Service Worker 文件出错,但我不知道出错的原因,那么如何调试它 160
11.3.3 求助,我做了各种尝试,但由于一些令人抓狂的原因,我的Service Worker 逻辑似乎从未执行 161
11.3.4 我已经在Service Worker 文件中添加代码来处理推送通知,但是如何在不写服务端代码的情况下进行快速测试呢 .162
11.3.5 我已经构建了离线 Web 应用,但是现在无法得知用户是如何使用的,那么如何追踪用户的使用情况呢 162
11.4 总结 163
第12章 前程似锦 164
12.1 引言 164
12.2 Web蓝牙 165
12.3 Web分享API 166
12.4 支付请求API 169
12.5 硬件访问 172
12.6 硬件:形状检测API 172
12.7 接下来呢 173
12.8 总结 174
· · · · · · (收起)
读后感
用户评价
我抱着极大的热情开始啃这本书,主要关注点放在它对离线体验和性能优化的具体策略上。坦白说,我对市面上很多宣扬“革命性技术”的书籍都有点免疫了,因为它们往往停留在理论介绍和API罗列的层面,真正指导你如何解决生产环境中遇到的棘手问题时就力不从心了。这本书的叙事方式似乎更侧重于“问题-解决方案”的链条。比如,它是否详细剖析了Service Worker缓存策略在不同网络条件下的细微差别?那些缓存失效和更新的边界情况,是如何通过实战经验来规避“白屏”或“数据不同步”的?我希望看到的不是简单地复制粘贴官方文档的示例代码,而是作者团队在真实项目踩坑后总结出的那种“血泪经验”,比如如何处理首次加载与后续后台更新之间的用户体验权衡。如果这本书能在这些高难度场景下提供清晰、可复现的解决方案,那它的价值就远超一本普通的教材了,简直是资深前端工程师的“故障排除手册”。
这本书的装帧设计确实挺用心的,封面那种磨砂质感拿在手里很有分量,拿去咖啡馆或者通勤路上翻阅,感觉挺体面的。光是看着书脊上的标题“PWA实战”,就让人对内容充满期待。内页的纸张选择也很讲究,不是那种廉价的泛黄纸张,文字排版清晰度很高,阅读起来眼睛不太容易疲劳,这一点对于需要长时间钻研技术的读者来说,绝对是个加分项。装帧的精良往往暗示着出版方对内容质量的重视,希望里面的实战案例也能像外表一样扎实可靠。我特别留意了一下目录结构,看起来逻辑性很强,从基础概念的梳理到高级特性的深入探讨,层次分明,没有那种为了凑字数而堆砌的冗余章节。如果内容真的能跟得上这高水准的印刷和设计,那它绝对能成为桌面上的常青树,随时可以拿起来查阅关键点,而不是读完一遍就束之高阁的工具书。期待里面的代码示例能保持最新的技术栈,这样才能真正体现“实战”的价值。
作为一个已经接触过前端多年、对Web技术栈有深刻理解的人,我更关心的是这本书对前沿标准的把握程度以及它所倡导的开发范式是否具有前瞻性。我特别想知道它是否深入探讨了诸如WebAssembly在PWA中的潜在应用,或者如何利用最新的WebGPU API来提升复杂应用的图形渲染性能。如果这本书的案例代码和技术选型还停留在几年前的主流方案(比如Service Worker的基础缓存模式),那么对于我们这种需要紧跟技术前沿的开发者来说,它的时效性就会大打折扣。我希望看到的是关于“未来PWA”的思考,比如如何构建真正意义上的模块化、可升级的PWA体验,以及在服务端渲染(SSR/SSG)与PWA能力结合时的最佳实践。这本书的内容厚度必须能支撑起一次从零到一的、面向未来的大型项目构建,而不是仅仅优化一个简单的博客网站。
从一个纯粹的架构师视角来看,这本书的价值在于它是否能够提供一套完整的、可落地的PWA演进路线图。现在的技术迭代速度太快了,很多项目在技术选型阶段就容易迷失方向:是走纯Native路线,还是以PWA为核心构建跨平台体验?这本书如果能对这两种路径的成本、收益进行量化对比,并基于不同的业务场景给出明确的建议,那就太棒了。我尤其关注它对“原生应用功能”的模拟和替代方案的讨论,比如如何利用Web Share API、Credential Management API来弥补与原生App在系统级集成上的差距。如果它只是停留在Manifest文件和Add to Home Screen的层面,那它就只是一本入门指南。真正有深度的是,它如何指导团队管理PWA的生命周期、如何集成到现有的CI/CD流程中,以及如何衡量PWA带来的业务指标(如转化率、用户留存)的实际提升。这本书的深度需要达到能够支撑技术决策的高度。
这本书的语言风格对我来说是个不小的挑战,我个人偏爱那种非常严谨、学术性强、逻辑链条无可挑剔的叙述方式,类似于RFC文档的风格。我试着去理解这本书的叙述节奏,发现它似乎更倾向于用一种非常平易近人的口吻来引导读者,甚至加入了许多个人的观察和行业轶事,这对于某些追求纯粹技术灌输的读者来说,可能会觉得稍微有点“水”。当然,这种风格的好处是降低了新手的学习门槛,让复杂的概念不再那么高高在上。但我的疑虑在于,这种过于口语化的表达,会不会在解释一些底层机制(比如浏览器线程模型与Service Worker的交互机制)时,为了追求流畅性而牺牲了关键的技术精确度?我期望的是,即便是轻松的叙述,核心的技术点也必须滴水不漏,不能有任何歧义。阅读体验上,我更看重的是概念的精确定义和技术细节的无懈可击。
虽然书很簿,但前面也很啰嗦。最大的优点就是,没有省略那些多次重复出现的代码,读的时候不用往前翻
2019-07-23
service worker 是 PWA 的基础,搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存,manifest 做添加主屏幕,App Shell 做体验,push + nocaftion 做推送
说得太简单了,作为入门了解还行。
还行吧,sw,stream,推送,sync,几种技术,写起来挺麻烦的;甚至觉得有点低级;还需要用上全站的缓存破坏技术;我倒是觉得是回去用来构造app