优化PWA在不同显示模式下的显示效果

渐进式Web应用（PWA）是将Web应用转变为类似原生独立体验的绝佳方式。它们弥合了网站和原生应用之间的差距，但这种转变容易引入需要深思熟虑的设计挑战。

PWA显示模式

我们通过清单文件定义PWA。在PWA清单中，我们可以从一组显示模式中选择，每种模式提供不同级别的浏览器界面可见性：

fullscreen：隐藏所有浏览器UI，使用整个显示屏
standalone：看起来像原生应用，隐藏浏览器控件但保留系统UI
minimal-ui：显示最少的浏览器UI元素
browser：具有完整浏览器界面的标准Web浏览器体验

通常，我们希望PWA感觉像应用而不是浏览器中的网站，因此我们将显示清单成员设置为隐藏浏览器界面的选项之一，例如全屏或独立模式。

使用媒体查询定位显示模式

我们在编写CSS时经常使用媒体查询。之前讨论的每种显示模式都可以用作媒体查询，以根据情况改变文档外观。

显示模式媒体查询对应于当前显示模式：

1
2
3
4


@media (display-mode: standalone)  /* 仅适用于独立模式 */
@media (display-mode: fullscreen)  /* 适用于全屏模式 */
@media (display-mode: minimal-ui)  /* 适用于最小UI模式 */
@media (display-mode: browser)     /* 适用于标准浏览器模式 */

我们还可以使用JavaScript引用显示模式并进行必要调整：

1
2
3
4
5
6
7
8
9


const isStandalone = window.matchMedia("(display-mode: standalone)").matches;

// 监听显示模式变化
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
  if (e.matches) {
    // 应用现在处于独立模式
    console.log("作为PWA运行");
  }
});

实际应用

为PWA用户定制内容

已将应用安装为PWA的用户已经是转化用户，因此您可以调整应用，减少营销语言并专注于用户体验。

显示更多选项和功能

在PWA模式下，您可能需要直接暴露更多内容，因为当浏览器UI隐藏时，人们无法轻松访问浏览器的设置。

平台适宜的功能

有些功能在Web应用上可能不合适，但在PWA中可能需要。一个很好的例子是底部导航栏，这在原生移动应用中很常见，但在网站上不常见。

安装提示

一个常见的烦恼是，当用户已经安装了网站时，仍然会出现将网站安装为PWA的提示。我们可以通过媒体查询隐藏安装提示，或使用JavaScript检测当前显示模式并避免触发弹出窗口。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* 在PWA模式下隐藏元素的实用类 */
.hide-in-pwa {
  display: block;
}

@media (display-mode: standalone), (display-mode: minimal-ui) {
  .hide-in-pwa {
    display: none !important;
  }
}

作用域和起始URL的战略使用

另一种从网站隐藏内容的方法是设置scope和start_url属性。这些不是使用我们讨论的媒体查询，但应被视为根据网站是否安装为PWA来呈现不同内容的方式。

增强过渡效果

视图过渡在Web上可能感觉不熟悉、不合适且有点花哨，但它们是原生应用的常见功能。我们可以通过适当包装相关CSS来设置仅限PWA的视图过渡：

1
2
3
4
5


@media (display-mode: standalone) {
  @view-transition {
    navigation: auto;
  }
}

浏览器支持和测试

显示模式媒体查询的浏览器支持良好且广泛。但是，值得注意的是Firefox不支持PWA，而Android版Firefox仅以浏览器模式显示PWA，因此您应做出必要的考虑。

测试PWA可能具有挑战性，因为每个设备和浏览器的处理方式都不同。每种显示模式在每个浏览器和操作系统组合中的行为略有不同。

总结

使用PWA与在浏览器中使用Web应用是根本不同的体验，因此应做出相应的考虑。显示模式媒体查询提供了一种强大的方式来创建真正自适应的渐进式Web应用，智能地响应其安装和显示上下文。

通过利用这些查询，我们可以：

为已安装应用的用户隐藏冗余的安装提示
在使浏览器控件不可用时提供适当的导航辅助
定制内容和功能以匹配不同上下文中的用户期望
创建更符合平台惯例的原生感觉体验
为忠实用户逐步增强体验

关键是记住独立模式下的PWA用户与标准网站访问者有不同的需求和期望。通过检测和响应显示模式，我们可以创建感觉更加精致、有目的且真正类似应用的体验。

优化PWA在不同显示模式下的用户体验

本文详细介绍了如何通过显示模式媒体查询和JavaScript来优化渐进式Web应用在不同显示模式下的用户体验，包括内容定制、功能调整和导航优化等实用技巧。