跳到主要内容

Web应用程序的未来

自静态页面开始以来,网站和应用程序可用的功能发生了很大变化。即使在最近的时代,我们已经看到了许多重大进步:原生动画,简单灵活的布局(最后),真实的3D图形和流媒体视频,仅举几例。但还有更多工作要做,特别是如果网络要与本地平台有效竞争。

规范编写者和浏览器工程师一直在研究使本机平台及其应用程序如此受欢迎的功能,了解网络如何匹配,并努力填补网络平台功能的任何漏洞。从本质上讲,它可归结为一些杀手级功能,其中一些功能非常简单,其他功能则不那么简单。以下内容并非详尽无遗,但涵盖了主要内容。原生应用程序是:

  • 安装:让设备上的应用程序可用并与底层操作系统集成感觉很好 - 如果你有一个很好的小应用程序,那就更好了应用程序图标在您的主屏幕上,应用程序全屏或以自己的Chrome打开。这是简单的事情,对吗?
  • 可见:我们网络书呆子并不喜欢封闭的应用程序商店,但我们不能否认他们改善了查找应用程序的体验 - 尽管有些人认为即使是最好的封闭式应用程序商店也因为过度拥挤而失败。
  • 离线:网络连接在世界许多地方都无处不在,但不可能在100%的时间内依赖它。由于你处于离线状态而根本无法使用应用程序令人讨厌,而且不再那样了。
  • 从事:一旦你有一个用户使用你的应用程序,一半的战斗结束了。但是,如何让他们参与并掌握最新的更新?本机应用程序开发人员长期以来一直享受更新用户的推送通知。
  • 迅速:本机代码比Web代码表现更好,或者有人说。但正如你稍后会读到的那样,差距正在迅速缩小。

但是,网络也有一些特别的好处。它是:

  • 可链接:可以链接到给定URL的Web应用程序。
  • 响应:使用媒体查询等工具,您可以创建适用于各种外形(方向,分辨率,屏幕大小等)的复杂应用布局。实际上,网络是默认的网站布局模型具有固有的响应性,这使得它特别适合处理文本。
  • 数据中心:使用HTML来提供语义和结构,Web非常适合处理数据。
  • 进步:您可以编写Web应用程序,为现代浏览器提供最新的闪亮优势,同时仍然可以在旧版浏览器上提供可接受的体验。
  • 安全:Web通过其单一来源安全模型和HTTPS为应用程序提供安全功能。通过诸如此类的举措,创建安全的Web应用程序变得更加容易我们加密吧

Nolan Lawson’s Pokedex.org provides a great example of a progressive web app that is also a huge amount of fun!

诺兰劳森的Pokedex.org提供了一个很好的例子,一个渐进的网络应用程序,也是一个巨大的乐趣!

我们想要创建一个允许在本机应用程序中找到的杀手功能的网络,但不能牺牲它已经做得非常好的基本功能。这一运动被称为渐进式网络应用程序,并受到包括Mozilla和Google在内的组织的支持。

稍后我们将看看能够实现这些进步的新技术,但首先让我们先谈谈帮助网络赶上原生的其他方法。

注意:有趣的是,本机应用程序平台正在努力缩小与Web的差距,从另一个方向。例如,使用Rube Goldberg-esque装置可以实现深层链接。

之前发生了什么

具有原生功能的应用程序并不是一个全新的概念。首先,在各个地方出现了许多打包的“网络”应用格式 - 例如Chrome应用 - 允许将经过验证的软件包安装在设备上以便脱机使用,并且有权访问设备硬件等。

我们有一段时间所谓的“混合应用”工具,例如Cordova和Electron。这些允许开发人员使用Web技术编写应用程序,然后将其转换为可在iOS,Android等上运行的本机应用程序。像这样的工具非常流行,但它们需要创建和分发几个版本的应用程序,并且这些应用程序可以支持的功能存在一些限制。正如我们所知,并不是“一次编写,随处部署”。

离线优先运动也很重要。倡导者已经尝试并传播了创建默认情况下将脱机运行的Web应用程序的想法,然后连接到网络以仅在可用时接收更新。

