1.前言
在聽(tīng)了很多內(nèi)容之后，接下來(lái)是一個(gè)非常實(shí)在的干貨分享。
來(lái)自騰訊的渠宏偉來(lái)給我們一起分享一下，騰訊在前端頁(yè)面中，是如何利用 PWA 技術(shù)來(lái)提高用戶(hù)的轉(zhuǎn)化率的。
聲明：
本文是由 李鵬（MR_LP）全程手打，請(qǐng)勿轉(zhuǎn)載，違者必究！
本文首發(fā)自 微信公眾平臺(tái)（李曉鵬：MR_LIXP），如果可以請(qǐng)關(guān)注我一下。
本文中若引用內(nèi)容發(fā)生了侵權(quán)，請(qǐng)及時(shí)聯(lián)系作者刪除。
鑒于本人某些知識(shí)水平有限，如果在文章中出現(xiàn)某些錯(cuò)誤，請(qǐng)不要激動(dòng)，留言給我就好。
本文中有很多內(nèi)容是自己根據(jù)自己的理解去跟大家分享的，所以保留不同觀點(diǎn)，可以留言給我。
注意：
若文章中出現(xiàn)圖片無(wú)法加載或某些格式錯(cuò)誤，請(qǐng)移步：騰訊Web前端大會(huì) 企鵝電競(jìng)PWA實(shí)戰(zhàn)（MR_LP）
2.基礎(chǔ)信息
分享人：
- HongweiQu ( 渠宏偉 ) 騰訊 前端高級(jí)工程師
主要分享內(nèi)容：
- Progressive Web App(PWA) 是由谷歌提出推廣的在網(wǎng)頁(yè)應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶(hù)體驗(yàn)的技術(shù)方案。想要實(shí)現(xiàn)頁(yè)面秒開(kāi)、離線(xiàn)訪(fǎng)問(wèn)、類(lèi)原生體驗(yàn)，有了PWA的技術(shù)的幫助，H5頁(yè)面也能做到! HongweiQu給大家分享企鵝電競(jìng)業(yè)務(wù)漸進(jìn)式Web應(yīng)用PWA實(shí)踐經(jīng)驗(yàn)。
分享內(nèi)容記錄筆記如下：
3.分享流程
什么是 PWA?
Progressive Web App(PWA) 是由谷歌提出推廣的在網(wǎng)頁(yè)應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶(hù)體驗(yàn)的技術(shù)方案。
當(dāng)前用戶(hù)使用習(xí)慣
* Web 端：13%
* APP端：87%
為什么要使用 PWA？
* 可靠的性能
* 推送消息
* 桌面圖標(biāo)訪(fǎng)問(wèn)
* 離線(xiàn)緩存
* 硬件權(quán)限
PWA 是什么？
* 一個(gè)解決方案
* 將 Web 和 APP 優(yōu)點(diǎn)相結(jié)合
不需要安裝
快速加載
推送消息
桌面圖標(biāo)
全屏體驗(yàn)
PWA 的關(guān)鍵特性
* 漸進(jìn)式
* 響應(yīng)式
* 離線(xiàn)緩存
* 類(lèi)原生體驗(yàn)
* 更新的
* 安全
* 可搜索
* 通知用戶(hù)
* 安裝到桌面
* 易分享
PWA 的核心技術(shù)
-
Web App Manifest
-
add to home Screen
-
Service Worker
-
service worker lifecycle
-
app shell
-
push notifion
如何快速創(chuàng)建 PWA 應(yīng)用
- Vue
vue-cli 創(chuàng)建 PWA - React
create-react-app 創(chuàng)建 - Preact
preact-cli 創(chuàng)建
我們已有的一些經(jīng)驗(yàn)
PWA 有哪些缺陷？
- 依賴(lài) HTTPS，建議拋棄 http2/spdy 降低 HTTPS 帶來(lái)的延遲
- 目前適用于 ANDROID 5 以上版本，iOS 不支持
- Android webview 環(huán)境復(fù)雜，X5 內(nèi)核支持 service worker
- 國(guó)內(nèi)GCM 不可用，還沒(méi)有實(shí)現(xiàn) Web Push Protocol 的推送服務(wù)
PWA 的未來(lái)還會(huì)有哪些提升？
- PWA 可能出現(xiàn)在應(yīng)用列表以及系統(tǒng)設(shè)置中
- 能夠接受其他應(yīng)用傳來(lái)的 intent
- 長(zhǎng)按通知還會(huì)表示標(biāo)準(zhǔn)的 Android 通知管理控件
- 豐富的 API
