漸進式Web應(yīng)用（PWA）入門教程（上）

pingink 發(fā)布于2019-08-22 17:31 / 2138人閱讀

摘要：漸進式應(yīng)用的安裝過程很快，只需要在主屏幕上添加一個圖標即可。漸進式應(yīng)用啟動時可以顯示一個好看的啟動畫面。而在微信這邊，憑借龐大的用戶基數(shù)和體量能否與分庭抗禮乃至笑到最后目前還不得而知。

最近關(guān)于漸進式Web應(yīng)用有好多討論，有一些人還在質(zhì)疑漸進式Web應(yīng)用是否就是移動端未來。

但在這篇文章中我并不會將漸進式APP和原生的APP進行比較，但有一點是可以肯定的，這兩種APP的目標都是使用戶體驗變得更好。

移動端Web應(yīng)用有很多優(yōu)秀的概念讓人應(yīng)接不暇，但好在編寫一個漸進式Web應(yīng)用不是一個很困難的事情。在這篇文章里將向你介紹如何把一個普通的網(wǎng)站轉(zhuǎn)換成漸進式Web應(yīng)用。你可以按照這篇文章一步一步地做，做完之后你的網(wǎng)站將可以實現(xiàn)離線訪問，并且可以在桌面上創(chuàng)建該網(wǎng)站的圖標。那么下面即將開始入門教程。

什么是漸進式Web應(yīng)用？

漸進式Web應(yīng)用是一種全新的Web技術(shù)，讓Web應(yīng)用和原生APP的體驗相近或一致。

漸進式Web應(yīng)用它可以橫跨Web技術(shù)及Native APP開發(fā)的解決方案，對于開發(fā)者的優(yōu)勢如下：

你只需要關(guān)心W3C的Web標準，不用關(guān)心各種Native APP的代碼。

用戶可以在安裝應(yīng)用之前先試用。

在漸進式Web應(yīng)用中，你不需要使用各種應(yīng)用商店來分發(fā)應(yīng)用，也不用關(guān)心應(yīng)用發(fā)布時奇怪的審核標準以及應(yīng)用內(nèi)購的平臺抽成。另外，應(yīng)用程序更新是自動進行的，無需用戶交互，所以整體的使用體驗對于用戶來講更為的平滑。

漸進式Web應(yīng)用的“安裝”過程很快，只需要在主屏幕上添加一個圖標即可。

漸進式Web應(yīng)用啟動時可以顯示一個好看的啟動畫面。

你可以在漸進式Web應(yīng)用中提供具有全屏體驗的應(yīng)用。

通過系統(tǒng)通知等形式提高用戶的粘性。

漸進式Web應(yīng)用將會在本地緩存必要的文件，所以漸進式Web應(yīng)用會比普通的Web應(yīng)用的性能更好。

輕量級安裝——你只需要緩存幾百KB的數(shù)據(jù)即可。

所有的數(shù)據(jù)傳輸必須使用安全的HTTPS連接

漸進式Web應(yīng)用可以離線緩存數(shù)據(jù)，并且會在重新連接互聯(lián)網(wǎng)時重新同步數(shù)據(jù)。

漸進式Web應(yīng)用發(fā)展的現(xiàn)狀

漸進式Web應(yīng)用才剛剛開始發(fā)展，但實際上在國內(nèi)，有些網(wǎng)站已經(jīng)實際開始PWA的實踐了，例如：微博、豆瓣、淘寶等平臺。可能這時候聰明的你可能就會產(chǎn)生疑問，那這個PWA不就是和微信小程序一樣嗎，對是這樣，二者的目的是一致的，就是在移動端為用戶提供足夠輕量且與原生應(yīng)用使用體驗相近的“輕”應(yīng)用。

