PWA开发实战

出版者:人民邮电出版社

作者:[以] 塔勒•爱特尔

页数:220

译者:张俊达

出版时间:2019-1

价格:79.00元

装帧:平装

isbn号码:9787115502001

丛书系列:图灵程序设计丛书·Web开发系列

具体描述

本书通过实际操作帮助读者透彻地理解现代渐进式 Web 应用开发，指导读者学会利用原生应用的特性构建 Web 应用。主要内容包括：某酒店网站构建全流程，开发渐进式 Web 应用时一些需要重点考虑的因素，离线优先的 Web 应用的原则，渐进式 Web 应用为用户界面带来的一些新挑战和新机会，等等。

作者简介

塔勒•爱特尔（Tal Ater）

DAV Foundation联合创始人兼CTO，W3C汽车工作组特邀专家，拥有20多年经验的开发者、顾问和企业家。在Web开发、产品开发、安全和开源方面均有深刻见解和研究，相关著述在《福布斯》《纽约时报》和BBC等媒体上广泛传播。

目录信息

前言　　xi
第1章　渐进式Web 应用介绍　　1
1.1　Web 反击战　　2
1.2　当前的移动领域　　2
1.3　渐进式Web 应用的优势　　4
1.4　浏览器标签页、Web 和service worker　　6
第2章　你的第一个service worker　　8
2.1　设置示例项目　　8
2.2　欢迎来到哥谭帝国酒店　　9
2.3　熟悉代码　　10
2.4　当前的离线体验　　11
2.5　创建你的第一个service worker　　13
2.6　什么是渐进增强　　16
2.7　HTTPS 和service worker　　16
2.8　从Web 获取内容　　17
2.9　捕获离线请求　　18
2.10　创建HTML 响应　　19
2.11　理解service worker 作用域　　21
2.12　小结　　22
第3章　CacheStorage API　　23
3.1　CacheStorage 是什么，不是什么　　24
3.2　决定何时进行缓存　　24
3.3　在CacheStorage 中存储请求　　25
3.4　从CacheStorage 中取回请求　　26
3.5　在示例应用缓存　　27
3.6　匹配每个请求的正确响应　　29
3.7　HTTP 缓存和HTTP 头　　31
3.8　小结　　31
第4章　service worker 生命周期和缓存管理　　33
4.1　service worker 生命周期　　36
4.2　service worker 的生命周期与waitUntil 的重要性　　38
4.3　更新service worker　　39
4.4　为什么需要管理缓存　　40
4.5　缓存管理与清除旧缓存　　42
4.6　重用已缓存的响应　　46
4.7　配置服务器以提供正确的响应头部　　47
4.8　开发者工具　　48
4.8.1　控制台　　48
4.8.2　清除缓存并刷新　　48
4.8.3　检查CacheStorage 和IndexedDB　　49
4.8.4　网络节流与模拟离线情况　　49
4.8.5　Lighthouse　　50
4.9　小结　　50
第5章　拥抱离线优先　　51
5.1　什么是离线优先　　52
5.2　常用缓存模式　　53
5.3　混合与匹配：创造新模式　　55
5.4　规划缓存策略　　57
5.5　实现缓存策略　　59
5.6　App shell 架构　　68
5.7　实现App shell　　70
5.8　解锁成就　　72
5.9　小结　　73
第6章　使用IndexedDB 在本地存储数据　　74
6.1　什么是IndexedDB　　75
6.2　使用IndexedDB　　77
6.2.1　打开数据库连接　　77
6.2.2　数据库版本/ 修改对象存储　　78
6.2.3　添加数据到对象存储　　79
6.2.4　从对象存储中读取数据　　80
6.2.5　IndexedDB 版本管理　　81
6.2.6　使用游标读取对象　　82
6.2.7　创建索引　　84
6.2.8　使用索引读取数据　　85
6.2.9　限制游标的范围　　86
6.2.10　设置游标方向　　87
6.2.11　更新对象存储中的对象　　87
6.2.12　从对象存储删除对象　　88
6.2.13　从对象存储中删除所有对象　　89
6.2.14　处理冒泡IndexedDB 错误　　89
6.3　SQL 忍者的IndexedDB　　90
6.4　IndexedDB 实践　　91
6.5　promise 式的数据库　　98
6.6　IndexedDB 管理　　103
6.7　在service worker 中使用IndexedDB　　104
6.8　IndexedDB 生态系统　　105
6.8.1　PouchDB　　105
6.8.2　localForage　　106
6.8.3　Dexie.js　　106
6.8.4　IndexedDB Promised　　107
6.9　小结　　107
第7章　使用后台同步保证离线功能　　108
7.1　后台同步是如何工作的　　109
7.2　SyncManager　　111
7.2.1　访问SyncManager　　 111
7.2.2　注册事件　　112
7.2.3　sync 事件　　112
7.2.4　事件标签　　112
7.2.5　获取已注册sync 事件列表　　113
7.2.6　最后的机会　　113
7.3　传递数据给sync 事件　　114
7.3.1　在IndexedDB 中维护操作队列　　114
7.3.2　在IndexedDB 中维护请求队列　　116
7.3.3　传递数据给sync 事件标签　　118
7.4　给应用添加后台同步　　118
7.5　小结　　125
第8章　使用postMessage() 在service worker 和页面之间通信　　126
8.1　窗口向service worker 通信　　127
8.2　service worker 向所有打开的窗口通信　　128
8.3　service worker 向特定窗口通信　　130
8.4　使用MessageChannel 保持通信渠道打开　　131
8.5　窗口间的通信　　133
8.6　从sync 事件向页面传递消息　　136
8.7　小结　　137
第9章　可安装的Web 应用：占领主屏先机　　138
9.1　可安装的Web 应用　　139
9.2　浏览器如何决定何时显示应用安装横条　　140
9.3　剖析Web 应用清单　　141
9.4　各端兼容性　　145
9.5　小结　　146
第10章　推送通知　　147
10.1　推送通知的生命周期　　147
10.1.1　Notification API　　147
10.1.2　Push API　　148
10.1.3　Push+Notification　　150
10.2　创建通知　　150
10.2.1　请求通知权限　　150
10.2.2　显示通知　　153
10.2.3　为哥谭帝国酒店添加通知支持　　157
10.3　为用户订阅推送事件　　158
10.3.1　生成VAPID 公钥和私钥　　160
10.3.2　生成GCM 密钥　　161
10.3.3　创建新订阅　　162
10.3.4　为哥谭帝国酒店用户订阅推送消息　　164
10.4　从服务端发送推送事件　　166
10.5　监听推送事件并显示通知　　168
10.6　小结　　174
第11章　渐进式Web 应用的用户体验　　175
11.1　优雅与信任　　175
11.2　从service worker 传递状态　　176
11.3　使用Progressive UI KITT 通信　　178
11.4　渐进式Web 应用中的常见消息　　180
11.4.1　缓存完成　　180
11.4.2　页面已缓存　　180
11.4.3　操作失败，但会在用户恢复连接时完成　　181
11.4.4　启用通知　　181
11.5　选择正确的用词　　181
11.6　不要直奔主题　　182
11.7　渐进式Web 应用的设计　　184
11.7.1　设计应该反映条件的变化　　184
11.7.2　设计应该适应运行环境　　185
11.7.3　设计应该适应每种媒介的特殊性　　185
11.7.4　设计应该向用户注入信心并通知用户　　186
11.7.5　设计应该帮助用户和企业实现目标　　186
11.8　负责安装提示　　186
11.9　使用RAIL 测量性能并实现高性能　　187
11.10　小结　　189
第12章　渐进式Web 应用的未来　　190
12.1　使用Payment Request API 接受支付请求　　190
12.2　 使用Credential Management API 进行用户管理　　192
12.3　WebGL 实时图像处理　　193
12.4　未来的语音识别API　　194
12.5　使用WebVR 在浏览器中实现虚拟现实　　194
12.6　轻松共享应用　　195
12.7　流畅的媒体播放UI　　196
12.8　下一个伟大时代　　197
附录A　service worker：采用ES2015 的大好时机　　198
附录B　全页间隙式广告　　201
附录C　CORS 与NO-CORS　　202
关于作者　　204
关于封面　　204
· · · · · · (收起)

