web-dev-qa-db-ja.com

PWA対応アプリのIOのホーム画面にインストール

Pwaモジュール（または回路図）を追加し、manifest.jsonファイルを正しく設定しました。 Androidデバイスでは、サービスワーカーが従事しており、ホーム画面へのインストールのプロンプトが表示され、アドレスバーが消えて、ネイティブのルックアンドフィールが表示されます。ただし、Chrome/Safari IOの場合プロンプトはありません。プログラムまたは追加で行う必要があることはありますか？

iosangularprogressive-web-apps
5
ustad

IOSとAndroidの両方でJavaScriptを使用して、アプリがスタンドアロンモードであるかどうかを確認し、iOSおよびAndroidの非Chromeブラウザーでプロンプトを表示します。chrome十分に効率的ですので、iOSでは、今のところService WorkerのインストールをサポートしているのはSafariのみです。

0
R Astan

アプリがIOSにあるかどうかを検出し、ポップアップをトリガーしてホーム画面に追加するためのコードスニペットです。

// 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()) {
  this.setState({ showInstallMessage: true });
}
0
Bellatorius