检测在Android Stock Browser中作为主屏幕应用程序运行的Web应用程序

Question

我们正在构建一个必须用作独立/主屏幕应用程序的网络应用程序。在Chrome和Safari如果从浏览器或从天然样的浏览器容器或者看我们可以检测window.navigator.standalone或window.matchMedia('(display-mode: standalone)')。这两个选项似乎都不适用于默认的Android股票浏览器/三星Internet。此外，我们也无法start_url在manifest.json中使用，因为我们需要将令牌传递给每个用户唯一的主屏幕应用。

使用android stock浏览器添加应用程序时，是否可以检测是否从主屏幕打开了该应用程序？

有关

• 检查是否在Android的主屏幕上添加了网络应用（仅适用于android上的chrome）
• 检测页面是在三星浏览器中浏览还是作为独立的Web应用查看（未回答）
• 错误报告：未检测到显示模式样式

Answer 1

据我所知，无法直接检测应用程序是在三星浏览器中运行，还是作为三星浏览器中的独立应用程序运行。我能找到的唯一区别是window.innerHeight，因为这不包括地址栏。有了window.screen.height一个人就可以潜在地计算出一个比率。由于此浏览器可以在许多不同的设备上使用，因此这不一定对您有帮助。window.innerHeight独立应用程序应该更大，但您不一定知道独立应用程序与浏览器体验相比有多大。

// Imperfect solution
if ((window.innerHeight / window.screen.height) > 0.9) {
  // Some probability of this being a standalone app.
}

我发现的一个不同的解决方案是通过 javascript 设置清单文件，允许我们在每个用户的起始 url 中设置唯一的标记。但是，这种方法有几个缺点。通过 javascript 设置清单文件在技术上不受支持，当您以这种方式创建清单文件时，您的应用程序将永远不会作为网络 apk 安装。Firefox 根本不支持动态生成的清单文件，而 ios 缓存清单文件，这可能会导致问题。Chrome devtools 也不会总是显示清单文件中的内容。以下部分来自这篇中篇文章。

// This approach has many caveats. Be aware of all of them before using this solution
import manifestBase from '../manifest.json';

const myToken = window.localStorage.getItem('myToken');
const manifest = { ...manifestBase };
manifest.start_url = `${window.location.origin}?standalone=true&myToken=${myToken}`;
const stringManifest = JSON.stringify(manifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('meta[rel=manifest]').setAttribute('href', manifestURL);

您可以通过将href清单元标记的属性设置为合理的默认值来解决 FireFox 的问题。如果您的唯一信息经常更改.. 甚至根本更改，您将无法解决 ios 中的问题。如果您的启动 url 不是动态的，根本不要通过 javascript 设置清单文件，而是使用一些信息（例如standalone=true上面的查询字符串）设置启动 url ，以便您区分独立应用程序和浏览器 url。

我发现的另一件事是将浏览器模式设置为其他任何内容，例如fullscreen不会“修复”三星浏览器的错误。它永远不会将显示模式设置为浏览器以外的任何东西，因此人们也无法以这种方式检测到它。