用户评价

老实说，刚拿到这本书的时候，我还有点担心它会不会又是那种只停留在理论层面、缺乏落地指导的“样板书”。然而，翻开目录后，我的疑虑立刻烟消云散了。这本书的重点显然放在了“实战”二字上，它并没有浪费篇幅去重复那些在官方文档中唾手可得的基础知识，而是直接切入到了构建高性能、高可靠性PWA所必须掌握的核心技术栈。例如，它对于Web Push通知机制的讲解，不仅涵盖了实现步骤，还深入探讨了权限管理和用户交互设计的微妙平衡，这在很多同类书籍中是很少见到的深度。此外，书中对应用包（Manifest）的配置讲解细致入微，每一个字段的含义、对不同平台适配性的影响，都有详尽的图文对照说明。对于那些希望将现有Web应用迁移到PWA环境中的团队来说，书中提供的性能基准测试和调试技巧无疑是宝贵的财富，它提供的不是一份简单的清单，而是一套完整的质量保障流程。

这本书的编排逻辑有一种浑然天成的流畅感，它似乎精确地把握住了开发者在学习新技术时从困惑到豁然开朗的心理曲线。它并没有采用传统的“章节递进”模式，而是以“解决一个具体问题”为导向来组织内容的。比如，它会先抛出一个常见的离线访问难题，然后自然而然地引出IndexedDB的异步操作，接着再过渡到后台同步的复杂性，这样学习过程就非常自然，知识点之间的关联性也变得非常紧密。其中关于安全性的讨论部分，尤其让我印象深刻，它不仅提到了HTTPS的必要性，更深入地剖析了跨域资源共享（CORS）在PWA生态中的安全边界问题，这在强调快速交付的开发环境中，是非常重要的警示。这本书的语言风格很接地气，没有过多矫饰，就是那种资深工程师之间交流经验的坦率和务实，让人感到非常亲切，仿佛在跟一位真正经历过无数坑的同行交流心得。

