用Visual Studio构建渐进式网络应用程序

简体中文 English

去年，我写了一系列关于尝试build a fast, optimized web app与本地应用程序竞争。

虽然它有潜力，但我仍然没有达到我所希望的速度。

然后，我听说了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

  1. 下载压缩文件。
  2. 将压缩文件放入导出的模板文件夹中，以便Visual Studio 2015可以找到它。我有视窗10，所以它们被放在:
    1. C:\Users\<user>\Documents\Visual Studio 2015\My Exported Templates
    2. C:\Users\<user>\OneDrive\Documents\Visual Studio 2015\Templates\ProjectTemplates
  3. 运行Visual Studio。
  4. 通过单击创建新项目File » New Project。
  5. 选择下面的项目。网络核心，并选择天气。

PWA Directory Structure

按F5键查看成品。

VS2015 PWA快速浏览

这是项目结构的快速浏览。

Weather PWA Project Template Screenshot

我决定使用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了吗？您使用了什么样的集成开发环境？请在下面发表您的评论。

进一步阅读