腾讯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