虽然它有潜力,但我仍然没有达到我所希望的速度。
然后,我听说了Google's initiative for a faster web(2015年12月),他们的方法是使用渐进式网络应用,并更多地关注移动网络应用。
但是如果你要写进步网络应用,你需要知道它们是什么和不是什么。
什么是渐进式网络应用?
渐进式网络应用程序使用网络技术(CSS、HTML和JavaScript)来编写速度极快的应用程序,这些应用程序具有以下特征:
- 渐进-适用于每个用户,无论其浏览器如何
- 反应灵敏——这款应用适用于任何外形,无论是台式机、移动设备还是平板电脑。
- 连接独立-允许用户使用网络应用,即使它是离线的。
- 本地外观-行为和感觉就像一个本地应用程序,但严格来说是基于网络的。
- 安全-始终通过HTTPS向客户提供服务。
- 可发现性——即使它是一个“应用程序”,它也可以被编入搜索引擎。
- 可重新接合-允许通过推送通知等功能重新接合。
- 零部署麻烦——允许用户将网络应用添加到他们的主屏幕上,而没有应用商店的问题。
- 链接友好-允许你使用一个Url来刷新。
这些是我在我的优化系列中追求的构建快速网络应用的特征。
但是为什么每个人都对进步网络应用如此感兴趣呢?为什么不创建一个本地应用程序呢?
根据2012年进行的一项调查,安装一个本地应用程序有一个缺点。当消费者试图使用本地应用程序时,every step costs you 20% of your users。似乎有太多的步骤。台阶越少越好。
似乎总会有一场关于哪一个更好的争论:本地对混合对网络。因为这是最容易实现的,也是最划算的,所以我总是站在网络一边。
从模板开始
我来帮你做个模板样本。
当我使用Visual Studio 2015时(网络风暴紧随其后),我使用了简单的天气预报网络应用程序,并根据它制作了一个项目模板。网络核心1.1。
Download the Weather PWA Project Template for Visual Studio 2015
- 下载压缩文件。
- 将压缩文件放入导出的模板文件夹中,以便Visual Studio 2015可以找到它。我有视窗10,所以它们被放在:
C:\Users\<user>\Documents\Visual Studio 2015\My Exported Templates
C:\Users\<user>\OneDrive\Documents\Visual Studio 2015\Templates\ProjectTemplates
- 运行Visual Studio。
- 通过单击创建新项目
File » New Project
。 - 选择下面的项目。网络核心,并选择天气。
按F5键查看成品。
VS2015 PWA快速浏览
这是项目结构的快速浏览。
我决定使用ASP.NET MVC核心应用程序来展示任何框架都可以创建一个进步的网络应用程序。
这个项目模板的另一个好处是能够在以后将一个WebAPI添加到应用程序中,供服务工作人员(service-worker.js)使用。
有了新的。目录结构提供了更客户端的、开源的外观和感觉,这使得开发渐进式网络应用程序更加容易。
对于PWA,所有操作都发生在wwwroot文件夹中。您有一个manifest.json和service-worker.js以及js/app.js文件。
此外,如果您注意到,我们在项目中没有使用任何JavaScript框架。大多数JavaScript库都是350K或者更大。
谷歌建议普华永道应该加载最少量的JavaScript,以便快速加载。只使用你需要的。
结论
每个人都在走向移动化,随着谷歌推广进步网络应用和加速移动页面,他们正试图让互联网整体上变得更快。
我希望这提供了一个简单的方法,让你使用Visual Studio 2015轻松进入渐进式网络应用。
我也在考虑为未来的职位和奥瑞丽亚一起建立一个公共工程部。
你已经创建了一个PWA了吗?您使用了什么样的集成开发环境?请在下面发表您的评论。
进一步阅读
- Progressive Web Apps(谷歌)
- Your First Progressive Web App-天气网络应用
- Google's Codelabs进步网络应用
- A Beginner's Guide to Progressive Web Apps-粉碎杂志
- Progressive Web AMPs-粉碎杂志
- Lighthouse-渐进式网络应用的审计、性能指标和最佳实践
- Progressive Web Apps Checklist-谷歌
- Best Practices-谷歌