Mais conteúdo relacionado
Semelhante a PWA 101 (20)
PWA 101
- 10. • 体验流畅 - 接近 Native App 的交互和体验
• 安全 - 强制使用 HTTPS 来通信
• 利于 SEO - manifest 可以让搜索引擎更好地发现应
用
• 便于分享 - 通过 Url 就可以轻松分享
- 11. • 可安装 - 添加图标到主屏幕
• 离线运行 - 没有网络和网速差的条件仍然可以提供访
问
• 推送消息 - 像 Native App 那样收到消息推送
• 持续更新- 可以悄悄地在后台更新应用数据
- 20. • short_name:PWA 图标被添加到主屏幕时候显示的名字(类似主屏幕上
Native App 的名字)
• name: PWA 启动时的标题。
• icons:PWA 图标
• start_url:定义了 PWA 的入口页面。比如开发者把这个属性设为 Flipkart
Lite 的商品列表页,那么从主屏打开就是 Flipkart Lite 的商品列表页。
• theme_color/background_color:主题色与背景色,用于配置一些可定制的
操作系统 UI 以提高用户体验,比如 Android 的状态栏、任务栏等。
• display:设置你的 PWA 启动时是全屏还是像在浏览器那样有顶部导航栏。
• orientation:设置 PWA 启动时候是横屏还是竖屏。
- 22. – MDN CN
“充当位于 Web 应用程序之间,以及浏览器和网
络的代理服务器。它的存在是为了能够创建有效
的离线体验,拦截网络请求并且可以根据网络是
否可用以及是否去服务器获取页面更新而做出不
同的响应。”
- 27. • 假如这个 SW 已经注册过,上面代码会被忽略
• sw.js 根据需要放在不同层级的目录(./sw.js 和
./demo/sw.js 作用域不一样)
• chrome://inspect/#service-workers 检查是否生效
- 31. • Cache API - PWA 页面所需的静态文件比如
JavaScript、CSS 和 HTML
• IndexedDB - 存储页面数据,比如电商 PWA 的列表
页或者商品详情页的数据。
- 33. • Payment Request API
• Geolocation API
• Device Orientation & Motion API
• getUserMedia
- 36. • iOS (safari) 不支持 PWA
• 国内 Android 设备支持程度堪忧
• 国产移动浏览器厂商支持欲望不足
• Chrome 浏览器只认自家的 GCM
• 国内 webview 环境复杂,比如微信
- 38. • Webkit 内核:API 开发在「五年计划」中
• EdgeHTML 内核:关键技术都在「正在开发中」
• Blink 内核和 Gecko 内核:全部实现