BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 David Iffland 关注 4 他的粉丝 ,译者 谢丽 关注 9 他的粉丝 发布于 2016年5月13日. 估计阅读时间: 3 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

决定为哪个平台构建应用一直是个挑战。开发人员应该把时间和金钱花在原生实现上,还是完全专注于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目前有自己的方式让应用出现在用户的主界面上,而不需要浏览器边框。

感兴趣的读者可以在YouTube上观看完整视频

查看英文原文Angular Mobile Toolkit Tries to Make Web Apps Feel Native

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这。。技术好超前啊。。 by 孙 庚泽

在尚处于研发阶段的技术之上开发产品,然后等技术正式投入生产时,就能抢得先机,好想法!

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT