# Linux 桌面端 PWA

> 对比 Linux 上 Chrome、Microsoft Edge 与 GNOME Web 的 PWA 安装和独立窗口，并演示显示模式检测。

Linux 桌面用户可以通过 Chrome、Microsoft Edge 或 GNOME Web 把网页内容安装成应用。不同浏览器提供不同的安装命令，而 `display-mode` 媒体特性让页面适配实际显示模式。

## 支持范围

MDN 说明，基于 Chromium 的浏览器要求清单包含指定成员，PWA 才具备可安装性。Microsoft 列出了 Edge 支持的 64 位 Linux 发行版。GNOME Web 则记录了自己的 Linux Web 应用安装流程（[Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)，MDN；[Microsoft Edge supported operating systems](https://learn.microsoft.com/en-us/deployedge/microsoft-edge-supported-operating-systems)，Microsoft Learn；[Create a Web App](https://help.gnome.org/epiphany/browse-webapps.html)，GNOME Help）。

## 工作原理

Chrome 帮助文档记录了地址栏安装图标和 **Install page as app...** 菜单命令。Microsoft 的 PWA UX 文档把地址栏控件称为 **App available**，并把操作称为 **Install**。

GNOME Web 使用另一套流程。它的帮助页面要求选择 **Install as Web App...**，再选择 **Create**。

创建的应用会添加到 Activities overview，并在一种没有地址栏和菜单的特殊窗口中打开。

不要把 Chrome 菜单路径写成 GNOME Web 操作说明，也不要用 Microsoft 文档的 Windows 集成章节证明 Linux shell 集成。

## 示例

`display-mode` 媒体特性可以作为 CSS 媒体条件。先在标记中保留常规导航路径，再添加独立窗口专用的控件或样式。

### 在没有浏览器控件时补充导航

`display-mode` 媒体特性报告实际使用的显示模式。此示例在 `standalone` 模式显示应用内后退控件，在普通浏览器标签页中保持隐藏。没有 `matchMedia` 时，普通首页链接仍然可用。

```html
<a id="home" href="/">首页</a>
<button id="back" type="button" hidden>后退</button>

<script type="module">
  const back = document.querySelector('#back');

  if (!('matchMedia' in window)) {
    back.hidden = true;
  } else if (window.matchMedia('(display-mode: standalone)').matches) {
    back.hidden = false;
    back.addEventListener('click', () => {
      if (history.length > 1) history.back();
      else location.assign('/');
    });
  } else {
    back.hidden = true;
  }
</script>
```

回退逻辑不会尝试识别 Linux 发行版或浏览器。缺少显示模式检测时，普通链接仍保留返回首页的路径。

### 在独立窗口中隐藏浏览器标签页提示

如果差异只涉及呈现，可以在 CSS 中使用同一个媒体特性。以下安装提示会显示在浏览器标签页中，并在页面以 `standalone` 模式显示时隐藏（[display-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/display-mode)，MDN）。

```html
<p class="browser-only">
  使用浏览器的安装命令，把这个网站作为应用打开。
</p>

<style>
  @media (display-mode: standalone) {
    .browser-only {
      display: none;
    }
  }
</style>
```

其他显示模式仍会显示这条提示。该规则只判断实际显示模式，不识别 Linux 发行版或浏览器名称。

:::caution
GNOME Web 英文帮助使用菜单标签 **Install as Web App...**、确认标签 **Create** 和目标位置 **Activities overview**（[Create a Web App](https://help.gnome.org/epiphany/browse-webapps.html)，GNOME Help）。编写 GNOME Web 操作说明时应使用这些标签，不要套用 Chrome 或 Edge 的标签。
:::

## 另请参阅

- [Create a Web App](https://help.gnome.org/epiphany/browse-webapps.html)（GNOME Help）
- [Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)（MDN）
- [桌面端 PWA](/zh/reference/platforms/desktop/)
- [可安装性条件](/zh/reference/installation/installability-criteria/)
- [清单显示模式](/zh/reference/manifest/display/)