HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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:003182
用户头像

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

关注

评论

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

Nvm 安装新的 nodejs 版本

HoneyMoose

Habor 入门指南

Se7en

【Vue2.x 源码学习】第三十二篇 - diff算法-乱序比对

Brave

源码 vue2 8月日更

Vue进阶(二十五):<component>实现动态组件

No Silver Bullet

Vue 动态组件 8月日更

netty系列之:使用POJO替代buf

程序那些事

Java Netty nio 程序那些事

零代码上线小布对话技能:技能平台的实践与思考

OPPO小布助手

人工智能 自然语言处理 算法 零代码 语义理解

Node.js 实现存储服务的下载功能【包含前后端代码】

liuzhen007

8月日更

在线圆周率查询下载工具

入门小站

工具

架构实战营模块 4 作业

zlz

Linux之traceroute命令

入门小站

Linux

失败的小项目

箭上有毒

生活随想 8月日更

失败的小项目-Tiktok搬运

箭上有毒

8月日更

感恩架构实战营学习的一路陪伴、不断进度!

arctec

VSCode July 2021 (version 1.59) 更新

IT蜗壳-Tango

8月日更

JNI不正确的信号处理导致 JVM 崩溃问题分析

毕昇JDK社区

SpringBoot 日志配置(logback)

xcbeyond

springboot logback 8月日更

prometheus 语法

Rubble

Prometheus 8月日更

Windows 中 Node.js 中 nvm 的安装配置和使用

HoneyMoose

电商秒杀系统架构设计

arctec

手撸二叉树之数据流中的第 K 大元素

HelloWorld杰少

数据结构与算法 8月日更

HashMap面试中的12个点

4ye

Java 面试 后端 hashmap 8月日更

【Flutter 专题】72 图解极简自定义跑马灯 ACEMarquee

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 8月日更

架构实战营模块 5 作业

zlz

贡献数字力量 浪潮云洲赋能广州箱包皮具产业集群

工业互联网

Vue进阶(二十六):详解 router.push()

No Silver Bullet

Vue router 8月日更

自媒体培训行业水很深,入行新人要谨慎选择

石头IT视角

Linux Docker 中安装 Jenkins 并实现 Maven 工程自动化部署

陈皮的JavaLib

Java maven jenkins 8月日更

从0开始的TypeScriptの四:接口Interfaces · 上

空城机

JavaScript typescript 大前端 8月日更

小手哆嗦一下,就能用 Python Django 实现一个微型博客系统

梦想橡皮擦

8月日更

Java环境配置:Eclipse简单上手

Bob

Java eclipse 8月日更

Regan Yue带你一起学习微软AZ-900认证的有关知识「 第Ⅱ章」

Regan Yue

云计算 微软 后端 8月日更

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