桌面渐进式 Web 应用程序:重大突破

已发表: 2019-09-10

目录

当谈到渐进式 Web 应用程序 (PWA) 时,首先想到的是移动应用程序,因为情况一直如此。

 推荐阅读:什么是 Progressive Web App

然而,随着时间的推移,Chrome 等主流浏览器凭借其 PWA 计划进入桌面市场,进一步扩展了 PWA 看似无限的潜力。

从 Chrome 70 开始,用户现在可以在 Windows 和 Linux 上安装 Desktop Progressive Web Apps。 安装后,它们会从“开始”菜单启动,并像所有其他已安装的应用程序一样运行,没有地址栏或选项卡。

在 Instagram 上查看此帖子

Progressive Web App (PWA) 与原生应用程序几乎没有区别,它是 Web 的未来,它具有类似应用程序的功能,其中之一就是能够安装(将 PWA 添加到主屏幕),这可能会彻底改变 Web 体验。 ? 立即使用 SimiCart 构建 PWA。 . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsum​​mit #chromedevsum​​mit2019

SimiCart (@simicart.official) 分享的帖子

它并不止于此。 混合 PWA 微软商店的基础正在逐步布局:在微软商店中,渐进式 Web 应用程序现在与原生 Windows 应用程序相当,从而将其覆盖范围扩大到近 7 亿的整个 Windows 10 安装基础每月活跃用户。

了解桌面 PWA 及其为何如此重要

Desktop Progressive Web App拥有 Progressive Web Apps所有优点,正稳步成为桌面应用程序开发趋势。

 推荐阅读:12 个渐进式 Web 应用示例,为您提供灵感

对于 Desktop PWA 的简要了解,您可以将 Desktop PWA 想象成一个在线文档Google 文档,它通过使用 Web 组件来运行。 另一方面,本机桌面应用程序就像Microsoft Word :它们很好,有一点点大小,并且设计为运行流畅。 Desktop PWA 现在很的原因是,Desktop PWA 几乎可以完成原生桌面应用程序的工作,具有更具吸引力的体验,并且几乎不占用硬盘空间。

总之,桌面 PWA 是:

  • 快速——PWA 提供即时、响应迅速且整体令人愉悦的体验
  • 安装——PWA 可以像任何其他本机应用程序一样安装,并显示在您的桌面或主屏幕上,而不需要浏览器。 PWA 的安装总是即时的,而且包体积很小。
  • 引人入胜——PWA 采用了高质量 UX 和 UI 的最佳指南,同时无论网络状态或设备能力如何,它都能正常工作。

桌面 PWA 最突出的例子是Twitter Lite 。 尽管将重点放在移动用户上,但 Twitter 在其桌面用户交互方面取得了显着增长。

每个会话的页面增加 65%

发送的推文增加 75%

跳出率降低 20%

标志着 PWA 运动初始阶段的第一枪肯定是由 Twitter 打响的。 紧随其后的是 Spotify 和 Pinterest 等有影响力的品牌,它们的产品质量也毫不逊色:

桌面 Spotify 和 Pinterest PWA

万一你错过了,我们在这里对 Spotify PWA 进行了彻底的审查。 Spotify PWA 脱颖而出,带来了彻底改变用户体验的改造,使其更加个性化并适应用户的需求——就像音乐播放器应该具备的那样。

Spotify PWA 的自适应背景颜色

Pinterest 在核心业务指标方面也经历了一些积极的改进。

与旧的移动网络体验相比,花费的时间增加了40% ,用户产生的广告收入增加了44% ,核心参与度增加了60%

他们新的移动网络体验是对之前网站整体架构的升级。

他们不仅分解并削减了数百 KB 的 JavaScript,将核心包的大小从 650KB 减少到 150KB,而且还改进了关键性能指标。 第一次有意义的绘画从 4.2 秒减少到 1.8 秒,交互时间从 23 秒减少到 5.6 秒。

对于对 Pinterest PWA 的特定案例研究感兴趣的读者,我们强烈推荐这篇文章:Pinterest Progressive Web App Performance Case Study。

Pinterest PWA 统计数据
资料来源: PWAstats

如何在桌面上安装渐进式 Web 应用程序

安装桌面渐进式 Web 应用程序的过程非常简单明了。 您最重要的一步只是找到您的应用程序的正确 PWA 地址。

在我们今天的教程中,我们将使用Twitter作为桌面 PWA 的示例:

第 1 步:使用Google Chrome 70 及以上版本,前往 https://mobile.twitter.com/home

第 2 步:检查地址栏右端是否有(+)按钮

Twitter PWA 安装应用弹出窗口

或者如果下拉菜单中有“安装 Twitter ”选项

Twitter PWA 安装选项

第 3 步:单击安装,该过程将立即结束。

第 4 步:从桌面启动新安装的 PWA。

桌面推特图标
桌面 Twitter 图标

如何在桌面上卸载 Progressive Web Apps

对于不关心的用户,删除桌面 PWA 图标是卸载 PWA 的一种可接受的方式。 但是,对于正在寻找更可靠的 PWA 卸载方式的用户,建议执行以下步骤:

第 1 步:打开您的桌面 PWA(在本例中为Twitter

第 2 步:在下拉菜单中选择“卸载 Twitter ...”

Twitter PWA 卸载选项

第 3 步:选中或取消选中建议的选项,然后最后单击“删除

Twitter PWA 卸载弹窗

就是这样! 只需几个简单的步骤,您的 Twitter PWA 现已完成从您的计算机中删除。

结束语

不可否认,桌面 PWA 是 Web 应用交互和功能的下一个革命性步骤。 为了领先于竞争对手,公司必须立即接受 PWA 运动,并对 Web/应用程序开发的变化趋势保持警惕。

对于寻求全方位完美Magento Progressive Web App解决方案的在线商家,我们在 SimiCart 为您和您的商店提供完整的软件包。

使用 SIMICART 构建 PWA