作为一个对前沿技术保持好奇心的资深前端，我最看重的是技术书籍能否带来“视野的拓展”，而不仅仅是“技能的堆砌”。这本书在这方面做得极其出色。它对现代浏览器API的整合能力有着深刻的洞察力，特别是对于WebAssembly（Wasm）与PWA组件的集成场景探讨，虽然篇幅不多，但角度非常新颖，预示了未来应用形态的可能性。更值得称道的是，它没有把PWA视为一个孤立的技术栈，而是将其置于整个移动互联网生态中进行考量，对如何利用PWA特性绕过应用商店的限制，实现更灵活的分发策略，也有独到的见解。书中对诊断工具的使用指南也十分详尽，它教导读者如何利用Chrome DevTools中的特定面板，去精确地定位那些难以察觉的性能瓶颈，这种“授人以渔”的方法论，比单纯提供解决方案要高明得多，真正培养了读者的独立分析能力。

这本书的讲解风格实在太引人入胜了，它不像某些技术书籍那样，上来就堆砌晦涩难懂的术语和复杂的理论框架。相反，作者似乎非常懂得如何引导一个技术新手，或者是一个希望快速进入实战领域的开发者。书中对Web技术的演进和PWA作为下一代应用形态的必要性进行了非常清晰的梳理，读起来毫不费力，仿佛身边有一位经验丰富的导师在手把手地教你。尤其是在介绍Service Worker的生命周期和缓存策略时，作者没有停留在API的罗列上，而是通过几个精心设计的实际案例，将异步操作和离线体验的优化逻辑阐释得淋漓尽致。那些关于用户体验指标（如LCP、FID）的讨论，也都是紧密结合代码实现去阐述的，这让理论和实践之间架起了一座坚实的桥梁。我特别欣赏其中关于渐进式增强的设计哲学，它强调了无论用户的基础设施如何，应用都应该提供一个可用、可靠的基础体验，然后再逐步增强，这种以用户为中心的设计理念贯穿始终，非常具有指导意义。

这本书最打动我的一点，在于它对“持续交付”和“维护性”的重视程度。在许多快速成长的项目中，应用首次上线是容易的，但后续的迭代和版本的控制才是真正的挑战。这本书非常前瞻性地引入了版本控制策略在Service Worker管理中的应用，清晰地解释了如何安全地部署新的缓存清单，避免因缓存更新不当导致用户无法加载最新代码的灾难性后果。此外，对于构建工具链的配置讲解也相当务实，它并未固守某一家工具的生态，而是展示了如何灵活地集成各种流行的打包器，以适应不同团队的技术栈偏好。这种开放而包容的架构思路，使得书中的知识体系能够长久地保持活力，不会因为某一个工具的过时而被束之高阁。阅读完后，我感觉自己不仅学会了如何构建一个PWA，更重要的是，学会了如何以一种面向未来的、可持续的方式去运营和维护它。

service worker 是 PWA 的基础，搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存，manifest 做添加主屏幕，App Shell 做体验，push + notificaftion 做推送

service worker 是 PWA 的基础，搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存，manifest 做添加主屏幕，App Shell 做体验，push + notificaftion 做推送

service worker 是 PWA 的基础，搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存，manifest 做添加主屏幕，App Shell 做体验，push + notificaftion 做推送

service worker 是 PWA 的基础，搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存，manifest 做添加主屏幕，App Shell 做体验，push + notificaftion 做推送

service worker 是 PWA 的基础，搞懂了它就学会了一大半。剩下的就是 cacheStorage API 做缓存，manifest 做添加主屏幕，App Shell 做体验，push + notificaftion 做推送