用PWA構(gòu)建一個(gè)完全離線的網(wǎng)站

時(shí)間：2023-07-03 15:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 15:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

用PWA構(gòu)建一個(gè)完全離線的網(wǎng)站：想象一下，你有能力去構(gòu)建一個(gè)完全離線的網(wǎng)站，為用戶提供幾乎瞬間加載的體驗(yàn)，同時(shí)它對(duì)于不可靠的網(wǎng)絡(luò)又是安全及富有彈性的。這聽(tīng)起來(lái)既不可能，又不可思議。無(wú)論你是否相信，絕大部分現(xiàn)代瀏覽器都已經(jīng)內(nèi)置提供了這些功能，只需要釋放它們。當(dāng)你利用這些強(qiáng)大的功能構(gòu)建網(wǎng)站時(shí)，你便已經(jīng)擁有了所謂的 PWA（Progressive Web App）。

PWA有什么優(yōu)勢(shì)

回溯到 1990 年的圣誕節(jié)，Tim Berners-Lee 爵士和他在 CERN 的團(tuán)隊(duì)創(chuàng)建了使Web 正常工作所需的所有工具。他們創(chuàng)建了 HTTP、HTML 和 WorldWideWeb（全世界第一個(gè)網(wǎng)頁(yè)瀏覽器）。WorldWideWeb 只能運(yùn)行具有超鏈接的簡(jiǎn)單純文本組成的網(wǎng)頁(yè)。事實(shí)上，這些第一代的網(wǎng)頁(yè)仍然在線，并且可以瀏覽。

從幾十年前回到現(xiàn)在，我們所瀏覽的網(wǎng)頁(yè)并沒(méi)有變化。當(dāng)然，現(xiàn)在我們有了像CSS 和JavaScript 這樣的功能，但網(wǎng)頁(yè)的核心依舊是使用 HTML、HTTP 以及其他一些模塊來(lái)構(gòu)建，這些都是 Berners-Lee 和他的團(tuán)隊(duì)在多年前所創(chuàng)建的。這些輝煌的構(gòu)建模塊意味著 Web 已經(jīng)能夠以驚人的速度增長(zhǎng)。然而，我們用來(lái)訪問(wèn)網(wǎng)頁(yè)的設(shè)備數(shù)量也在不斷增長(zhǎng)。無(wú)論你的用戶是在旅途中還是坐在書(shū)桌前，他們都無(wú)時(shí)無(wú)刻不在獲取信息。我們對(duì)于 Web 的期望從未如此之高。

雖然移動(dòng)設(shè)備變得愈發(fā)強(qiáng)大，但移動(dòng)網(wǎng)絡(luò)并不是總能滿足需求。如果你使用智能能手機(jī)，你就會(huì)知道移動(dòng)連接有多么脆弱。2G、3G 或 4G 本身都很不錯(cuò)，但是它們時(shí)常會(huì)無(wú)法連接，或者網(wǎng)速變得很差。如果你的業(yè)務(wù)是與 Web 相關(guān)的，這就是你需要解決的問(wèn)題。

從歷史上來(lái)說(shuō)，原生應(yīng)用 ( 安裝到手機(jī)上的 ) 已經(jīng)能夠提供更好的整體用戶體驗(yàn)，下載完應(yīng)用，它便可以立即加載。即使沒(méi)有網(wǎng)絡(luò)連接，也并非是完全不可用的，因?yàn)樵O(shè)備上已經(jīng)存儲(chǔ)了供客戶使用的絕大部分資源。原生應(yīng)用提供有彈性、吸引人的體驗(yàn)的能力使得它的數(shù)量已經(jīng)呈爆炸式增長(zhǎng)。目前，在蘋(píng)果和谷歌的應(yīng)用商店中，已經(jīng)有超過(guò) 400 萬(wàn)個(gè)原生應(yīng)用。

同樣從歷史上來(lái)說(shuō)，Web 無(wú)法提供原生應(yīng)用所具備的這些強(qiáng)大功能，比如離線能力、瞬時(shí)加載和更高的可靠性。這也正是 PWA 成為 Web 顛覆者的契機(jī)。主要的瀏覽器廠商一直在努力改進(jìn)構(gòu)建 Web 的方式， 并創(chuàng)建了一組新功能以使 Web 開(kāi)發(fā)者能夠創(chuàng)建快速、可靠和吸引人的網(wǎng)站。PWA 應(yīng)該具備以下特點(diǎn) ：

