漸進式Web應用（PWA）入門教程（上）

最近關於漸進式Web應用有好多討論，有一些人還在質疑漸進式Web應用是否就是移動端將來。

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

移動端Web應用有不少優秀的概念讓人目不暇接，但好在編寫一個漸進式Web應用不是一個很困難的事情。在這篇文章裏將向你介紹如何把一個普通的網站轉換成漸進式Web應用。你能夠按照這篇文章一步一步地作，作完以後你的網站將能夠實現離線訪問，而且能夠在桌面上建立該網站的圖標。那麼下面即將開始入門教程。

什麼是漸進式Web應用？

漸進式Web應用是一種全新的Web技術，讓Web應用和原生APP的體驗相近或一致。

漸進式Web應用它能夠橫跨Web技術及Native APP開發的解決方案，對於開發者的優點以下：

1. 你只須要關心W3C的Web標準，不用關心各類Native APP的代碼。
2. 用戶能夠在安裝應用以前先試用。
3. 在漸進式Web應用中，你不須要使用各類應用商店來分發應用，也不用關心應用發佈時奇怪的審覈標準以及應用內購的平臺抽成。另外，應用程序更新是自動進行的，無需用戶交互，因此總體的使用體驗對於用戶來說更爲的平滑。
4. 漸進式Web應用的「安裝」過程很快，只須要在主屏幕上添加一個圖標便可。
5. 漸進式Web應用啓動時能夠顯示一個好看的啓動畫面。
6. 你能夠在漸進式Web應用中提供具備全屏體驗的應用。
7. 經過系統通知等形式提升用戶的粘性。
8. 漸進式Web應用將會在本地緩存必要的文件，因此漸進式Web應用會比普通的Web應用的性能更好。
9. 輕量級安裝——你只須要緩存幾百KB的數據便可。
10. 全部的數據傳輸必須使用安全的HTTPS鏈接
11. 漸進式Web應用能夠離線緩存數據，而且會在從新鏈接互聯網時從新同步數據。

漸進式Web應用發展的現狀

漸進式Web應用纔剛剛開始發展，但實際上在國內，有些網站已經實際開始PWA的實踐了，例如：微博、豆瓣、淘寶等平臺。可能這時候聰明的你可能就會產生疑問，那這個PWA不就是和微信小程序同樣嗎，對是這樣，兩者的目的是一致的，就是在移動端爲用戶提供足夠輕量且與原生應用使用體驗相近的「輕」應用。

但就目前來說，PWA是Google主推的一項技術標準，FireFox，Chrome以及一些基於Blink的瀏覽器已經支持漸進式Web應用了，Edge上對漸進式Web應用的支持還在開發。Apple公司也表示會考慮在本身Safari支持PWA。然而這項功能已經進入了WebKit內核的五年計劃中。長期來看，對瀏覽器兼容性的支持方面應該已經不算太大問題了。何況在現階段，在不支持漸進式Web應用的瀏覽器中，你的應用也只是沒法使用漸進式Web應用的離線功能而已，除此以外的功能都可以正常使用。

而在微信這邊，憑藉龐大的用戶基數和體量可否與PWA平起平坐乃至笑到最後目前還不得而知。

示例代碼

大多數教程都講述的是如何在Chrome上從零開始製做一個相似原生界面的應用。然而在這篇教程中，咱們並不打算作一個單頁面應用程序，因此在這咱們也沒必要了解諸如Material Design等知識。那麼下面咱們就直接看示例吧。

你能夠從GitHub中獲取本教程對應的示例代碼。

本示例中提供了一個有四個網頁的網站，一個CSS文件和一個JavaScript文件。這個網站能夠在全部的現代瀏覽器上正常工做（IE10+）。若是你的瀏覽器支持漸進式Web應用，用戶能夠在離線狀態下將會直接訪問緩存中的頁面。

要想運行此示例，請確保你已經安裝了Node.js。並請打開命令行，使用如下命令來運行該示例：

node ./server.js [port]

以上命令中，[port]是可選部分，默認爲8888。使用 Ctrl + C 便可中止Web服務器。

打開基於Blink內核的瀏覽器（Opera，Vivaldi，Chrome），而後在地址欄中輸入http://localhost:8888/（注意端口號是否正確），便可訪問該示例。你能夠打開開發者工具（F12 或者 Cmd/Ctrl + Shift + I）來查看控制檯信息。

查看首頁，也能夠在頁面上點擊一下，而後使用如下方法進入離線模式：

選中Network標籤或者Application -> Service Workers 標籤下的「離線」選項。從新訪問以前訪問過的網頁，以前網頁仍然會加載：

鏈接移動端安裝

除了在PC瀏覽器訪問外，你也能夠在移動設備上訪問該示例。使用USB線纜將你的移動設備鏈接到電腦上，而後從右上角三個點菜單中打開More tools - Remote devices標籤

點擊左側的Settings菜單，而後添加一條端口映射（Port Forwarding）的規則，將8888映射爲localhost:8888，如今你能夠直接在手機打開Chrome而後訪問http://localhost:8888 。

你可使用瀏覽器的「添加到主屏幕」功能將當前網頁添加到主屏幕，在你訪問了幾個頁面以後，瀏覽器會將這個Web應用「安裝」到你的設備上。瀏覽幾個頁面，關閉Chrome並將設備與電腦斷開鏈接，點擊桌面上生成的圖標，你會看到一個Splash頁面，而且你能夠繼續瀏覽以前瀏覽過的頁面。

小結
經過本節對漸進式Web應用的介紹，相信你們對PWA是什麼已經有了基本的認識。PWA有無需擔憂有無網絡的特色，並具備獨立入口與獨立的保護機制。新標準的推出極可能會帶着 Web 應用在移動設備上浴火重生。因此知足 PWA 模型的前端控件，如純前端表格控件SpreadJS，將逐漸成爲移動操做系統的一等公民，並將向Native APP發起挑戰。

在下節中咱們將帶你一塊兒去看看，PWA的原理是什麼，以及它到底是如何工做的，敬請期待。

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