pwa 与lavas - huodongjia.com€¦ · • design pattern • prpl pattern • security ......

2017.thegiac.comwww.top100summit.com

PWA 与 LAVAS

彭星

百度前端工程师

2017.thegiac.com

彭星

LAVAS团队负责人

Location: 上海 张江

2017.thegiac.com

What is

Progressive Web Apps

2017.thegiac.com

2017.thegiac.com

• 主屏图标 (Web App Manifest)

• 离线可用 (Service Worker)

• 离线通知 (Push API & Notification API)

2017.thegiac.com

可靠 快 用户留存

2017.thegiac.com

What exactly is

Progressive Web Apps

2017.thegiac.com

渐进式提升用户体验的站点

PWA 是指

2017.thegiac.com

All for

User Experience

2017.thegiac.com

• Design Pattern

• PRPL Pattern

• Security

• …

2017.thegiac.com

What is

LAVAS

[ˈlɑ:vəz]

2017.thegiac.com

LAVAS

基于 Vue 的 PWA 解决方案

https://lavas.baidu.com/

https://github.com/lavas-project/

2017.thegiac.com

PWA 通常是 SPA

2017.thegiac.com

App Shell 设计模型

PWA 通常采用

2017.thegiac.com

内容

2017.thegiac.com

ele.me

App Skeleton

2017.thegiac.com

Service Worker

服务工作线程

2017.thegiac.com

『 消灭恐龙 』

2017.thegiac.com

2017.thegiac.com

https://lavas.baidu.com/ready

Safari Technology Preview 46

2017.thegiac.com

2017.thegiac.com

• 缓存 App Shell 所需静态文件

• 所有页面请求均返回 App Shell

• App Shell 通过当前路径渲染不同页面

2017.thegiac.com

2017.thegiac.com

• 浏览器每天至少更新一次 Service Worker

• 手动更新 registration.update()

• 注册新的 Service Worker

• 逐字节对比新 sw 文件和旧 sw，有区别才更新

Service Worker 更新机制

2017.thegiac.com

index.html

sw-register.js

App Shell

sw-register.js?t={{ realtime}}

sw.js

sw.js?t={{ buildtime }}Update message

• 监听 sw 的更新消息

• 处理 sw 更新逻辑

sw-register-webpack-plugin

2017.thegiac.com

• Service Worker 作用域

• CacheStorage缓存更新

• 选择缓存策略，如: networkFirst 等

• …

2017.thegiac.com

PWA 如何做 SEO

2017.thegiac.com

百度爬虫支持 SPA 移动站点

2017.thegiac.com

SSR

React

Vue

San

…

+

2017.thegiac.com

第一次加载

第二次加载

URL: https://xxx.xxx/index.html

Server 首屏内容 安装 SW

预缓存文件 预缓存 App Shell 请求

SW 判断是否返回 APP SHELL

返回 APP SHELL根据当前 URL 渲染对应页面

2017.thegiac.com

Service Worker

App Shell

App Skeleton

Vue SSR

LAVAS

…

2017.thegiac.com

• Credential Management API

• Web Payment API

• Web Share

• Device API

• …

2017.thegiac.com

PWA 还在不断前进

2017.thegiac.com

PWA + LAVAS = Web + Android

https://lavas.baidu.com/app

2017.thegiac.com

2017.thegiac.com

2017.thegiac.comwww.top100summit.com

扫码关注GIAC公众号