开发一个渐进式Web应用程序的7种工具

来源:设计前沿 作者:Vikas Agrawal 时间:2017-08-04

UX用户体验已经成为现代网络发展的焦点很长时间了。这受到几个因素的影响,包括页面加载速度、可读性、可用性和设计。但现在越来越多的用户喜欢使用台式机进行移动网页浏览,无论是网站还是小众博客,电子商务商店都应该优先考虑移动友好。

如今,您可以轻松应用针对移动设备的主题,并使用Google的移动设备适合性测试等工具,以获得有关如何优化网站的其他建议。但是,如果你想把事情提升到一个新的水平,你可以开发一个渐进的Web应用程序(PWA),为您的移动用户提供新鲜和令人难忘的新体验。

什么是渐进的WEB应用程序?
PWA利用现代网络技术实现类似应用程序的功能。与传统移动网站不同,PWA在加载新内容时不必刷新整个页面,也不需要互联网连接才能访问。它们也可以安装,这意味着用户可以通过添加主屏幕快捷方式轻松地重新使用它们。
进步的网络应用程序有可能成为移动网络的下一个重要的事情。这最初是由Google于2015年提出的,但是在这么短的时间内,它已经引起了很多的关注,因为它相对容易开发和应用程序的用户体验交付。
应用开发公司Arkenea的共同创始人-Rahul Varshneya 。
PWA是一个大项目,可能会在未来引领您的移动网络存在的方向。但是如果您对PWAs完全是新手,那么这里有7个工具和资源可以让您处于正确的轨道:
 
PWA.ROCKS
在开发PWA时,需要更深入地了解他们的能力。  
要查看PWA的行动,您可以参考PWA.rocks的几个类别的例子,包括商业,游戏,购物和社交。这将有助于您可视化未来PWA的外观。概念化您的PWA将为移动用户提供什么,您也可以从现有的示例中借鉴灵感。 
 
Knockout
Knockout是一个免费的开源工具,可以帮助您使用Model-View-View Model或MVVM绑定。这允许您通过让您定义由viewmodel属性控制的视图和声明性绑定来简化JavaScript UI编码的过程。
该平台纯粹基于JavaScript,它适用于所有主流浏览器和任何Web框架。Knockout图书馆也可以轻松地与现有网站集成,而无需大量重写。
 
PWABUILDER
创建PWA的最快方法是使用PWABuilder,并快速构建一个服务工作者,用于离线功能,通过在用户丢失互联网连接时从您的Web服务器拉取并提供“offline.html”功能。您还可以将您的PWA提交给Android和iOS设备的应用商店。
要使用PWABuilder,您只需要插入网站的URL,然后填写您的姓名,站点描述和首选图标等其他详细信息。您还可以轻松修改某些属性,如PWA的屏幕方向,语言和背景颜色。然后,平台将根据您提供的信息自动生成清单。
 
ANGULARJS
JavaScript通常是希望学习网页开发的学生学习的介绍性语言。如果您是有经验的Java或.NET开发人员,那么AngularJS是可用于Web应用程序的最佳JavaScript框架之一。即使如此,他们的网站提供了大量的指南,教程和资源,将帮助您了解平台的方式。
无论您是开发移动设备还是桌面设备,Angular v4.0的最新版本都提供了相同的环境。如果您认为Angular对您的需求太复杂,您可以选择针对UI开发定制的React -a JavaScript库。另一种选择是聚合物,它可以为您提供模板和其他可重用的组件,可以加快PWA开发过程。
 
5. GOOGLE DEVELOPERS
PWA不是自制博主或联属营销人员的DIY项目,但仍然可以用正确的资源完成。如果您已经拥有内容管理系统的经验,但对于开发Web应用程序却无能为力,那么您可以通过Google Developers获得基础知识, 这些资源库可帮助您了解如何编写代码。
Google Developers有关于PWAs如何工作,如何构建一个以及如何正确运行的全面教程。它还涵盖其他基础知识,例如启用“添加到主屏幕横幅”和使用HTTPS。
 
6.Webpack
Webpack是捆绑JavaScript应用程序资源的非常有用的工具,包括非代码资产(如字体和图像)。这些将被视为JavaScript对象,这反过来允许它们加载更快。该平台还使管理依赖性更容易。
请记住,Webpack有一个陡峭的学习曲线,这意味着您可以浏览几个小时的教程和指南。但是,他们网站上提供的学习资源和文档不是初学者。好消息是,Webpack在其他站点被广泛覆盖,包括Angular 4.0的文档部分。
 
7. GITHUB
最后,GitHub是一个社区驱动的网站,用于维护项目的仓库。它涉及范围广泛的与节目相关的主题,包括JavaScript和PWA服务人员。实际上,您可以在平台中找到PWA.rocks和Webpack存储库。这将有助于您加深理解,甚至有助于进一步发展。
今天,有一些涉及GitHub的PWA的存储库。您可以从这些项目中学习,或者在实验您的第一个PWA时启动自己的存储库。GitHub现在也具有项目管理功能,可以远程与其他开发人员无缝协作。  
 
结论
Progressive Web Apps是移动网络体验的未来,但目前尚不存在许多品牌。使用上述工具,您现在完全有能力创建出色的PWA并建立权威性的存在。请注意,PWA工具,资源和实践随主要在线浏览器不断变化的技术而发展。
设计前沿网原创翻译,如需转载请注明出自及链接