騰訊Web前端大會 企鵝電競PWA實戰（MR_LP）

1.前言

在聽了不少內容以後，接下來是一個很是實在的乾貨分享。

來自騰訊的渠宏偉來給咱們一塊兒分享一下，騰訊在前端頁面中，是如何利用 PWA 技術來提升用戶的轉化率的。

聲明：

本文是由 李鵬（MR_LP）全程手打，請勿轉載，違者必究！

本文首發自 微信公衆平臺（李曉鵬：MR_LIXP），若是能夠請關注我一下。
本文中若引用內容發生了侵權，請及時聯繫做者刪除。
鑑於本人某些知識水平有限，若是在文章中出現某些錯誤，請不要激動，留言給我就好。
本文中有不少內容是本身根據本身的理解去跟你們分享的，因此保留不一樣觀點，能夠留言給我。

注意：
若文章中出現圖片沒法加載或某些格式錯誤，請移步：騰訊Web前端大會 企鵝電競PWA實戰（MR_LP）

2.基礎信息

分享人：

• HongweiQu ( 渠宏偉 ) 騰訊 前端高級工程師

主要分享內容：

• Progressive Web App(PWA) 是由谷歌提出推廣的在網頁應用中實現和原生應用相近的用戶體驗的技術方案。想要實現頁面秒開、離線訪問、類原生體驗，有了PWA的技術的幫助，H5頁面也能作到! HongweiQu給你們分享企鵝電競業務漸進式Web應用PWA實踐經驗。

分享內容記錄筆記以下：

3.分享流程

什麼是 PWA?

Progressive Web App(PWA) 是由谷歌提出推廣的在網頁應用中實現和原生應用相近的用戶體驗的技術方案。複製代碼

當前用戶使用習慣

* Web 端：13%
* APP端：87%複製代碼

爲何要使用 PWA？

* 可靠的性能
* 推送消息
* 桌面圖標訪問
* 離線緩存
* 硬件權限複製代碼

PWA 是什麼？

* 一個解決方案
* 將 Web 和 APP 優勢相結合
    不須要安裝
    快速加載
    推送消息
    桌面圖標
    全屏體驗複製代碼

PWA 的關鍵特性

* 漸進式
* 響應式
* 離線緩存
* 類原生體驗
* 更新的
* 安全
* 可搜索
* 通知用戶
* 安裝到桌面
* 易分享複製代碼

PWA 的核心技術

• Web App Manifest
  

• add to home Screen
  

• Service Worker
  

• service worker lifecycle
  
  
  

• app shell
  
  
  
  
  

• push notifion
  
  
  
  
  
  
  

如何快速建立 PWA 應用

• Vue
  vue-cli 建立 PWA
• React
  create-react-app 建立
• Preact
  preact-cli 建立

咱們已有的一些經驗

PWA 有哪些缺陷？

• 依賴 HTTPS，建議拋棄 http2/spdy 下降 HTTPS 帶來的延遲
• 目前適用於 ANDROID 5 以上版本，iOS 不支持
• Android webview 環境複雜，X5 內核支持 service worker
• 國內GCM 不可用，尚未實現 Web Push Protocol 的推送服務

PWA 的將來還會有哪些提高？

• PWA 可能出如今應用列表以及系統設置中
• 可以接受其餘應用傳來的 intent
• 長按通知還會表示標準的 Android 通知管理控件
• 豐富的 API