pwa 与lavas - huodongjia.com€¦ · • design pattern • prpl pattern • security ......
TRANSCRIPT
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公众号