也许你遇到过一个网站建议“将此安装为web应用程序”,就像我最近在谷歌Meet网页上所做的那样。这是一个可以得到渐进式Web应用(PWA)。Meet PWA最近才在一些地方上市web浏览器但其他几家谷歌服务多年来一直提供这一选项。其他类似应用程序的网站,如Outlook、Spotify和Instagram,都是成熟的PWA处理网站的好例子。让我们深入研究这些PWAs到底是什么,如何开始使用它们,以及它们提供了什么好处。
什么是渐进式Web应用程序?
网络越来越像应用程序。网站可以发送通知,离线工作,将数据存储在本地缓存或持久数据库中,并在后台运行。许多网站更像应用程序,而不是纯粹的信息网站。进步网络应用标准为网站提供了一个公平的机会更多的就像独立的应用程序一样,通过丢弃只会使界面混乱的浏览器元素。
渐进式Web应用程序利用了与当今先进网站相同的技术,包括HTML、CSS和JavaScript。但是他们也使用一些更新的和不太常见的web标准,包括web应用程序清单(用于定义应用程序的名称、图标、URL、颜色和配置)和服务工作人员(在新窗口打开),允许PWAs在没有互联网连接的情况下离线运行。
你可能想知道为什么这个术语进步开始发挥作用了。它源于一种叫做渐进增强(在新窗口打开)。在这种策略中,开发人员首先关注主要的内容和功能,然后在浏览器和平台提供更多边缘功能的情况下添加额外的功能。与渐进式增强相关的是响应式网页设计,其中内容被设计为针对特定平台(如移动或桌面设备)调整大小。
遗憾的是,我最喜欢的浏览器之一Firefox在桌面上不支持PWAs,但它在Android上支持。(创新的Opera网络浏览器也是如此。)Mozilla一直致力于一个项目,将其添加到其优秀的,privacy-respecting浏览器但该组织宣布停止这项努力。人们可以希望这种情况在未来的某个时候会有所改变。
与此同时,让我们来看看使用PWAs可以获得什么(以及缺点),如何在多个平台上安装它们,以及哪些是我最喜欢的。
PWAs的优点和缺点是什么?
如前所述,PWAs可以让你专注于一个类似于应用程序的网站的核心部分,而不需要你通常在浏览器中看到的所有浏览器界面和窗口边界。你只会看到一个菜单——应用程序的网站菜单——而不是同时看到浏览器的菜单、搜索框和工具栏。这些浏览器元素有时是不必要的干扰,只会增加混乱。
您可能还会发现PWAs包括更多的功能比安装的应用程序。“怎么可能呢?”你会问。嗯,许多网站都在不断更新,而应用程序只有在你安装更新时才会更新。通常,一个网络服务首先为其网站推出新功能,然后才将其添加到其独立的应用程序中。
渐进式Web应用程序的其他优点是,它们比本地应用程序更轻量级,并且与平台无关。换句话说,开发人员不需要为移动和桌面开发不同的应用程序——只要平台上运行支持PWAs的浏览器。在Windows上,不需要注册表混乱或辅助代码模块。一名开发者指出,Twitter Lite PWA占用了大量资源只有3%的存储空间(在新窗口打开)这是其原生安卓应用程序的要求。这对最终用户和开发人员都有好处,稍后我们将看到这一点。
最后,PWAs避开了手机应用商店,因为后者可能会受到限制,特别是对于那些必须向平台提供商付费的开发者来说。对于最终用户来说,这意味着安装非常快速和简单。
没有乌云就没有一线希望
PWA的一个缺点是,应用程序在本质上仍然是一个网站,尽管许多应用程序被设计为离线运行,但有些应用程序在没有连接的情况下无法完全运行。然而,这种网络基础有时是一个优势:你可以点击浏览器刷新热键(Windows上是F5, macOS上是Command-R)来重新加载一个讨厌的网站应用程序,而一个已安装的程序没有响应则更令人痛苦,通常需要重新启动。
一些PWAs还要求你经常登录,就像你在网站上登录一样,在网站上,大多数应用程序在你启动它们时才开始运行。有某些类型的应用程序不适合PWAs。原生应用程序编码到你的系统金属提供更快的性能:你不会想运行一个AAA级视频游戏或视频编辑器作为一个网站。
如果你的设备上同时安装了同一服务的应用程序和PWA,可能会导致在选择你想要的应用程序时出现混乱。对此,我的建议是:卸载原生应用;这可能会节省系统资源。最后,需要注意的是,就像浏览器窗口一样,你可以让同一个web应用的多个实例同时运行;这可以被看作是一个加号(如果你想在应用程序中有多个内容集),也可以被看作是一个减号(如果你对运行同一个应用程序的多个Windows感到困惑)。
PWAs的另一个问题是可发现性。由于没有PWA应用商店,所以很难知道哪些网站可以作为这类应用安装。体验也取决于开发者实现PWA功能的情况——有些提供清晰的设置和使用体验,而有些则没有。
你应该使用哪种PWAs ?
某些类型的网络应用程序非常适合用作pwas——流媒体音乐、通信和社交媒体应用程序都是不错的选择。我一直在运行的两个pwa是Spotify以及Outlook的网页版,但原因截然不同。
首先是Spotify:我偶尔会在Windows 10的应用程序和功能设置页面上看到Spotify占用了超过GB的硬盘空间。我想知道为什么有必要这样做,因为我不需要在播放每首歌的时候都下载下来。切换到PWA后,应用程序占用不到5MB的空间。
我使用Outlook Web而不是Windows Mail应用程序,只是因为它提供了更多的可靠性、速度和功能。有传言说微软将用PWA版本的变种取代Windows 10邮件应用程序,但就我而言,这不会很快发生。
Twitter是PWA使用的另一个很好的候选者,但它已经在大多数平台上提供了优秀的本地应用程序。我开始使用Twitter作为一个PWA,因为Windows商店应用程序不允许我在个人账户和工作账户之间轻松切换,而网页版本可以。谷歌见面,SkypeZoom也都可以作为渐进式Web应用程序安装。
也许有一天你安装了一个应用程序,却没有意识到它是一个PWA,尤其是现在Windows正朝着将它们包括在微软商店、开始菜单程序列表以及卸载普通应用程序的“应用程序和功能”部分的方向发展。Chrome OS已经在其应用商店中包含了PWA。
如何安装渐进式Web应用程序?
pwa的一大优势是安装简单,而且对于支持pwa的浏览器(如Chrome和Edge)来说,安装过程会越来越简单。在PWA方面,苹果处于一个特殊的位置:你可以在macOS上安装PWA除了在Safari浏览器;在iOS系统中,可以安装PWAs只有在Safari。以下是在每个主要操作系统上安装PWA所需要做的工作(按顺序排列)受欢迎程度(在新窗口打开)).
在Android上安装PWAs
Chrome浏览器:对于完全提供PWA功能的网站,你会在Chrome主菜单中看到“安装应用程序”选项。一旦你选择了这个选项,应用程序图标就会出现在你的主屏幕上。(请注意,对于不提供PWA功能的网站,您可以选择添加到主屏幕。)长按选项仍然包括卸载,但下面有一个提示选项是站点设置——在商店安装的应用程序中看不到这个选项。
在Firefox中:对于可以转换为PWAs的站点,Firefox的菜单有一个简单的安装选项。点击此选项后,您将看到“添加到屏幕”对话框。Firefox创建的PWAs的主屏幕图标在主应用程序logo的右下方有一个小的橙色Firefox logo。与chrome创建的应用程序一样,你只需从长按上下文菜单中选择卸载就可以删除一个。不像那些在Chrome中创建的,你看不到网站设置选项,为一个更真实的应用程序的感觉。
在Windows上安装PWAs
在边缘:默认的Windows网络浏览器为在微软的浏览器上安装PWA提供了最佳选择桌面操作系统。这是因为它把应用程序放在你的开始菜单中,就像你用正常方式安装的任何其他应用程序一样(通过下载的程序安装程序或从微软商店应用程序安装)。下面是它的工作原理:
导航到要作为PWA安装的网站。
如果应用程序能够作为PWA安装,你可以点击地址栏右侧的图标,看起来像三个正方形和一个加号(悬停文本是“应用程序可用。安装(应用程序名称]),或者你也可以从3点溢出菜单中选择应用程序,然后点击安装[应用程序名称]。对于某些pwa,安装框会自动弹出。
就是这样。你的新应用出现在“开始”菜单中,在任务栏中有一个独特的图标(不是“边缘”图标),还可以转换成桌面快捷方式。如果你想卸载PWA,可以从开始菜单的右键菜单、Windows的应用程序和功能设置页面或Edge的管理应用程序页面进行卸载。
Chrome浏览器:与Edge一样,Chrome在地址栏中也有一个按钮,会弹出提供PWA功能的网站。(注意隐私和加密货币浏览器Brave有PWA支持,几乎与Chrome相同。)
点击地址栏的“安装App”按钮或选择“安装”[应用程序名称]从右上方的三点溢出菜单。
在此之后,你会看到应用程序没有浏览器边框,并且在开始菜单中有一个图标。请注意,你只能从它们的窗口或Chrome浏览器中卸载Chrome创建的PWAs,而不能从Windows的设置中卸载。如果从“开始”菜单中选择“卸载”,PWA会毫无帮助地将您带到旧的“程序和功能”控制面板。
iOS和iPadOS上安装PWAs
如上所述,Apple只允许Safari在中创建PWAsiOS而且iPadOS-第三方浏览器被排除在外。Safari没有使用这些术语安装而且应用程序,就像所有其他支持PWAs的浏览器一样。要在iOS或iPadOS上安装,请加载支持pwa的站点,选择屏幕底部的“共享”向上箭头,然后选择“添加到主屏幕”。注意,你可以对任何网站做同样的事情,但你不会得到一个真正的PWA的离线功能。
当我为Instagram创建PWA时,图标和应用程序看起来与app Store版本相同,但长按菜单中没有“删除应用程序”选项,而是“删除书签”选项。请注意,PWA图标不会出现在iOS 14的应用程序库中,所以你在苹果移动设备上使用PWA无法获得像在其他平台上那样丰富的应用体验。考虑到苹果公司对开放系统的敌对态度,我想这应该不是什么大意外。
在macOS上安装PWAs
在macOS在美国,安装PWA和在Windows上一样,但是默认的Safari浏览器没有提供将站点安装为PWA的方法。你的新应用会出现在Launchpad中,但不会出现在Applications Finder文件夹中。
用Chrome或Edge创建的应用都有一个顶部菜单,以新应用命名,而不是以浏览器命名,我甚至可以把Outlook PWA作为默认的电子邮件处理客户端。但是,您必须从浏览器中卸载PWAs,而不是在操作系统中本地卸载。
linux操作系统下安装PWAs
在Linux中,你可以在Brave、Chrome和Edge(目前是测试版)web浏览器中设置PWA,就像在其他桌面操作系统上一样。您可以在工具栏中看到相同的“安装应用程序”按钮,只需点击该按钮即可创建PWA。我在Ubuntu。PWA应用程序图标出现在“应用程序”页面上,而在“活动”面板中出现的是独特的应用程序图标,而不是浏览器图标。
注意,如果你使用Brave或开源Chromium浏览器,你就不会得到这些好处。你仍然可以创建一个没有浏览器边界的网站版本,但你必须从主浏览器应用程序打开它。
Chrome OS下安装PWAs
谷歌的桌面操作系统与其他平台上的Chrome浏览器有很大不同:浏览器地址栏上有一个圈起来的加号按钮,还有一个“安装”菜单选项。应用程序名称].选择其中一种都会导致你被转到谷歌Play应用商店,你可以从那里安装应用程序。是的,它仍然是一个PWA,但它是你从应用商店获得的。这是我安装Twitter PWA的经验,但对于Outlook Web,选择相同的按钮安装PWA,就像你在Windows PC上看到的那样。
这不是一次糟糕的经历,但是,就像所有的事情一样铬操作系统我希望有更多的一致性。由于Play Store中的Outlook应用程序不是PWA,而Twitter条目是PWA,因此导致了一些混乱。安装Outlook PWA时而且谷歌Play Store的Outlook应用,你会在应用架上看到两个应用图标。