以 fullscreen/kiosk 模式启动桌面 PWA

Question

我一直在寻找解决方案，但没有找到任何有效的方法。我正在尝试从 Windows 桌面计算机以自助服务终端模式添加 Chrome 或至少全屏（根本没有菜单栏）启动 PWA。我认为这很常见，但我还没有找到任何有效的方法。我已将显示：全屏添加到 manifest.json，但这似乎不适用于桌面。

我可以接受任何类型的 Javascript，但我不想要求任何用户交互来按 F11 或任何其他操作。它旨在成为独立的电视显示器。

启动后的实际结果：

启动后的预期结果：

{
  "name": "vuejs-display-new",
  "short_name": "vuejs-display-new",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./side/adds",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Answer 1

display:"fullscreen" 属性似乎工作正常，因为您没有看到任何浏览器地址栏或其他 ui 元素。

不过，似乎某些 CSS 属性可能会将内容设置在视口之外。我会仔细检查是否没有布局属性干扰页面内容。

Answer 2

我也在寻找解决方案。我已经升级到 Windows 10 Pro 并正在尝试使用 Windows Kiosk 模式，但该应用程序似乎没有出现在您可以设置为您的 kiosk 的应用程序菜单中。

需要澄清的一件事是，我认为 OP 也在追求全屏，因为有很多方法可以无意中触发 window 以最小化（即使在触摸屏上）就像在左下角滑动会显示 windows 图标。

我才刚刚开始寻找，所以我会在这里报告 if/when 我找到了如何让我的应用程序显示在 Win 10 Pro 自助服务终端菜单上的方法！

Answer 3

安装 PWA 后，您应该转到快捷方式属性，并在 destination 字段的末尾添加该代码：

--fullscreen --kiosk

完全关闭chrome并打开pwa快捷方式

以 fullscreen/kiosk 模式启动桌面 PWA

Launch Desktop PWA in fullscreen/kiosk mode

windows

desktop

vue.js

progressive-web-apps