写点什么

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

  • 2016-05-12
  • 本文字数:1048 字

    阅读完需:约 3 分钟

决定为哪个平台构建应用一直是个挑战。开发人员应该把时间和金钱花在原生实现上,还是完全专注于 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

2016-05-12 19:003476
用户头像

发布了 1008 篇内容, 共 419.4 次阅读, 收获喜欢 346 次。

关注

评论

发布
暂无评论
发现更多内容

循序渐进带你全方位剖析原型链

加百利

大前端 原型链 自学 8月日更

为什么宁可提拔一个新同事当领导,也不提我这个来十年的老员工呢?

非著名程序员

认知提升 个人提升 职场成长 8月日更

php 精度问题

一个大红包

8月日更

“善于治”和“以善治”:华为云Stack在智慧城市的十年踪迹十年心

脑极体

C++20 四大特性之一:Module 特性详解

网易云信

后端

架构训练营 - 模块三 - 作业

姑射仙人

#架构实战营

关于区块链的学习笔记(三)

姬翔

网络安全界基于知识的识别和映射提出网络空间资源分类明细

郑州埃文科技

未来的价值互联网主要建立在NFT上

CECBC

极光开发者周刊【No.0806】

极光GPTBots-极光推送

Serverless与WebSocket的聊天工具

刘宇

Serverless websocket

区块链DAPP钱包开发|波场DAPP开发钱包

Geek_23f0c3

区块链 DAPP智能合约交易系统开发 波场DAPP

波宝TronLink钱包模式系统开发|波宝钱包模式功能介绍

量化系统19942438797

Vue进阶(二十): 请求方式详解

No Silver Bullet

ajax Vue axios 8月日更 请求方式

毕业总结

Presley

一文看懂低代码的现状、打法、机会和挑战

小博

中台 云原生 PaaS SaaS/IaaS/PaaS 低代码开发平台

当新零售遇上 Serverless

Serverless Devs

阿里云 Serverless 云原生

ipfs存储服务器的优势在哪里?ipfs怎么挖矿?

IPFS怎么挖矿 ipfs存储服务器的优势

Activiti工作流---简单开发平台,请假实例演示

金陵老街

Java SpringBoot 2 Vue 3 Activiti

你知道Kafka创建Topic这个过程做了哪些事情吗?(附视频)

石臻臻的杂货铺

大数据 kafka 源码 运维

生产环境全链路压测-影子库落地

国隆

关于区块链技术的学习笔记(一)

姬翔

如何改进新员工的入职体验?

石云升

用户体验 入职 体验设计 8月日更

Golang 实现 RTP

声网

音视频 rtp

到底该怎么定义 To B SaaS 产品

姜雨生

SaaS 标准化 To B业务 行业深度

全国有待形成数据资产市场 区块链、人工智能或成重要支撑技术

CECBC

关于区块链的学习笔记(二)

姬翔

高效率程序员都在用什么工具?

狐哥说技术

效率工具

碳中和将为中国带来什么? 绿色转型如何驱动经济跃升?

CECBC

番外4. Python OpenCV 中鼠标事件相关处理与常见问题解决方案

梦想橡皮擦

8月日更

JavaScript中的 async 和 await

devpoint

Promise Async await 8月日更

Angular移动工具集要让Web应用有原生的感觉_JavaScript_David Iffland_InfoQ精选文章