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(转载)

相关文章
|
6月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
3月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
350 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
存储 监控 安全
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
|
6月前
|
XML 安全 前端开发
一行代码搞定禁用 web 开发者工具
在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 Web 开发者工具面板,今天推荐一个不错的 npm 库,可以帮助开发者更好地保护自己的网站源码,本文将介绍该库的功能和使用方法。 功能介绍 npm 库名称:disable-devtool,github 路径:/theajack/disable-devtool。从 f12 按钮,右键单击和浏览器菜单都可以禁用 Web 开发工具。 🚀 一行代码搞定禁用 web 开发者工具 该库有以下特性: • 支持可配
407 22
|
5月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
174 1
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
227 7
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
10月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
700 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
9月前
|
中间件 关系型数据库 数据库
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
282 19
|
10月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
450 17
使用Web浏览器访问UE应用的最佳实践

热门文章

最新文章