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功能，為移動端的瀏覽帶來極為舒適的體驗。