但就目前來講，PWA是Google主推的一項技術(shù)標準，F(xiàn)ireFox，Chrome以及一些基于Blink的瀏覽器已經(jīng)支持漸進式Web應(yīng)用了，Edge上對漸進式Web應(yīng)用的支持還在開發(fā)。Apple公司也表示會考慮在自己Safari支持PWA。然而這項功能已經(jīng)進入了WebKit內(nèi)核的五年計劃中。長期來看，對瀏覽器兼容性的支持方面應(yīng)該已經(jīng)不算太大問題了。況且在現(xiàn)階段，在不支持漸進式Web應(yīng)用的瀏覽器中，你的應(yīng)用也只是無法使用漸進式Web應(yīng)用的離線功能而已，除此之外的功能均可以正常使用。

而在微信這邊，憑借龐大的用戶基數(shù)和體量能否與PWA分庭抗禮乃至笑到最后目前還不得而知。

示例代碼

大多數(shù)教程都講述的是如何在Chrome上從零開始制作一個類似原生界面的應(yīng)用。然而在這篇教程中，我們并不打算做一個單頁面應(yīng)用程序，所以在這我們也不必了解諸如Material Design等知識。那么下面我們就直接看示例吧。

你可以從GitHub中獲取本教程對應(yīng)的示例代碼。

本示例中提供了一個有四個網(wǎng)頁的網(wǎng)站，一個CSS文件和一個JavaScript文件。這個網(wǎng)站可以在所有的現(xiàn)代瀏覽器上正常工作（IE10+）。如果你的瀏覽器支持漸進式Web應(yīng)用，用戶可以在離線狀態(tài)下將會直接訪問緩存中的頁面。

要想運行此示例，請確保你已經(jīng)安裝了Node.js。并請打開命令行，使用以下命令來運行該示例：

    node ./server.js [port]

以上命令中，[port]是可選部分，默認為8888。使用 Ctrl + C 即可停止Web服務(wù)器。

打開基于Blink內(nèi)核的瀏覽器（Opera，Vivaldi，Chrome），然后在地址欄中輸入http://localhost:8888/（注意端口號是否正確），即可訪問該示例。你可以打開開發(fā)者工具（F12 或者 Cmd/Ctrl + Shift + I）來查看控制臺信息。

查看首頁，也可以在頁面上點擊一下，然后使用以下方法進入離線模式：

選中Network標簽或者Application -> Service Workers 標簽下的“離線”選項。重新訪問之前訪問過的網(wǎng)頁，之前網(wǎng)頁仍然會加載：

連接移動端安裝

除了在PC瀏覽器訪問外，你也可以在移動設(shè)備上訪問該示例。使用USB線纜將你的移動設(shè)備連接到電腦上，然后從右上角三個點菜單中打開More tools - Remote devices標簽

點擊左側(cè)的Settings菜單，然后添加一條端口映射（Port Forwarding）的規(guī)則，將8888映射為localhost:8888，現(xiàn)在你可以直接在手機打開Chrome然后訪問http://localhost:8888 。

你可以使用瀏覽器的“添加到主屏幕”功能將當前網(wǎng)頁添加到主屏幕，在你訪問了幾個頁面之后，瀏覽器會將這個Web應(yīng)用“安裝”到你的設(shè)備上。瀏覽幾個頁面，關(guān)閉Chrome并將設(shè)備與電腦斷開連接，點擊桌面上生成的圖標，你會看到一個Splash頁面，并且你可以繼續(xù)瀏覽之前瀏覽過的頁面。

小結(jié)
通過本節(jié)對漸進式Web應(yīng)用的介紹，相信大家對PWA是什么已經(jīng)有了基本的認識。PWA有無需擔心有無網(wǎng)絡(luò)的特點，并具有獨立入口與獨立的保護機制。新標準的推出很可能會帶著 Web 應(yīng)用在移動設(shè)備上浴火重生。所以滿足 PWA 模型的前端控件，如純前端表格控件SpreadJS，將逐漸成為移動操作系統(tǒng)的一等公民，并將向Native APP發(fā)起挑戰(zhàn)。

在下節(jié)中我們將帶你一起去看看，PWA的原理是什么，以及它究竟是如何工作的，敬請期待。

原文鏈接：https://www.sitepoint.com/ret...