 |
-- 會員 / 註冊 --
|
 |
|
|
|
PWA實戰：面向下一代的Progressive Web APP ( 簡體 字) |
| 作者：鄭豐彧 | 類別：1. -> 程式設計 -> 綜合 |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 49281
詢問書籍請說出此書號！【缺書】
NT售價： 345 元 |
| 出版日：6/1/2018 |
| 頁數：196 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121341946 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：序
對于包括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 Sebarte、David Krief、Devang Paliwal、Evan Wallace、Goran Ore、Kamal Raj、Keith Donaldson、Ken W. Alger、Kim Lok?y、Laura Steadman、Michal Paszkiewicz 和 Ron Chloupek 。
最后，我要感謝購買本書的讀者！我衷心地希望你們能夠享受閱讀的過程，正如我享受編寫本書的過程。
1 英國的一種早餐。—譯者注
關于本書
本書旨在幫助你使用 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 的許多重要功能，建議閱讀所有章節。
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（1719—1771）被稱為“喬治三世的地理學家”。
Thomas Jefferys 是當時有名的英語地圖繪制專家，他為政府和其他官方機構雕刻和印刷地圖，并且出版了許多商用地圖和地圖冊，其中又以北美洲地圖居多。在制作地圖的過程中，他對當地人的穿著產生了興趣。這種興趣最終催生了這套共四卷的書。
18 世紀晚期，人們對遙遠的大陸充滿了興趣，因此類似的書也變得流行起來，無論是旅行者還是足不出戶的人都可以從書中了解其他城市的風土人情。Thomas Jefferys 的書中展示了多種多樣的穿著，生動地描繪了二三百年前世界各國人民的樣子。從那以后，人們的穿著就開始發生變化，地區和國家帶來的多樣性逐漸消失。
現在已經很難在不同大陸的人們身上看到不同點了。往好的方面看，我們犧牲了文化和視覺多樣性，換來了豐富多彩的個人生活—或許是說豐富多彩并且非常有趣的思想和科技生活。
在這個計算機圖書高度同質化的時代，Manning 希望通過 Thomas Jeffreys 的圖片中豐富多樣的生活來表現計算機能帶來的創造性和積極性。
“詩”一樣的技術：
我們追求有品味的代碼、優雅深邃的思想、輕靈并蓄的方案、清新文藝的態度！
夢想的“遠方”：
相互扶持和兄弟姐妹們一起走向遠方，成人之美、相互欣賞、切磋技藝、煉成大牛！
使命：
快樂前端釋放創新能力！
叫獸、科海、俊鑫、衍良、必隆參與本書審校。
讀者服務 |
內容簡介：Progressive Web App（PWA）是由谷歌提出的一整套技術解決方案，它致力于為 Web 提供出色的用戶體驗，并完美體現了漸進增強原則。作為為數不多的實戰入門用書，《PWA 實戰：面向下一代的Progressive Web App》旨在通過大量清晰示例來介紹 PWA 的主要特性。全書一共由五個部分組成：第一部分介紹 PWA 的概念及解鎖 PWA 應用的關鍵—Service Worker，第二部分介紹如何構建響應速度更快的 Web 應用，第三部分介紹如何構建更吸引人的 Web 應用，第四部分介紹如何構建應對各種復雜網絡的 Web 應用，第五部分介紹 PWA 的發展前景。本書適合Web 開發人員及前端技術愛好者閱讀，稍有 HTML、CSS 和JavaScript 基礎學習效果更佳。 |
目錄：序............XIV
前言.............XV
致謝............XVI
關于本書............XVII
第１部分 定義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
第２部分 更快的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
第３部分 吸引人的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
第４部分 有彈性的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
第５部分 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 |
| 序： |
|
