javascript - 我可以检测我的 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