Linux 桌面端 PWA

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

支持范围

MDN 说明，基于 Chromium 的浏览器要求清单包含指定成员，PWA 才具备可安装性。Microsoft 列出了 Edge 支持的 64 位 Linux 发行版。GNOME Web 则记录了自己的 Linux Web 应用安装流程（Making PWAs installable，MDN；Microsoft Edge supported operating systems，Microsoft Learn；Create a Web App，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 时，普通首页链接仍然可用。

<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，MDN）。

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

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

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

警告

GNOME Web 英文帮助使用菜单标签 Install as Web App…、确认标签 Create 和目标位置 Activities overview（Create a Web App，GNOME Help）。编写 GNOME Web 操作说明时应使用这些标签，不要套用 Chrome 或 Edge 的标签。

另请参阅

• Create a Web App（GNOME Help）
• Making PWAs installable（MDN）
• 桌面端 PWA
• 可安装性条件
• 清单显示模式

规范

规范	状态
无。