也许你遇到过一个网站,它建议“将此安装为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服务首先为其网站推出新功能,然后才将其添加到独立的应用程序中(如果有的话)。
渐进式Web应用程序的其他优点是它们比原生应用程序更轻量级,而且与平台无关。换句话说,只要平台上运行支持PWAs的浏览器,开发者就不需要为移动端和桌面端开发不同的应用程序。在Windows上,不需要注册表混乱或辅助代码模块。一名开发者指出,Twitter Lite PWA占用了只有3%的存储空间(在一个新窗口中打开)这是它的原生Android应用程序的要求。这对最终用户和开发人员都有好处,稍后我们将看到这一点。
最后,PWAs避开了手机应用商店的限制,特别是对于那些需要向平台供应商付费的开发者来说。对于终端用户来说,这意味着安装非常快速和简单。
没有乌云就没有一线希望
PWA的一个缺点是,应用程序在底层仍然是一个网站,尽管许多应用程序被设计成可以离线继续运行,但有些应用程序在没有连接的情况下无法完全运行。然而,这种网络基础有时是一种优势:你可以点击浏览器刷新热键(Windows上是F5, macOS上是Command-R)来重新加载一个烦人的网站应用程序,而安装的程序如果没有响应则更痛苦,通常需要重新启动。
一些PWAs还要求你像在网站上一样频繁登录,在网站上,大多数应用程序在你启动时才开始运行。有些类型的应用不适合PWAs。原生应用程序编码到您的系统的金属提供更快的性能:您不会想运行一个AAA级视频游戏或视频编辑器作为一个网站。
如果你的设备上同时安装了同一个服务的应用和PWA,这可能会导致你无法找到你想要的那个。对此我的建议是:卸载原生应用;这可能会节省系统资源。最后,请注意,就像浏览器窗口一样,你可以同时运行同一个web应用程序的多个实例;这可以看作是一个加分项(如果你想在应用程序中有多个内容集)或一个减值项(如果你对运行同一应用程序的多个Windows感到困惑)。
PWAs的另一个问题是单纯的可发现性。因为没有PWA应用商店,所以很难知道哪些网站可以作为这类应用安装。体验也取决于开发者如何实现PWA功能——有些提供了清晰的设置和使用体验,而有些则没有。
你应该使用哪种PWAs ?
某些类型的网络应用非常适合作为pwass使用——流媒体音乐、通信和社交媒体应用都是不错的选择。我一直在做的两个PWAsSpotify以及Outlook的网页版,但原因截然不同。
首先是Spotify:我偶尔会在Windows 10下查看应用程序和功能设置页面,发现Spotify占用了超过GB的驱动器空间。我想知道为什么这是必要的,因为我不需要应用程序下载我播放的每首歌。切换到PWA后,应用程序占用不到5MB的空间。
我使用Outlook Web而不是常用的Windows Mail应用程序,只是因为它的可靠性、速度和功能更强。有传言说微软将用PWA版本的变体来取代Windows 10的邮件应用程序,而在我看来,这不会很快发生。
Twitter是PWA使用的另一个很好的候选者,但它已经在大多数平台上提供了优秀的原生应用。我开始使用Twitter作为PWA,因为Windows商店应用程序不允许我在个人账户和工作账户之间轻松切换,而网页版本可以。谷歌见面,SkypeZoom也都可以安装为Progressive Web Apps。
也许有一天,你安装了一个应用程序,却没有意识到它是一个PWA,特别是现在Windows正在把它们纳入微软商店,在开始菜单程序列表中,在应用程序和功能部分,你可以卸载普通的应用程序。Chrome OS已经在其应用商店中包含了PWA。
如何安装渐进式Web应用程序?
PWAs的一大优点是安装起来非常容易,而且对于支持PWAs的web浏览器(如Chrome和Edge)来说,安装过程越来越简单。苹果在PWAs方面处于一个特殊的位置:你可以在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安装,你可以点击地址栏右侧的图标,它看起来像三个正方形和一个加号(悬停文本是“应用程序可用。安装(应用程序名称),或者你可以从三个点溢出菜单中选择应用程序,然后单击安装[应用程序名称]。对于某些PWAs,安装框会自动弹出。
就是这样。你的新应用程序出现在开始菜单中,在任务栏中有一个独特的图标(不是边缘图标),并且可以转换为桌面快捷方式。如果你想卸载PWA,你可以从开始菜单的右键菜单、Windows的应用程序和功能设置页面或Edge的管理应用程序页面卸载PWA。
在Chrome浏览器:和Edge一样,Chrome在地址栏中也有一个按钮,可以弹出提供PWA功能的网站。(注意隐私和crypto-earning浏览器勇敢有PWA支持,几乎与Chrome的相同。)
点击地址栏的“安装应用程序”按钮或选择“安装”[应用程序名称从右上方的三个点溢出菜单。
在这之后,你会看到没有浏览器边界的应用程序,并在开始菜单中看到它的图标。注意,你只能从他们的窗口或Chrome浏览器卸载Chrome创建的PWAs,而不能从Windows的设置中卸载。如果您从开始菜单中选择卸载,PWA会将您带到旧的程序和功能控制面板。
在iOS和ipad上安装PWAs
如前所述,苹果只允许Safari在中创建PWAsiOS而且iPadOS-第三方浏览器被排除在外。Safari不使用这些术语安装而且应用程序,就像所有其他支持PWAs的浏览器一样。在iOS或ipad上安装时,加载支持pwa的站点,选择屏幕底部的“共享上箭头”,选择“添加到主界面”。注意,你可以对任何网站做同样的事情,但你不会得到真正的PWA的离线功能。
当我为Instagram创建PWA时,图标和应用程序看起来与app Store版本相同,但长按菜单中没有“删除应用程序”选项,而是出现了“删除书签”选项。注意,PWA图标不会出现在iOS 14的应用程序库中,所以在苹果移动设备上使用PWAs不会像在其他平台上那样获得充分的应用体验。考虑到苹果对开放系统的敌对态度,我想这应该不是什么大意外。
在macOS上安装PWAs
在macOS在美国,安装PWAs和在Windows上一样,但默认的Safari浏览器没有提供将站点安装为PWA的方法。你的新应用会出现在Launchpad中,但不会出现在Applications Finder文件夹中。
用Chrome或Edge创建的应用程序都有一个以新应用程序而不是浏览器命名的顶部菜单,我甚至可以把Outlook PWA作为我默认的电子邮件处理客户端。但是,您必须从浏览器中卸载PWAs,而不是在操作系统中本机卸载PWAs。
linux操作系统上安装PWAs
在Linux中,您可以像在其他桌面操作系统上一样,在Brave、Chrome和Edge(目前处于beta) web浏览器中设置PWA。您可以在工具栏中看到相同的Install app按钮,只需点击该按钮就可以创建PWA。我在Ubuntu.PWA应用程序图标出现在应用程序页面上,而在活动面板中出现的是独特的应用程序图标而不是浏览器图标。
请注意,如果您使用Brave或开源铬浏览器,就不会获得这些好处。你仍然可以创建一个没有浏览器边界的网站版本,但你必须从主浏览器应用程序打开它。
在Chrome OS上安装PWAs
谷歌的桌面操作系统的表现与其他平台上的Chrome浏览器有很大不同:浏览器的地址栏上有一个圈起来的加号按钮,还有一个安装菜单选项。应用程序名称].选择其中任何一个都会导致你被分流到谷歌Play应用程序商店,从那里安装应用程序。是的,它仍然是一个PWA,但它是从应用程序商店获得的。这是我安装Twitter PWA的经验,但对于Outlook Web,选择与Windows PC相同的按钮就可以安装PWA。
这不是一次糟糕的经历,但是,就像所有的东西一样铬操作系统我希望有更多的一致性。由于Play Store中的Outlook应用程序不是PWA,而Twitter条目是PWA,所以会产生一些混淆。安装Outlook PWA时而且在谷歌Play Store的Outlook应用中,你会在应用架子上得到两个应用图标。