Open HolyZheng opened 6 years ago
PWA 可以将 Web 和 App 各自的优势融合在一起:渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接
pwa代表了让 Web Pages 能成为 Web Apps 的一系列技术 其核心技术包括 App Manifest、Service Worker、Web Push,等等。
web app虽然开发,但是用户体验一直是个坎,做过努力如: virtual dom、spa、混合编程、用canvas将整个页面画出来等,但是仍存在问题
PWA的核心目标就是提升 Web App 的性能,改善 Web App 的用户体验。媲美native的流畅体验,将网络之长与应用之长相结合。
因为pwa也是一个web应用,我们首先需要完成web页面的功能。
注册激活Service Worker
Web App Manifest只需作为一个普通的 link 标签引入到HTML页面中。可实现的PWA特性包括: App Install Banner,桌面图标和文字,以及启动页面的 UI 元素。
特点
PWA 可以将 Web 和 App 各自的优势融合在一起:渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接
pwa是应用多项技术的web app
pwa代表了让 Web Pages 能成为 Web Apps 的一系列技术 其核心技术包括 App Manifest、Service Worker、Web Push,等等。
Native APP 缺陷
web app 缺陷
web app虽然开发,但是用户体验一直是个坎,做过努力如: virtual dom、spa、混合编程、用canvas将整个页面画出来等,但是仍存在问题
pwa目标
PWA的核心目标就是提升 Web App 的性能,改善 Web App 的用户体验。媲美native的流畅体验,将网络之长与应用之长相结合。
开发步骤
1. 先实现基础web功能
因为pwa也是一个web应用,我们首先需要完成web页面的功能。
2. 页面代理 Service Worker
注册激活Service Worker
3. 缓存策略
4.应用清单
Web App Manifest只需作为一个普通的 link 标签引入到HTML页面中。可实现的PWA特性包括: App Install Banner,桌面图标和文字,以及启动页面的 UI 元素。