一個Demo讓你更了解PWA的魅力

04-08

鑒於PWA現在還沒多少人知道本人在此再啰嗦的介紹一下。

如果對PWA已經有一定的了解可以跳出此段。

什麼是 PWA

Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA 本質上是 Web App，藉助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。

PWA 的主要特點包括下面三點：

可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現

體驗 - 快速響應，並且有平滑的動畫響應用戶的操作

粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

PWA 本身強調漸進式，並不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過 PWA Checklist 查看現有的特徵。

此處引入一段很官方的介紹。(⊙v⊙)

對一PWA的一些使用領先潮流的百度(*^__^*) 已經把它製作成了一個腳手架方便大家使用了。免除了大多數的配置步驟。

接下來我們來看看這個腳手架到底給我們帶來了那些便利呢。

Lavas 是什麼

Lavas 是一個基於 Vue 的 PWA (Progressive Web Apps) 完整解決方案。我們將 PWA 的工程實踐總結成多種 Lavas 應用框架模板，幫助開發者輕鬆搭建 PWA 站點，且無需過多的關注 PWA 開發本身。

Lavas 做什麼

簡單來說，站點 PWA 化需要做什麼，Lavas 就做什麼。要更好的理解 Lavas ，我們需要從 PWA 是什麼講起。這樣我們才了解，為什麼要把站點改成 PWA ，然後用 Lavas 輕鬆打造 PWA 站點。

PWA (Progressive Web Apps) 是一種 Web App 新模型，並不是具體指某一種前沿的技術或者某一個單一的知識點，我們從英文縮寫來看就能看出來，這是一個漸進式的 Web App。主要是增強 Web App 的體驗，使站點具有類似原生應用的功能和體驗，如：

站點可添加至主屏幕
全屏方式運行
支持離線緩存
消息推送 ...

這對於目前體驗相對較弱的站點而言，無疑是個好消息，大大提升了站點的功能體驗。在我們認識到 PWA 的好處後，就要考慮如果要打造一個 PWA 站點，到底有多少開發量，至少下面幾個工作就必不可少：

為了讓站點能像原生應用那樣安裝到主屏幕，我們需要準備一些靜態資源（如屏幕圖標）和一個清單文件 manifest.json 去告知瀏覽器使用哪些圖標，顯示哪些應用名稱等等；
為了讓站點具有更好的離線體驗，PWA 提供了更好的緩存 API （詳見 web 存儲）和緩存管理方式 Service Worker。具體的緩存策略仍然需要開發者根據項目的實際需要進行開發；
同樣是為了讓站點具有更好的離線體驗，除了要在緩存策略上下功夫，站點 UI 設計上也需要遵循一定的規範（如 App Shell 模型和離線 UX 注意事項），才能讓站點在頁面切換、內容載入、載入出錯、弱網斷網等等情況下不會給用戶顯示個大白屏。

不禁要問，這麼多的開發工作難道都要開發者自己做么？有沒有現成的工具可用？此時 Lavas 就隆重登場，擔負起了這個重任， Lavas 提供了一套基於 Vue 的 PWA 站點快速搭建方案。開發者只需要做一些簡單的業務配置即可，從而大大節約開發維護成本。

(*^__^*) 嘻嘻……以上全部很不要臉的搬運自官方。

在這裡先感謝一下QQ音樂官網提供的介面

此處高能Σ( ° △ °|||)︴

請看下圖：

此Dom(此Dom借用了一下QQ音樂的一些介面，不包含歌曲，如果有違反請聯繫作者刪除)是運用Lavas腳手架=PWA 製作出來的可以說是到了與原生相媲美的流暢度。

該DOM還會在用戶訪問該網站第二次的時候還允許將站點添加至主屏幕，這個是 PWA 提供的一項重要功能。

點擊保存後

發現本地多一了一個APP這個就PWA的0安裝的魅力打開一看

如此驚艷是不是和原生一模一樣，驚不驚喜，意不意外( ⊙ o ⊙ )！

zzz可能這裡還不夠直觀。大家可以在手機[打開](https://linfengzhuiyi.cn)體驗一下，必然讓你震驚！！！！！

我們再來看看我們的Dom結合了那些PWA的內容，主要有「Service Worker」，「manifest.json」，「App Shell骨架屏」這幾個內容。

我們來逐一查看其功能

Service Worker 有以下功能和特性：

一個獨立的 worker 線程，獨立於當前網頁進程，有自己獨立的 worker context。
一旦被 install，就永遠存在，除非被 uninstall
需要的時候可以直接喚醒，不需要的時候自動睡眠（有效利用資源，此處有坑）
可編程攔截代理請求和返回，緩存文件，緩存的文件可以被網頁進程取到（包括網路離線狀態）
離線內容開發者可控
能向客戶端推送消息
不能直接操作 DOM
出於安全的考慮，必須在 HTTPS 環境下才能工作
非同步實現，內部大都是通過 Promise 實現

manifest.json

通過對 manifest.json 進行相應配置，可以實現以下功能：

基本功能

自定義名稱
自定義圖標
設置啟動網址
設置作用域

改善應用體驗

添加啟動畫面
設置顯示類型
指定顯示方向
設置主題色

應用安裝橫幅

引導用戶添加應用
引導用戶安裝原生應用

App Shell骨架屏

實現方法大致是：

在構建時將一個固定的 Skeleton 路由組件的渲染結果插入 HTML 模版中
在 Service Worker 中配置其對包含 Skeleton 的 HTML 進行緩存
頁面切換時直接讀取緩存獲取包含 Skeleton 的 HTML，大大縮短甚至去除白屏時間

以上都是一些官方的說明如果可以了解更多可以以到Lavas官網上面了解更多

最後

對於目前PWA國內還沒有普及（其實人家國外早就火了幾百年了~），還是大家的熱情還不夠吧，總是覺得一些東西還不穩定而不敢去貿然嘗試他。我覺得這東西嘛應該多去試下，不要安於現狀。多嘗試總有新發現不然咱們怎麼與人家國外一戰呢~~~~~~

希望大家與我一起去推動PWA的發展，讓webApp體驗一把變成原生的樂趣。

那麼最後這裡線上,上面Dom的項目地址給大家吧~(歡迎大家各種 start ,各種PR，Issues)

(該Dom的歌曲暫時不能播放由於關於版權原因，不能獻上有請體諒~~~~(>_<)~~~~)

@QQ音樂

參考文獻 : Lavas官網

感謝: @彭星其團隊推出Lavas，祝Lavas發展越來越順利，做得更好