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

MR_LP發表於2019-03-01
Web前端

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

相關文章