我能否检测我的 PWA 是作为应用程序启动还是作为网站访问？

Question

如果我有一个 PWA，我可能想让我的用户将它添加到他们的启动器中，但我不想问它是否实际上是从启动器启动的。

有没有办法从javascript中检测到这一点？

Answer 1

对于 android，您应该只在收到beforeinstallprompt事件后提示用户安装。 只有在尚未安装 PWA 时才会触发此事件。

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

https://developers.google.com/web/fundamentals/app-install-banners/

对于 IOS，您可以检查window.navigator.standalone ，如果应用程序已经安装，则应该为 true。

// Detects if device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
  // offer app installation here
}

https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

Answer 2

换句话说，您不必编写任何代码来实现这一点。 浏览器触发安装到主屏幕横幅/相关事件，仅当它在浏览器中使用并且不会从启动器发生时。

您期望做的是 Web 安装横幅如何工作的默认行为。