Web新技术:PWA - Progressive Web App


http://ljinkai.github.io/2016/04/27/progressive-web-app/


什么是Progressive Web App?

Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行在手机上。让Web App和Native App之间的差距更小。

概览特性:

  • 添加到屏幕
  • 从屏幕点击启动
  • 加载屏
  • 支持离线应用
  • 支持Push Notification

除了Chrome支持以外,Firfox和Opera也支持了PWA.


Web App Manifest文件

PWA主要一个Manifest.json来配置一些功能,像浏览器样式、添加到屏幕的图标等等。

添加到屏幕的提示Banner

利用Service Worker来实现离线存储

关于Service Worker的标准定义可以参考:https://www.w3.org/TR/service-workers/

这里有Service Worker的一些样本参考:https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

利用Push Notification增加用户的回头率

Push是利用GCM实现的

PWA的技术现在还并未流行起来,因为也是一个比较新的技术,相信随着浏览器技术的发展,这种轻量的Web App的方式会逐渐的得以广泛应用,
了解下Google出的这种技术,对于我们Web前端开发来说,是非常有意义的,希望以上能为大家带来帮助.

如果想查看google的技术文档还请FQ查看: https://developers.google.com/web/updates/2015/12/getting-started-pwa
这里还有一些关于PWA的资料收集: https://github.com/ljinkai/pwa-collection


posted @   张同光  阅读(175)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示