Question

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

使用Android股票浏览器添加应用程序时，是否可以从主屏幕上检测该应用程序是否已打开？

相关

Check if web app is added to home screen on Android（仅适用于android上的chrome）
Detect if page is viewed in samsung stock browser or as a standalone web app（未回答）
Bug report: Does not detect the display-mode style

Answer 1

据我所知，无法直接检测某个应用程序是否正在Samsung Browser中运行，或者是作为独立应用程序在Samsung Browser中运行。我能够找到的唯一区别是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 medium article。

// 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);

通过将清单meta标签的href属性设置为合理的默认值，可以解决FireFox的问题。如果您的唯一信息经常更改，甚至根本没有更改，则无法解决ios中的问题。如果您的起始网址不是动态的，则完全不要通过javascript设置清单文件，而是使用一些信息（例如上述standalone=true查询字符串）来设置起始网址，以使您可以将独立应用与浏览器网址。

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

Answer 2

这是我今晚想出的事情，将我的头顶在所有“解决方案”上之后，我发现在整个没用的地方。我的理论是，任何手机上的任务栏为30px或更小，因此请从屏幕高度中减去html的内部高度，如果保留30px或更小，则创建全屏规则，例如...

     var flScrn = (screen.height - innerHeight );
        if (flScrn < 30) {
            $('.installprompt').css("display","none");
        }

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

2 个答案: