再见,电子。 您好台式机PWA

该材料的作者(我们今天将要翻译的翻译)说,他可能很着急,但他想谈论的至少是非常有趣的新闻。 我们正在谈论桌面渐进式Web应用程序,它可能会大大取代基于Electron的应用程序的位置。

图片

Chrome v70创新


Chrome(v70)的最新版本在Linux和Windows平台上支持Desktop Progressive Web Apps(PWA)。


Chrome中的桌面PWA支持

如果您查看支持的系统列表,则很明显其中没有MacOS。 但是,这仅在Chrome v72发布之前。


MacOS上的桌面PWA支持

重要的是要注意,尽管默认情况下在MacOS上未启用此功能,但可以使用适当的标志将其激活。 为此,请打开Chrome,转到chrome://标志,然后在此处找到该标志。 您也可以使用链接chrome直接转到该标志:// flags /#enable-desktop-pwas

什么是渐进式Web应用程序?


在此我们将不讨论有关PWA的具体细节。 这是 Google文档部分,您可以在其中阅读有关它们的信息。 为了亲眼看到PWA并尝试一下,请在iOS上打开适用于Android或Safari的Chrome(不过,此处不支持所有PWA功能),并查看以下示例。 以下是Google I / O '18对此主题的演讲。

什么是电子?


Electron是一个平台,允许开发人员使用JavaScript,HTML和CSS创建跨平台的桌面应用程序。 这里还使用了一些很棒的JavaScript库和框架。 这使Web程序员更容易进入桌面应用程序的开发。 近年来,基于电子的应用获得了极大的普及。 作为诸如Slack,VS Code,Atom,Discord之类的项目的一部分,已经投入了大量精力来开发使用Electron的应用程序。 如果您不熟悉这些项目,那么您绝对应该查看相关的应用程序和服务。 传统的桌面应用程序通常看起来笨拙,其界面元素看起来有些过时。 Electron无疑为桌面应用程序世界带来了美丽和优雅。

PWA与它有什么关系?


尽管电子应用程序是一个不断发展和发展的现象,并且其实现与Web应用程序的实现非常接近,但它们仍然存在一些缺点。 首先,此类应用程序使用自己的Chromium浏览器实例。 许多人知道Chrome需要多少内存才能运行。 现在,为了评估在同时启动多个Electron应用程序时系统中出现的情况,您需要获取它们的数量并乘以该内存量。 如果有兴趣,请打开一些Electron应用程序,并查看它们消耗了多少内存。

过度使用内存本身并不是很好,在这里我们必须补充,许多Electron应用程序以特定的方式与Node.js进行交互,而不必与相应的Web应用程序以相同的方式进行交互。

使用Electron会增加与支持较旧版本的程序以及设置应用程序更新过程相关的困难。

现在让我们谈谈桌面PWA。 想象一下看起来像用Electron编写的应用程序,这些应用程序也很方便使用,但安装起来很简单,而且在将材料从单个Web应用程序传输到客户端的过程中,它们的更新也没有问题。 感觉像Chrome为台式机PWA中的类似行为场景设置了标准。 当使用Chrome浏览器工作的用户访问某个网页,并且向其展示的应用程序符合组条件时,应用程序开发人员将能够为用户提供将其安装在其计算机上的功能。 提示如下所示。


PWA安装邀请

仅在浏览器beforeinstallprompt对象beforeinstallprompt事件之后,开发人员才能显示此提示。 安装该应用程序后,相应的图标将显示在桌面上。


PWA启动器图标

启动此类应用程序后,它会在没有常规控件的浏览器窗口中打开。 这样的应用程序被视为真实的桌面应用程序。


推出PWA

PWA示例


这是一个桌面PWA的示例,其屏幕截图如上图所示。 这是他在GitHub上的存储库。 为了安装此应用程序,您需要在Chrome中启用相应的标志,并在网站上花费至少30秒。

如前所述,为了被视为桌面PWA,Web应用程序必须满足一组特定要求 。 如果要创建和测试自己的桌面PWA,则可以将此存储库作为基础并考虑到要求。 如果对它们进行简要概述,则会得到以下信息:

  • 该应用程序必须通过HTTPS提供服务。
  • 它必须具有已安装的服务程序,并且至少具有一个fetch处理程序。
  • 它应包含格式正确的manifest.json文件。
  • 其页面应使用响应式设计技术进行设计。

其他例子


如果您使用的是MacOS,则PWA可能会认为您无法安装它们,并且它们不会向您显示安装它们的邀请。 如果在开发人员控制台上启用了适当的标志并进行修改,则可以使PWA显示安装提示。 这是Mac上已安装的一些现有PWA。

▍星巴克


星巴克在开发出色的PWA方面投入了大量资金。 他们的桌面应用程序确实令人印象深刻。


PWA星巴克

▍谷歌地图


这只是一个很棒的应用程序。 它可以完成自己的工作,并且不会特别给系统带来沉重负担,在快速工作和响应式设计方面有所不同。 要安装此应用程序,您需要设计并下载Google Maps移动网站。


PWA Google地图

▍推特


Twitter尝试开发移动PWA,而桌面版本可被视为对移动应用程序的有益补充。


PWA Twitter

总结


尽管桌面PWA周围已经产生了很多噪音,但您需要知道该技术仍处于起步阶段。 特别是,可以注意以下针对台式机PWA的开发方向:

  • 深层链接:从Chrome打开的链接会调用已安装的应用程序。
  • 应用程序图标上的通知:在桌面应用程序启动器图标上显示通知,就像在移动应用程序图标上一样。
  • 热键支持:侦听键盘事件以在热键应用程序中使用的功能。

一旦PWA的桌面开发技术充分开发,这些应用程序将成为当今基于电子的项目的重要竞争对手。

亲爱的读者们! 您打算开发台式机PWA吗?

Source: https://habr.com/ru/post/zh-CN429836/


All Articles