Angular移动工具集要让Web应用有原生的感觉

简介:

决定为哪个平台构建应用一直是个挑战。开发人员应该把时间和金钱花在原生实现上,还是完全专注于Web,或者是某种组合?新增加的Angular移动工具集(AMT)使用新的Web平台API让Web应用有了更多原生的感觉,希望可以为做这种决定的人减轻一点压力。

在ng-conf 2016大会上,Jeff Cross和Alex Rickabaugh花时间介绍了AMT以及它如何帮助开发人员让Web应用的行为更像原生应用。Cross做了总结:

“Progressive Web Apps”是以一些已经在某些Web浏览器中实现了的新兴Web标准为基础的最佳实践和技术。对于一些普通的Web应用,你使用新的平台API添加新的功能,让它们更加强大。它们可以在任何平台上工作,但最好是工作在它们可以更多地利用新的技术和API的平台上。

这些技术的主要目标是让应用可以立即加载、离线工作、可安装,并提供通知功能。通常,原生应用默认就具备这些特性,但在Web上实现这些特性并不容易。在这四个特性中,Cross和Rickabaugh重点介绍了前三个以及对应每一个特性的技术:

App Shell(立即加载) Service Worker(离线) Web App Manifest(可安装)
Cross说,App Shell是指“包含动态内容的静态UI,通常由一个工具栏和某种导航……供所有应用程序视图使用的东西。”在离线编译过程中,AMT部分地依赖Angular Universal生成静态内容。

原生应用的其中一个好处是,一旦安装,即使没有网络,也总是可以保证最低限度的使用。AMT依赖Service Worker在后台下载应用代码,因此,应用可以脱机工作。一个意外的结果是,在后续加载时,应用的启动速度更快,因为它已经有了代码,省去了网络和下载调用。

使用App Shell和Service Worker可以将首次同示例应用交互的时间从2356毫秒减少到128毫秒。

最后,Rickabaugh说,Web App Manifest是“一个标准,允许你指定应用程序的元数据。”其用途是允许将Web应用“安装”在设备上。运行这些应用中的任何一个,其外观和感觉都跟原生应用一样,因为浏览器边框可以隐藏。

最大的问题是有关progressive web apps的这三项技术中有两项在Safari或Edge浏览器中无效。

App Shell之所以有效是因为它在应用加载前会渲染成HTML传给客户端。Service Worker是一项尚处于发展中的Web平台开发技术,随着时间推移,会有更多的浏览器支持。Web App Manifest只在Android上有效。iOS目前有自己的方式让应用出现在用户的主界面上,而不需要浏览器边框。

本文转自d1net(转载)

相关文章
|
9天前
|
XML 存储 Java
11:Servlet中初始化参数的获取与应用-Java Web
11:Servlet中初始化参数的获取与应用-Java Web
22 3
|
1天前
|
缓存 监控 前端开发
探索现代Web应用的性能优化实践
【5月更文挑战第10天】随着互联网技术的飞速发展,用户对Web应用的响应速度和流畅度要求越来越高。性能优化已成为前端开发中不可或缺的一环。本文将深入探讨Web应用性能优化的关键策略,包括代码分割、资源压缩、缓存利用、服务端渲染等技术手段,以及如何通过工具进行性能监测和分析。我们将从原理出发,结合实际案例,帮助开发者构建更快速、更高效的Web应用。
|
9天前
|
设计模式 存储 前端开发
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
24 4
|
9天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
23 3
|
9天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
22 4
|
10天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
10天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
10天前
|
缓存 前端开发 JavaScript
探索现代Web应用的性能优化策略移动应用开发的未来之路:跨平台与原生之争
【4月更文挑战第30天】随着互联网技术的迅猛发展,Web应用已成为信息交流和商业活动的重要平台。用户对Web应用的响应速度和稳定性有着极高的期望,这促使开发者不断寻求提升应用性能的有效途径。本文将深入探讨针对现代Web应用进行性能优化的关键策略,包括前端优化、后端优化以及数据库层面的调优技巧,旨在为开发者提供一套全面的优化工具箱,帮助他们构建更快速、更高效的Web应用。
|
10天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
11天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。

热门文章

最新文章