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

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

PWA显示模式概述

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

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

通常，我们希望PWA感觉像是应用而不是浏览器中的网站，因此我们将显示清单成员设置为隐藏浏览器界面的选项之一，例如全屏或独立模式。这有助于让我们的应用感觉更自然，但可能会引入一些在构建Web应用时通常不会考虑的问题。

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

我们在编写CSS时经常使用媒体查询。无论是为打印切换样式还是为响应式设计设置断点，它们都是Web开发人员工具包中的常见工具。前面讨论的每种显示模式都可以用作媒体查询，以根据情况改变文档外观。

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

这些媒体查询直接引用当前模式：

1
2
3
4

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

我们还应该关注window-controls-overlay和tabbed显示模式。在撰写本文时，这两种显示模式都是实验性的，可以与display_override一起使用。

我们使用这些媒体查询的方式与使用任何其他媒体查询完全相同。要在显示模式为独立模式时显示具有.pwa-only类的元素，我们可以这样做：

1
2
3
4
5
6
7
8
9

.pwa-only {
    display: none;
}

@media (display-mode: standalone) {
    .pwa-only {
        display: block;
    }
}

如果CSS不够用，我们还可以引用显示模式并使用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("Running as PWA");
  }
});

实际应用

为PWA用户定制内容

已将应用安装为PWA的用户已经是转化用户，因此您可以调整应用，减少营销语言并专注于用户体验。由于这些用户通过安装您的应用展示了承诺，他们可能不需要促销内容或安装提示。

显示更多选项和功能

在PWA模式下，您可能需要直接暴露更多内容，因为当浏览器UI隐藏时，人们无法轻松访问浏览器的设置。更改字体大小、在浅色和深色模式之间切换、书签、共享、标签页等功能可能需要应用内替代方案。

平台适宜的功能

有些功能您可能不希望在Web应用上使用，因为它们感觉不合适，但您可能希望在PWA上使用。一个很好的例子是底部导航栏，由于它提供了更容易的可达性，在原生移动应用中很常见，但在网站上不常见。

人们有时会打印网站，但很少打印应用。考虑在PWA模式下是否应隐藏打印按钮等功能。

安装提示

一个常见的烦恼是，当用户已经安装了站点时，仍然会出现将站点安装为PWA的提示。理想情况下，如果我们的PWA配置正确，浏览器会提供自己的安装提示，但并非所有浏览器都这样做，而且可能很挑剔。

我们可以通过使用媒体查询隐藏安装提示或使用JavaScript检测当前显示模式并首先避免触发弹出窗口来改善情况。

我们甚至可以将其设置为可重用的实用程序类，这样当我们不希望应用在安装为PWA时显示的任何内容都可以轻松隐藏：

 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;
  }
}

然后在HTML中：

1
2
3
4
5
6
7

<div class="install-prompt hide-in-pwa">
  <button>安装我们的应用</button>
</div>

<div class="browser-notice hide-in-pwa">
  <p>为了获得最佳体验，请将此应用安装为应用！</p>
</div>

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

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

以下是使用这些属性的清单示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
    "name": "Example PWA",
    "scope": "/dashboard/",
    "start_url": "/dashboard/index.html",
    "display": "standalone",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

这里的scope定义了PWA的顶级。当用户离开PWA的作用域时，他们仍然会有类似应用的界面，但可以访问浏览器UI元素。如果您有应用的某些部分仍然希望成为PWA的一部分，但未经过优化或未做出必要的考虑，这可能很有用。

start_url定义了用户打开应用时将显示的URL。例如，如果您的应用在example.com有营销内容，在example.com/dashboard/index.html有仪表板，这将很有用。很可能已将应用安装为PWA的人不需要营销内容，因此您可以将start_url设置为/dashboard/index.html，这样当他们打开PWA时，应用将从该页面开始。

增强过渡

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

1
2
3
4
5

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

浏览器支持和测试

显示模式媒体查询的浏览器支持良好且广泛。但是，值得注意的是Firefox不支持PWA，而Android版Firefox仅以浏览器模式显示PWA，因此您应该做出必要的考虑。幸运的是，渐进增强对我们有利。如果我们处理的浏览器不支持PWA或这些媒体查询，我们将获得优雅降级。

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

不幸的是，在这方面我没有灵丹妙药可以提供。浏览器没有方便的方法来模拟显示模式进行测试，因此您必须在不同的设备、浏览器和操作系统上测试PWA，以确保所有功能在应该工作的地方都能正常工作。

总结

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

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

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