淺談一下我瞭解的PWA

陳圈圈發表於2018-04-16

Progressive Web Apps,簡稱PWA,中文翻譯過來就是漸進式網頁應用,個人覺得它可以算是Web應用的下一個進化方向之一, 畢竟技術的發展有時候是不可預估的,誰也無法預料技術的走向,但至少它代表了一種可能性,下面我們就一起來了解下這種新興技術。

以下僅代表個人見解和認知,有結合其他大神的文章的分析,如有不足之處歡迎指正!

 一、什麼是Progressive Web Apps? 

Progressive Web Apps,簡稱PWA,中文直譯過來就是漸進式Web應用,一個合格的PWA,應該具有但不限於以下特點:

 漸進式:針對不同版本不同核心的瀏覽器,它的功能能夠漸進式的增強,隨著使用者與應用之間的聯絡加深,如果使用者需要,網頁可以漸進式地變成App,比如被新增到主螢幕、全屏方式執行、離線工作、推送通知訊息等。但它仍是 Web 而非放到 App Store 裡。

響應式:適應多種執行環境,無論是移動端、web端還是平板電腦等等。

對網路環境的弱依賴: 得益於谷歌的service worker技術,使PWA極大降低對網路環境的依賴,能夠在離線或者網路極差的環境下工作。

持續更新:同樣由於service worker的存在,應用能夠輕鬆實現持續更新。

類原生體驗:有像原生應用般的互動和導航給使用者原生應用般的體驗,如果使用者願意,特悶可以選擇將PWA應用新增到手機主螢幕,同樣得益於service worker,它甚至可以讓PWA應用像原生應用一樣接收訊息推送。

安全:通過 HTTPS 來提供服務來防止網路窺探,保證內容不被篡改。


二、我個人對PWA的一些認知

以上對PWA的一些定義,都是一些官方的定義或者一些大神的認知,下面來談談我個人對PWA的一些認知,以及它和目前的Hybrid App、小程式、快應用的區別。

目前市場上主流的Hybrid App無非兩種做法:

1.類似React Native這種,通過JavaScript語言進行開發,視覺上通過標籤轉義,將RN標籤轉化為手機原生圖形介面;操作上通過js呼叫手機底層硬體和SDK;這種做法的優點是APP體驗好,缺點是開發週期幾乎和原生APP差不多

2.國內外很多中小企業比較青睞的H5頁面套APP外殼的做法,例如國內的APICloud、H5plus等等,其本質上只是一個可以訪問特定H5頁面的瀏覽器;這種做法的優點是開發週期短,缺點是體驗和效能都較差。

而小程式和快應用,個人認為更多的是借鑑React Native的思路進行實現的,尤其是微信小程式,基本上就是沿用了RN的那一套。

那麼PWA和以上幾種應用的區別在哪裡呢?有些人可能會覺得PWA和小程式以及快應用幾乎沒什麼區別,但在我看來,PWA和小程式、快應用、混合APP這些東西天生就不一樣!

還記得PWA的全名嗎?Progressive Web Apps,這裡已經寫得很明確了,它是Web App啊,React Native、小程式、快應用一直在致力於去HTML化,雖然他們都是使用JavaScript作為開發語言進行編寫的,但是你要知道,JavaScript本就不是隻為HTML而生的,如果你有閱讀過相關書籍你就會知道,JavaScript其實可以在瀏覽器以外的環境下執行!

以上其它應用,基本都已經摒棄了HTML中除了JS以外的其它內容,但是PWA不一樣,它從骨子裡仍然是一個Web頁面!說到Web App,有些同學可能會嗤之以鼻,確實,當前市場下,Web App也就是移動端Web頁面的份額已經極大化的萎縮(下圖是google釋出的移動Web和App使用時長佔比),或者說Web App可能從來沒有輝煌過,從傳統電腦端轉移到智慧手機時代,中間的過渡其實非常短,相信這點大家都是感同身受的,但是現在,誰也說不準Web App是否來到了一個風口位置 -- 因為有了PWA,你訪問的Web頁面已經有了能夠媲美原生App的體驗!

å¾çæè¿°


三、PWA將如何改變我們的移動體驗?

當你在手機瀏覽器中開啟一些Web網頁時,經常會看到以下的頁面:

淺談一下我瞭解的PWA淺談一下我瞭解的PWA

這些Web App會推薦你開啟它們的原生應用,如果你的手機沒有下載則會跳轉到相應的下載頁面,但是對於使用者來講,在沒有WIFI的情況下可能並不想為了一個不常用到的App消耗流量和系統記憶體,或者手機容量比較吃緊的使用者,可能有時候會為了刪除哪些應用保留哪些應用而猶豫不決,現在有了PWA,一切都能迎刃而解!而這些,還不是全部!

在2016年11月google團隊已經在嘗試並初步實現把「新增至主屏」重新命名為「安裝」,被安裝的 PWA 不再僅以 widget 的形式顯示在桌面上,而是真正做到與所有原生應用平級,一樣被收納進應用抽屜(App Drawer)裡,一樣出現在系統設定中。

淺談一下我瞭解的PWA

PWA能夠獲得和原生APP同級的許可權,也能夠像原生APP一樣實時獲取推送訊息,即使你在以後想要刪掉這個PWA應用,你也依然可以在瀏覽器中獲得高質量高體驗的Web頁面,在Web端,甚至Mac環境下也能享受到這種體驗!

淺談一下我瞭解的PWA

四、案例欣賞

國內外有一些優秀的技術團隊已經開始嘗試並推出了一些不錯的PWA應用,我這裡簡單介紹下兩個已知的

FlipKart(印度)

å¾çæè¿°

離線情況下的視覺差異

å¾çæè¿°


豆瓣(中國)

Alt text

Alt text

Alt text


相關文章