新書推薦:
《
道德经新注 81幅作者亲绘哲理中国画,图文解读道德经
》
售價:HK$
143.4
《
清俗纪闻
》
售價:HK$
98.6
《
镜中的星期天
》
售價:HK$
76.2
《
世界前沿技术发展报告2024
》
售價:HK$
188.2
《
可转债——新手理财的极简工具
》
售價:HK$
65.0
《
新加坡教育:神话与现实
》
售價:HK$
96.3
《
“口袋中的世界史”第一辑·冷战中的危机事件
》
售價:HK$
291.2
《
绝美的奥伦堡蕾丝披肩编织
》
售價:HK$
177.0
編輯推薦:
网站可以离线工作,近乎瞬时的加载速度,在各种带宽条件下平滑切换不使用 PWA 的话,这一切都只是幻想。PWA 使用诸如推送通知、智能缓存和 Service Workers 这样的现代浏览器功能来管理数据、减少服务端使用、适应不稳定链接,并让你拥有更多控制权利以取悦客户。更棒的是,构建 PWA 只需要 JavaScript、HTML 和 本书中所能学到的易于掌握的技术。
通过本书,可以学习到 PWA 的设计,以及用来构建快速、可靠网站的技术。使用 PWA 技术的方式有很多种,本书的实战教程提供了有趣的独
內容簡介:
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 上撰写软件开发相关的文章。他的爱好广泛,包括冲浪、滑雪、拳击和参加三项全能运动。目前,他正在学习啤酒酿造。
目錄 :
序 XIV
前言 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
內容試閱 :
序
对于包括Twitter 和福布斯在内的许多国际品牌来说,PWA 现在已经成为提供现代移动 Web 体验的默认方式。PWA 可以提供类似原生应用所能实现的快速、吸引人的体验,并将其带到移动Web 世界被所有人发现和访问。
通过使用推送通知和添加到主屏幕等功能,用户可以重新与 PWA 进行互动,像兰蔻自2016 年10 月推出 PWA 以来,同比收入增长了16%。对于重复访问,PWA 还支持即时和离线加载体验,即使在网络连接不稳定的情况下也可以提高生产力。
Dean Alan Hume 的这本书精彩绝伦,它采用实战为主、示例驱动的方式学习如何通过PWA 构建快速响应且吸引人的网站。你将会发现每个 PWA 功能都呈现在一个清晰、独立的部分当中,它突出了为什么这个功能能够为用户提供价值、如何使用它,以及从现实世界的 PWA 中所学到的最佳实践。
作为 PWA 的早期使用者,Dean Alan Hume 掌握了一些非常重要的技巧和诀窍,并可以让移动网站有效地使用这些新功能。我很高兴能为大家推荐此书,并希望它可以帮助你释放在移动设备上提供出色用户体验的潜力。
Addy Osmani,谷歌PWA 项目技术经理
前言
我有幸成为一名 Web 开发人员已经将近15 年了。自从我开始从事 Web 开发以来,Web 已经发生了翻天覆地的变化,年复一年,它一直在让自己变得更好。
大约5 年前,我坐在会议厅中聆听谷歌的 Alex Russell 讨论 Service Worker 以及它们是如何成为 Web 的颠覆者的。在场的许多观众(包括我)都对这个新颖的特性以及它将带给 Web 的好处缺少信心。但是,他的话已成真,Service Worker 和现在的 PWA(Progressive Web App)确确实实就在我们身边,并且不断地使Web 更加完美。
我还记得自己第一次尝试 PWA 的情景。起初,事情似乎有些复杂,但随着我写出了第一个可以运行的 Service Worker 时,一切都走向了正轨。在那个顿悟的瞬间,我意识到这些功能有多么强大。从那以后,我便迷上了 PWA 。
我对 Web 性能充满热情,并且乐于制作速度快的网页以取悦用户。为此,多年以前,我与Manning 出版社合作,写了一本关于Web 性能和ASP.NET 网站的书。(谁知道这本书?)对我个人而言,PWA 最棒的一点就是它能帮助你构建快速、富有弹性、吸引人的Web 应用,从而取悦用户。当你读完本书的时候,我衷心地希望你也能同样拥有那个顿悟的时刻,以及像我一样对PWA 充满热情。
致谢
首先,我要感谢我的好妻子 Emily 在我编写本书时给予我的所有鼓励。我喜欢她的想法,重视她的意见。我经常带着疯狂、轻率的想法奔向她,她却总是耐心地倾听一切。
编写本书真的是一次非常愉快的体验,我要特别感谢 Jennifer Stout 给予我的所有帮助。在编辑的过程中,Jennifer Stout 的超级冷静使得一切都变得简单,也十分有趣。我们就像是写作领域中的汉 索罗和楚巴卡(我是楚巴卡)。这是我们共同合作的第三本书,希望将来我们还会合著更多的书。
如果没有 Marius Butuc 的帮助,本书中很多技术方面的问题都将无法解决。感谢Marius 的真知灼见、技术指导,以及各种好建议,看到他和我一样因这本书而激动,真是太欣慰了。
一如既往,我还要特别感谢我的兄弟 Robin Osborne 。如果没有他的鼓励,清晨的早餐和灵感就不一样了。请给我两个 Huevos al Benny1 !
我也非常感谢帮助完善和改进本书的所有技术审校者Addy Osmani、JakeArchibald 和 Patrick Haman,感谢他们的帮助,他们提供了反馈意见,给出了想法,简直太棒了。还要感谢本书技术校对 Alexey Galiullin 和所有审校者,他们是 Al Pezewski、Birnou Sbarte、David Krief、Devang Paliwal、Evan Wallace、Goran Ore、Kamal Raj、Keith Donaldson、Ken W. Alger、Kim Loky、Laura Steadman、Michal Paszkiewicz 和 Ron Chloupek 。
最后,我要感谢购买本书的读者!我衷心地希望你们能够享受阅读的过程,正如我享受编写本书的过程。
关于本书
本书旨在帮助你使用 PWA 超酷的功能来构建快速、吸引人和富有弹性的 Web应用。本书首先重点介绍 PWA 的基础知识,然后深入讨论其核心功能,并演示如何在你自己的网站上实现它们。在各个章节中,本书将剖析世界各地一些大型组织所建立的现有 PWA,并探讨可用于改进自己的 PWA 的不同技巧和窍门。
PWA 是为那些希望将 Web 开发提升到更高层次的 Web 开发人员量身打造的。无论是初学者,还是经验老道的 Web 开发者,都将会了解到 PWA 的全貌及如何使用 PWA 的功能来增强他们的网站。尽管网上已经有大量关于PWA 的文章和文档,但是本书将所有内容以清晰易懂的形式融汇到一起,这将有益于任何想深入了解 PWA 的人。在阅读本书的各个章节时,具有一定的 Web 开发基础将会有所帮助,但总体来说,并不需要你是一名专家。在本书的引导下,你首先会拥有一个基础的Web 应用,然后慢慢在上面添加 PWA 的新功能。
本书的组织结构
本书共12 章,分为五大部分。
第1 部分首先从基础入手,说明了关于 PWA 基础你所需要了解的一切。
第1 章讨论了 PWA,并从业务案例入手,解释了为什么 PWA 对于现代 Web开发者来说如此重要。该章还介绍了 Service Worker,它在创建 PWA 的过程中发挥了关键作用。
第2 章介绍了构建 PWA 的第一步,并讨论了构建 PWA 时可以使用的不同架构方式。该章还逐步剖析了一个现有的 PWA,并展示了世界各地的组织如何开始从 PWA 的功能中获益。
第2 部分介绍如何使用 Service Worker 的能力来构建快速的 Web 应用。
第3 章介绍了 Service Worker 缓存的基础,然后介绍了 Web 中一些更高级的缓存用例。
第4 章探讨了 Fetch API 并解释了如何使用它来提升 PWA 的加载速度。该章还介绍了两种巧妙方法,使用 WebP 格式的图片和 Save-Data 请求头来使网页瘦身。
第3 部分介绍的功能有助于你创建吸引人的 PWA 。
第5 章介绍了如何使用 Web 应用清单文件来构建迷人的 PWA。该章还介绍了添加到主屏幕功能,并讲述一些更高级的技术,以便充分利用此功能。
第6 章介绍了什么是推送通知,以及如何使用它来真正地与用户进行互动。该章通过示例逐步演示如何实现自己的推送通知。
第4 部分介绍的技术可以用来构建富有弹性的 PWA。
第7 章介绍了离线浏览并解释了如何在浏览器中解锁缓存以开始构建真正的离线应用。
第8 章讨论了如何构建 PWA,以应对用户网络连接出现问题的情况。你将从该章学习到构建富有弹性的 Web 应用的最佳实践,以应对较差或不可靠的网络连接。
第9 章介绍了构建离线 Web 应用的技术,它可以确保当应用重新连接到网络时能够同步数据。该章还介绍了名为后台同步的API,并演示了如何使用这项强大的功能来构建 PWA 。
第5 部分介绍了 PWA 的未来,以及目前可供开发人员使用的许多超棒的新功能。
第10 章介绍了Web Stream API,并解释了它为什么如此强大。该章还演示了如何使用此 API 来加快页面的加载速度。
第11 章总结了一些经常被问到的问题,并试图尽可能清楚、彻底地解答它们。
第12章(也是最后一章)探讨了 PWA 的未来以及一些正在开发或正在进行试验的新 API 。
通常,对 PWA 完全陌生的开发者应该阅读前两章,以了解 PWA 的内部工作原理以及如何正确地设置开发环境。在本书的开头你将创建一个示例应用,然后每章都在其基础上进行构建。也就是说,阅读本书的过程中,你可以在不同的章节之间进行切换,并挑选你感兴趣的主题进行阅读。但是为了全面了解 PWA 的许多重要功能,建议阅读所有章节。
代码
本书所有带有标号的代码清单都可以从 www.manning.combooksprogressivewebapps 进行下载,代码同样也可以在 GitHub 上找到: https:github.comdeanhumeprogressiveweb-apps-book 。
作者
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 上撰写软件开发相关的文章。他的爱好广泛,包括冲浪、滑雪、拳击和参加三项全能运动。目前,他正在学习啤酒酿造。
封面图片
本书的封面图片名为埃塞俄比亚人的习惯(1581)。这张图片取自 Thomas Jefferys 的《从古至今不同国家穿着大全(共四卷)》(在1757 年到1772 年之间于伦敦出版)。从读书扉页可以看出,书中的内容都是手工上色的铜板雕刻,使用阿拉伯胶黏合而成。Thomas Jefferys(17191771)被称为乔治三世的地理学家。
Thomas Jefferys 是当时有名的英语地图绘制专家,他为政府和其他官方机构雕刻和印刷地图,并且出版了许多商用地图和地图册,其中又以北美洲地图居多。在制作地图的过程中,他对当地人的穿着产生了兴趣。这种兴趣最终催生了这套共四卷的书。
18 世纪晚期,人们对遥远的大陆充满了兴趣,因此类似的书也变得流行起来,无论是旅行者还是足不出户的人都可以从书中了解其他城市的风土人情。Thomas Jefferys 的书中展示了多种多样的穿着,生动地描绘了二三百年前世界各国人民的样子。从那以后,人们的穿着就开始发生变化,地区和国家带来的多样性逐渐消失。
现在已经很难在不同大陆的人们身上看到不同点了。往好的方面看,我们牺牲了文化和视觉多样性,换来了丰富多彩的个人生活或许是说丰富多彩并且非常有趣的思想和科技生活。
在这个计算机图书高度同质化的时代,Manning 希望通过 Thomas Jeffreys 的图片中丰富多样的生活来表现计算机能带来的创造性和积极性。
审校者介绍
NewBee 团队是Alibaba-Group 文化娱乐集团旗下UC 事业群的多元化技术团队(我们的网址:https:plus.ucweb.comnewbee)。
诗一样的技术:
我们追求有品味的代码、优雅深邃的思想、轻灵并蓄的方案、清新文艺的态度!
梦想的远方:
相互扶持和兄弟姐妹们一起走向远方,成人之美、相互欣赏、切磋技艺、炼成大牛!
使命:
快乐前端释放创新能力!
叫兽、科海、俊鑫、衍良、必隆参与本书审校。
读者服务
轻松注册成为博文视点社区用户(www.broadview.com.cn),扫码直达本书页面。
提交勘误:你对书中内容的修改意见可在提交勘误处提交,若被采纳,将获赠博文视点社区积分(在你购买电子书时,积分可用来抵扣相应金额)。
交流互动:在页面下方读者评论处留下你的疑问或观点,与我们和其他读者一同学习交流。
页面入口:http:www.broadview.com.cn34194__