• 響應(yīng)式
• 獨(dú)立于網(wǎng)絡(luò)連接
• 類(lèi)似原生應(yīng)用的交互體驗(yàn)
• 始終保持更新
• 安全
• 可發(fā)現(xiàn)
• 可重連
• 可安裝

這是 Web 開(kāi)發(fā)者構(gòu)建網(wǎng)站傳統(tǒng)方式的一種轉(zhuǎn)變。這意味著我們可以開(kāi)始構(gòu)建能應(yīng)對(duì)不斷變化的網(wǎng)絡(luò)狀況或無(wú)網(wǎng)絡(luò)連接的網(wǎng)站。這還意味著我們可以建立更吸引人的網(wǎng)站來(lái)為用戶提供一流的瀏覽體驗(yàn)。

讀到這里，你可能會(huì)想，這太瘋狂了。那些不支持這些新功能的老瀏覽器怎么辦？ PWA 最棒的一點(diǎn)就是它真的是漸進(jìn)式的。如果你構(gòu)建一個(gè) PWA，即使在一個(gè)不支持的老舊瀏覽器上運(yùn)行，它仍然可以作為一個(gè)普通的網(wǎng)站來(lái)運(yùn)行。驅(qū)動(dòng) PWA的技術(shù)就是這樣設(shè)計(jì)的，只有在支持這些新功能的瀏覽器中才會(huì)增強(qiáng)體驗(yàn)。如果用戶的設(shè)備支持這些新功能，那么他將獲得所有額外的好處和更多的改進(jìn)功能。無(wú)論怎樣，這對(duì)你和你的用戶來(lái)說(shuō)都是雙贏。

PWA基礎(chǔ)

那么 PWA 到底是由什么組成的呢？我們一直在討論它們的功能和原理，但真正使某個(gè)網(wǎng)站成為 PWA 的到底是什么呢？最簡(jiǎn)單的 PWA 其實(shí)只是普通的網(wǎng)站。普通網(wǎng)站是由 Web 開(kāi)發(fā)者所熟悉和喜歡的技術(shù)所創(chuàng)建的，即 HTML、CSS 和 JavaScript。然而， PWA 卻更進(jìn)一步，它為用戶提供了增強(qiáng)的體驗(yàn)。我非常喜歡谷歌 Chrome 團(tuán)隊(duì)的開(kāi)發(fā)人員 Alex Russell 的描述方式 ：這些應(yīng)用不通過(guò)應(yīng)用商店進(jìn)行打包和部署，它們只是汲取了所需要的原生應(yīng)用功能的網(wǎng)站而已。

PWA 會(huì)指向一個(gè)清單（manifest）文件，其中包含網(wǎng)站相關(guān)的信息，包括圖標(biāo)、背景屏幕、顏色和默認(rèn)方向。

PWA 使用了叫作 Service Worker 的重要新功能，它可以令你深入網(wǎng)絡(luò)請(qǐng)求并構(gòu)建更好的 Web 體驗(yàn)。當(dāng)你開(kāi)始用它，還可以將進(jìn)一步了解它以及它帶給瀏覽器的改進(jìn)。PWA 還允許你將其“添加”到設(shè)備的主屏幕上。它會(huì)像原生應(yīng)用那樣，通過(guò)單擊圖標(biāo)便可讓你輕松訪問(wèn)一個(gè) Web 應(yīng)用 。

PWA 還可以離線工作。使用 Service Worker，可以選擇性地緩存部分網(wǎng)站資源以提供離線體驗(yàn)。如果你現(xiàn)在在沒(méi)有網(wǎng)絡(luò)連接的情況下瀏覽網(wǎng)站，那么對(duì)于絕大多數(shù)網(wǎng)站，你所看到的屏幕應(yīng)該類(lèi)似于下圖。




用戶無(wú)須再面對(duì)恐怖的“無(wú)網(wǎng)絡(luò)連接”屏幕了。使用 Service Worker，可以攔截并緩存任何來(lái)自網(wǎng)站的網(wǎng)絡(luò)請(qǐng)求。無(wú)論是為移動(dòng)設(shè)備、桌面設(shè)備還是平板設(shè)備構(gòu)建網(wǎng)站， 都可以在有網(wǎng)絡(luò)連接或沒(méi)有網(wǎng)絡(luò)連接的情況下控制如何響應(yīng)請(qǐng)求。

