我能否檢測我的 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 安裝橫幅如何工作的默認行為。