2019前端必會黑科技之PWA

一、背景

PWA被業內稱為下一代web應用模型，逐漸成為了一個各大前端廠商爭先恐後進行涉足，佈局的一個新的技術， 其主要的對標物Native app，作為現在最主流的mobile端應用，它的安全，效能，使用者體驗的確明顯領先於其他網際網路載體。

 

二. 什麼是PWA

PWA是Progressive Web App的英文縮寫， 翻譯過來就是漸進式增強WEB應用， 是Google 在2016年提出的概念，2017年落地的web技術。目的是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的使用者體驗的漸進式網頁應用。

引用官方介紹：

1. 可靠——即時載入，即使在不確定的網路條件下也不會受到影響。

當使用者從主螢幕啟動時，service work可以立即載入漸進式Web應用程式，完全不受網路環境的影響。service work就像一個客戶端代理，它控制快取以及如何響應資源請求邏輯，透過預快取關鍵資源，可以消除對網路的依賴，確保為使用者提供即時可靠的體驗。

2. 快速

據統計，如果站點載入時間超過3s，53% 的使用者會放棄等待。頁面展現之後，使用者期望有平滑的體驗，過渡動畫和快速響應。

3. 沉浸式體驗—— 感覺就像裝置上的原生應用程式，具有沉浸式的使用者體驗。

漸進式Web應用程式可以安裝並在使用者的主螢幕上，無需從應用程式商店下載安裝。他們提供了一個沉浸式的全螢幕體驗，甚至可以重新與使用者接觸的Web推送通知。Web應用程式中，可以透過manifest.json控制應用程式的顯示方式和啟動方式，指定主螢幕圖示、啟動應用程式時要載入的頁面、螢幕方向，甚至可以指定是否顯示瀏覽器Chrome。

 

三. 核心功能

PWA並不是單指某一項技術，你更可以把它理解成是一種思想概念，將Web網站透過一系列的Web技術去最佳化它，提升其安全性，效能，流暢性等各方面指標，最後達到使用者就像在用app一樣的感覺。PWA中包含的核心功能及特性如下：

1.Web App Manifest   
2.Service Worker   
3.Cache API 快取

4.Push&Notification 推送與通知   
5.Background Sync 後臺同步   
6.響應式設計

 

我們在開發Magento移動端的時候，其巨大的功能包容性可以很方便的整合PWA功能，為移動端的瀏覽帶來極為舒適的體驗。