PWA 不僅僅是一組非常棒的新功能，它實(shí)際上是構(gòu)建更好的網(wǎng)站的一種方式。PWA 正在迅速成為一套最佳實(shí)踐。構(gòu)建PWA 所采取的步驟將有利于訪問(wèn)你網(wǎng)站的任何人，無(wú)論他們選擇使用何種設(shè)備。

一旦你掌握了開(kāi)始構(gòu)建 PWA 所需的基本構(gòu)建模塊，很快就會(huì)發(fā)現(xiàn)，比較高級(jí)的例子并沒(méi)有看上去那么高級(jí)。一旦你熟悉了構(gòu)建 PWA 的過(guò)程，會(huì)發(fā)現(xiàn)一切都是如此的簡(jiǎn)單。

構(gòu)建PWA的業(yè)務(wù)場(chǎng)景

作為一名開(kāi)發(fā)者，我當(dāng)然知道當(dāng)一項(xiàng)新技術(shù)或一系列功能出現(xiàn)時(shí)，是多么令人興奮。但為網(wǎng)站發(fā)掘并引進(jìn)最新最好的庫(kù)或框架的強(qiáng)烈欲望往往會(huì)掩蓋其為企業(yè)帶來(lái)的價(jià)值。無(wú)論你是否相信，PWA 能為你的用戶帶來(lái)真正的價(jià)值，并使網(wǎng)站更具吸引力、更有彈性，甚至更快。

PWA 最棒的一點(diǎn)是可以漸進(jìn)增強(qiáng)現(xiàn)有的 Web 應(yīng)用。我們討論的整套技術(shù)可以應(yīng)用于任何現(xiàn)有的網(wǎng)站，甚至是你正在構(gòu)建的新 Web 應(yīng)用。無(wú)論你選擇何種技術(shù)棧來(lái)開(kāi)發(fā)網(wǎng)站，PWA 都將與你的解決方案緊密結(jié)合，因?yàn)樗皇呛?jiǎn)單地基于 HTML、CSS 和 JavaScript 。

既然你對(duì) PWA 已經(jīng)有了基本的了解，就先暫時(shí)停下腳步，想象一下用 PWA 來(lái)構(gòu)建的各種可能性。假設(shè)你的在線業(yè)務(wù)是報(bào)紙，人們通過(guò)它來(lái)了解更多當(dāng)?shù)氐男侣?。如果你知道有人?jīng)常訪問(wèn)你的網(wǎng)站并瀏覽多個(gè)頁(yè)面，為什么不提前緩存這些頁(yè)面，這樣他們就可以完全離線地瀏覽新聞？或者假設(shè)你的 Web 應(yīng)用服務(wù)于一個(gè)慈善機(jī)構(gòu)，志愿者在這個(gè)網(wǎng)絡(luò)連接不穩(wěn)定或壓根無(wú)網(wǎng)絡(luò)連接的區(qū)域進(jìn)行工作。PWA 的功能將允許你構(gòu)建一個(gè)離線應(yīng)用，使他們?cè)跊](méi)有網(wǎng)絡(luò)連接的現(xiàn)場(chǎng)也能收集信息。一旦他們回到辦公室或有網(wǎng)絡(luò)連接的區(qū)域，數(shù)據(jù)就可以同步到服務(wù)器。對(duì)于 Web 開(kāi)發(fā)者來(lái)說(shuō)，PWA 是顛覆者，并且我個(gè)人對(duì)它將帶給 Web 的功能感到興奮不已。

前文提到過(guò)可以將 PWA 添加到設(shè)備的主屏幕上。一旦添加后，它的圖標(biāo)便會(huì)出現(xiàn)在主屏幕上并可以通過(guò)單擊圖標(biāo)來(lái)訪問(wèn)你的網(wǎng)站。

2015 年，印度最大的電商網(wǎng)站 Flipkart 開(kāi)始構(gòu)建 Flipkart Lite，它是 Web 和Flipkart 原生應(yīng)用完美結(jié)合的 PWA 。如果你在瀏覽器中打開(kāi) http://flipkart.com，你會(huì)明白為什么這個(gè)網(wǎng)站是如此成功。它的用戶體驗(yàn)令人印象深刻，網(wǎng)站的速度很快，可以離線工作，并且用起來(lái)使人愉悅。通過(guò)將它的網(wǎng)站構(gòu)建成 PWA，F(xiàn)lipkart 能夠顯示ADD TO HOME SCREEN 操作欄。通過(guò) ADD TO HOME SCREEN 圖標(biāo)到達(dá)的用戶最終在網(wǎng)站上購(gòu)買(mǎi)的可能性高達(dá) 70％。