在继续之前,值得一提的是单页应用程序运动。在此,一个HTML页面充当应用程序的容器,并使用XHR(或类似)动态加载不同的视图,目的是使Web应用程序更快捷,更具响应性。这是由Ember.js和AngularJS等流行框架支持的那种应用程序模型,以及离线优先,构成了大部分渐进式Web应用程序的基础。

Kana is a useful web app for anyone wishing to learn Japanese Kana characters

Kana是一个有用的网络应用程序,适合任何希望学习日语假名字符的人

安装和发现

我们将看到的第一个渐进式Web应用程序领域是安装和可发现性。这可以使用Web应用程序清单实现,该清单是一个JSON文件,其中包含有关Web应用程序的信息,例如打开应用程序时要使用的图标,名称和显示模式:

{“name”:“我的示例应用”,“short_name”:“我的应用”,“start_url”:“。/?utm_source = web_app_manifest”,“display”:“standalone”,“icons”:[{“src” :“images / touch / homescreen48.png”,“尺寸”:“48x48”,“类型”:“image / png”}] ...

这可以用于将应用程序更多地与底层操作系统集成(主屏幕上的图标,打开全屏而不是浏览器应用程序,等等),此外还可以在应用程序列表中提供更好的可发现性 - 例如,它将出现在搜索中引擎结果。

Opera和Chrome已经在移动设备上使用此信息进行平台集成,很快就会支持Firefox。

Tapping on a desktop icon to open your favourite app is a key part of native app UX; the web app manifest is bringing this to web apps, too

点击桌面图标打开您喜欢的应用程序是本机应用程序用户体验的关键部分; Web应用程序清单也将此带到Web应用程序中

离线

网络的离线问题持续了相当长的一段时间,考虑到乍一看似乎有多么简单。问题在于实施有效的离线技术集远非简单。离线存储应用程序的数据并不是一个太大的问题 - 现代浏览器已经有了像IndexedDB这样的API一段时间了,早在IE8上就支持Web存储。

另一方面,资产存储是一种不同的球类游戏。有一段时间看起来AppCache似乎要解决这个问题,但事实证明并非如此。假设应用程序的设置方式太多了,开发人员对所发生的事情没有足够的控制权。

快进到现在,我们有服务工作者; Firefox,Chrome和Opera中提供的一项新技术,允许开发人员以与AppCache相同的方式编写离线应用程序,此外还有更多功能。它是一个更低级别的API,因此语法要复杂得多,但它确实为开发人员提供了超出他们希望服务工作者交互如何工作的能力。

Harald Kirschner’s chromatic tuner app is a nice progressive example that works well on desktop or a mobile device

Harald Kirschner的半音调音器应用程序是一个很好的进步示例,适用于桌面或移动设备

Service Worker采用以单独文件编写并在特殊工作线程中运行的一大块JavaScript形式。它充当代理服务器,位于网络和您的应用程序(和浏览器)之间。当请求资产时,服务工作者可以拦截它并自定义响应,然后将其发送回浏览器以供使用。

要使用Service Worker,首先需要通过运行来注册它Navigator.serviceWorker.register()在主线程中。

navigator.serviceWorker.register('sw.js')。then(function(reg){//做一些初始化应用程序});

然后在Service Worker线程中使用安装事件侦听器安装应用程序。这通常涉及使用Cache API存储所有应用程序的基本资产(顺便提一下,它可以独立于Service Workers使用):

this.addEventListener('install',function(event){event.waitUntil(caches.open('v1')。then(function(cache){return cache.addAll(['/ sw-test /','/ sw -test / index.html','/ sw-test / style.css','/ sw-test / app.js']);}));});

接下来,在Service Worker中使用fetch事件侦听器在发生请求时触发代码。这允许开发人员自定义生成的响应。因此,开发人员可以在安装步骤中缓存对变化不大的文件(例如UI shell)的每个请求,然后在请求时将其脱机存储在缓存中,而不是网络版本。 Bingo,离线应用程序!

this.addEventListener('fetch',function(event){var response; event.respondWith(caches.match(event.request).catch(//编写代码来处理所请求的文件//尚未离线存储的情况在缓存中);});

值得注意的是,Service Workers只能通过HTTPS连接工作。

The above diagram illustrates the lifecycle of a Service Worker installation

上图说明了Service Worker安装的生命周期

用户重新参与

原生平台长期依赖于推送消息传递 - 即使应用程序未打开,也能够将消息从服务器推送到客户端以告诉用户某些内容已发生变化,或者有新内容可用。也许新闻应用想与用户分享突发新闻?或许你的神奇宝贝很无聊并想要一些关注?好吧,多亏了网络Push API,我们现在也可以使用Web应用程序。

要使用Web推送,必须在应用程序的页面上安装并激活Service Worker,如前所述。然后,我们订阅推送服务。这可以通过使用来完成ServiceWorkerRegistration.pushManager.subscribe(), 如下所示:

navigator.serviceWorker.ready.then(function(reg){reg.pushManager.subscribe({userVisibleOnly:true}).then(function(subscription){//根据订阅更新UI等//更新订阅状态服务器上的当前用户var endpoint = subscription.endpoint; var key = subscription.getKey('p256dh'); updateStatus(endpoint,key,'subscribe');})});

此方法返回使用订阅对象解析的promise。此对象具有endpoint属性(包含指向推送服务器的唯一URL)和a信息getKey()方法,可用于生成用于加密目的的公钥。您需要访问这两个,然后将结果发送到您应用的服务器。

要在服务器上发送推送消息,请向端点URL发出请求。这会导致推送服务器向应用程序的服务工作者发送消息。如果要将数据与推送消息一起发送,则必须使用密钥对其进行加密。推送消息数据目前仅适用于Firefox,但基于Blink的浏览器不应远远落后。

Service Worker使用推送事件处理程序侦听推送消息。触发推送事件后,您可以使用事件对象的data属性访问消息数据。然后,您可以响应您喜欢的消息 - 例如通过触发通知,或者将频道消息发送回主线程以某种方式更新您的应用。

self.addEventListener('push',function(e){var obj = e.data.json(); //以某种方式响应推送消息//例如通知或频道消息});

注意:大多数服务工作者技术系列(推送等)在Chrome和Firefox之间享有合理的支持,其他浏览器会仔细考虑它们。推送数据仅在撰写本文时适用于Firefox。

This app from Mozilla provides progress information on the implementation of modern web APIs in browsers

Mozilla的这个应用程序提供了有关在浏览器中实现现代Web API的进度信息

性能

长期以来,性能一直是Web应用程序和本机应用程序之间的痛点,本机开发人员忽视了Web的性能。但是现代的差距明显缩小,浏览器中的JavaScript引擎要快得多,浏览器中的代码也很快,可以运行动画和3D图形,这些代码可以越来越多地利用可用的GPU功能。

此外,我们现在能够使用Emscripten等技术将本机代码(例如C ++)转换为JavaScript。当我们在这里说JavaScript时,我们讨论的是asm.js,这是一个高度可优化的JavaScript子集,可以利用AOT编译技术提供接近本机的性能。这已经证明非常流行,不仅支持Firefox,还支持Chrome和Edge,asm.js / web已被添加为流行3D引擎Unity和Unreal的发布目标。

下一代正在进行中 - 许多浏览器厂商正在合作开发和实施WebAssembly,这将与Emscripten做类似的事情,但是以更快,更标准,更高性能的方式。

它将使用一种名为wasm的格式,而不是asm.js.鉴于它将具有一个具体的规范,我们应该能够依赖编译器输出有效的wasm,然后浏览器一致地运行该输出,无论哪个编译器创建它。关注此空间。

结论

正如您所看到的,网络正在不断发展,其中一些令人兴奋的新技术旨在解决我们心爱的平台传统上遇到的一些其他缺点,以及更好的性能。这些将允许网络应用程序在本机应用程序旁边骄傲,同时不会忽视使网络开始的好处。

这篇文章最初出现在网络杂志第282期;在这里买



翻译字数超限