任何進(jìn)入蘋(píng)果或谷歌應(yīng)用商店的新原生應(yīng)用就像沙灘上的一粒沙。截至 2016年 6 月，每個(gè)應(yīng)用商店中始終保持將近 200 萬(wàn)個(gè)應(yīng)用。如果你開(kāi)發(fā)了一個(gè)原生應(yīng)用，那么它很容易就被應(yīng)用商店中的海量應(yīng)用所掩蓋。然而，由于 PWA 是汲取了豐富功能的網(wǎng)站，因此可以通過(guò)搜索引擎輕松發(fā)現(xiàn)它們。人們可以通過(guò)社交媒體鏈接或?yàn)g覽網(wǎng)頁(yè)發(fā)現(xiàn) PWA。構(gòu)建 PWA 可以讓你接觸比單獨(dú)使用原生應(yīng)用更多的人，因?yàn)樗鼈兪菫槿魏文軌蜻\(yùn)行瀏覽器的平臺(tái)而構(gòu)建的。

我在一家小型創(chuàng)業(yè)公司工作，我知道編寫(xiě)一個(gè)可以在多個(gè)平臺(tái) (iOS、Android和網(wǎng)站 ) 上運(yùn)行的應(yīng)用是多么昂貴。有了 PWA，你只需要一個(gè)了解 Web 語(yǔ)言的開(kāi)發(fā)團(tuán)隊(duì)即可。它使得招聘更容易，而且肯定便宜得多。這并不是說(shuō)你不應(yīng)該構(gòu)建原生應(yīng)用，因?yàn)椴煌挠脩魰?huì)有不同的需求，但只要你想，你就可以專(zhuān)注于為網(wǎng)絡(luò)上的用戶營(yíng)造一個(gè)相當(dāng)好的體驗(yàn)并使他們留下來(lái)。

當(dāng)使用為 Web 構(gòu)建的應(yīng)用時(shí)，用戶可以輕松訪問(wèn)你網(wǎng)站服務(wù)的一部分，而無(wú)須先下載龐大的安裝文件。使用正確的緩存技術(shù)的 PWA 可以保存用戶數(shù)據(jù)并立即為用戶提供功能。隨著世界各地越來(lái)越多的用戶開(kāi)始上網(wǎng)，不斷為 10 億規(guī)模的新用戶構(gòu)建網(wǎng)站變得格外重要。PWA 通過(guò)構(gòu)建快速、精簡(jiǎn)的 Web 應(yīng)用來(lái)幫助你實(shí)現(xiàn)此目標(biāo)。

如果你看過(guò)一些關(guān)于軟件開(kāi)發(fā)的文章，一定見(jiàn)過(guò)圍繞原生應(yīng)用與 Web 應(yīng)用的爭(zhēng)論。哪個(gè)更好？各自的優(yōu)勢(shì)與劣勢(shì)是什么？原生應(yīng)用本身是非常好的，但事實(shí)上 PWA 不僅僅是將原生應(yīng)用的功能引入 Web 。它解決了企業(yè)面臨的真正問(wèn)題，旨在為用戶創(chuàng)造一個(gè)名副其實(shí)的可發(fā)現(xiàn)、快速和有吸引力的體驗(yàn)。

---

本文選自《PWA實(shí)戰(zhàn)：面向下一代的Progressive Web APP》。

本書(shū)降生之前，就得到Facebook、阿里旗下UC團(tuán)隊(duì)、新浪旗下微博團(tuán)隊(duì)及百度團(tuán)隊(duì)的積極響應(yīng)，或參與技術(shù)審校，或勤力作序推薦，可見(jiàn)PWA在國(guó)內(nèi)已成氣候、方興未艾。前端世界緊鑼密鼓，離開(kāi)一會(huì)兒就會(huì)錯(cuò)過(guò)新角登場(chǎng)。在擴(kuò)展鏈接中你可以了解到本書(shū)更詳細(xì)的信息。

------------

更多科技資訊請(qǐng)見(jiàn)微信公眾號(hào)：博文視點(diǎn)Broadview（微信號(hào)：bvbooks）