私はFlutterで働いていたアプリケーションのホーム画面機能を追加したいときに、私はそこに多くの良い解決策を見つけていないと私は少しの解決策を思い付く苦労した.
この記事では、個人的な解決方法について述べました.私たちがこれよりすばらしい方法でこれをすることができるならば、知らせてください.学習を楽しむ!
我々は達成しようとしている.

A 2 HS(ホーム画面に追加)についての学習を開始するには、まず最初にPwasについて学ぶ必要があります.これを知っていますか?あなたはmain content .

( PWA ( Progressive Web App ))

PORまたはプログレッシブWebアプリは、最先端のWebブラウザAPIを使用して、ユーザーエクスペリエンスのようなネイティブアプリをもたらすWebアプリです.
しかし、どのように我々は正常とPWAのWebアプリを区別するのです.以下の機能が含まれているかどうかチェックする必要があります

セキュアネットワーク( HTTPS )

労働者

マニフェストファイル

ソースMDN Web Docs

A 2 HS

A 2 HSとは
ホーム画面(または短いためのA 2 HS)には、ユーザーが“アプリケーションを”Webアプリケーションをインストールすることができます近代的なブラウザで利用可能な機能です.

ソース&詳細情報:MDN Web Docs
A 2 HSとPWAの関係
私たちが学んだように、A 2 HSの仕事はあなたのデバイス上のWebアプリケーションをインストールする機能を提供することです.したがって、それはオフライン機能を持っているWebアプリケーションが必要です.
したがって、Preはこの役割に非常に適合しました.

フラッタ実装

さて、我々が学んだ今、PWAとA 2 HSが意味するものは、現在、主要な点にたどり着きます、すなわち、ウェブアプリケーションをフラディングするか、フラッターPWAをつくるA 2 HS機能を作成してください.
まず最初にフラッタウェブアプリ、フラッターpwaを作りましょう.
新しいフラッターアプリを作成し、以下の手順を通過します.
このためには(リンクをクリックしてセクションに移動します).

Have a manifest file

Icons available

Service workers

A2HS Prompt Configuration

Show A2HS Prompt From Flutter Web App

HTTPS context

マニフェスト

特に
Webマニフェストは、標準のJSON形式で書かれており、アプリケーションディレクトリ内のどこかに配置する必要があります.これは、Webアプリケーションについての特定の情報を定義する複数のフィールドが含まれてどのように動作する必要があります.フィールドについて詳しく知るには、ソースドキュメントをチェックアウトします.
実装
フラッタのWebマニフェストが付属します.JSONファイル既にファイルがサポートされていません.したがって、“manifest . webmanifest”という名前のWebルートディレクトリに新しいファイルを作成します.
このコードを追加します.

     {
        "name": "FlutterA2HS",
        "short_name": "FA2HS",
        "start_url": ".",
        "display": "standalone",
        "background_color": "#0175C2",
        "theme_color": "#0175C2",
        "description": "Flutter A2HS Demo Application",
        "orientation": "portrait-primary", 
        "prefer_related_applications": false,
        "icons": [
            {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
            },
            {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/
            }
        ]
       }

この行をインデックスの先頭タグに追加します.HTMLファイル<link rel="manifest" href="manifest.webmanifest">アプリケーションを実行し、「dev」アプリケーション「アプリケーション」マニフェストに移動します.
次のようになります.

いくつかの警告を表示する場合は、それらを解決することを検討してください.
注意:ここでのすべてのフィールドは、PWAが動作するために必要です.その中の値を置き換えることを考えてください.ただし、アイコンのリスト内の画像の数を減らすことができます.
ソース&詳細情報:MDN Web Docs

アイコン

我々はすでにそこに適切なアイコンを追加し、マニフェストファイルにそれらを追加することを確認し、そこにアイコンをフォルダを見ることができます.

労働者

特に
サービスワーカーは本質的に、Webアプリケーションとブラウザとネットワークの間にあるプロキシサーバーとして機能します.彼らは、とりわけ効果的なオフライン体験の作成を可能にし、ネットワーク要求を傍受し、ネットワークが利用可能であるかどうかに基づいて適切な行動をとって、サーバーに存在する資産を更新することを意図しています.また、通知やバックグラウンド同期APIをプッシュへのアクセスを許可します.
実装
マニフェストが属するルートフォルダに“sw . js”という名前のファイルを作成します.
次のコードを追加します.

const cacheName = "flutter-app-cache-v1";
const assetsToCache = [
  "/",
  "/index.html",
  "/icons/Icon-192.png",
  "/icons/Icon-512.png",
];

self.addEventListener("install", (event) => {
  self.skipWaiting(); // skip waiting
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(assetsToCache);
    })
  );
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

これはネットワークURLと資産をキャッシュします.
サービスワーカーがinstall 登録終了時のイベント.上記のコードでは、メッセージがinstall イベントリスナーが、現実世界のアプリでは、これは静的な資産をキャッシュするための良い場所になります.
さあ
インインデックス.Flutterの既定のサービスワーカー登録前のHTMLvar serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion; ).
次のコードを追加します

var customServiceWorkerUrl = './sw.js';
        navigator.serviceWorker.register(customServiceWorkerUrl, { scope: '.' }).then(function (registration) {
          // Registration was successful
          console.log('CustomServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
          // registration failed 
          console.log('CustomServiceWorker registration failed: ', err);
        });

これは、私たちが定義したサービスワーカーを登録しますsw.jsソース&詳細情報:

MDN Web Docs

Google Web Dev

プロンプト

特に
ここで最後に、インストールダイアログをユーザに提示する必要があります.
しかし、今ここで重要な問題は、それだけでイベント火災にプロンプトが表示されます.をクリックします.あなたのHTMLのボタンを持っているならば、あなたはJS OnClickEventを発射して、関数を呼び出して、プロンプトと悪い部分を示します.しかし、心配しないでください、我々はこれに着きます.
実装
クリエイトアscript.js マニフェストが属するルートディレクトリのファイルで、次のコードを追加します.

let deferredPrompt;

// add to homescreen
window.addEventListener("beforeinstallprompt", (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

function isDeferredNotNull() {
  return deferredPrompt != null;
}

function presentAddToHome() {
  if (deferredPrompt != null) {
    // Update UI to notify the user they can add to home screen
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the A2HS prompt");
      } else {
        console.log("User dismissed the A2HS prompt");
      }
      deferredPrompt = null;
    });
  } else {
    console.log("deferredPrompt is null");
    return null;
  }
}

beforeinstallprompt ブラウザがA 2 HS条件が満たされるとき、ブラウザーがプロンプトを示す準備ができているとき、自動的に呼ばれます.
今のアイデアはbeforeinstallprompt 火がつくdefferredPrompt そして、プロンプトを表示できます.
この行を先頭タグに追加しますindex.html ファイル<script src="script.js" defer></script>この時点で、すべてのものが適切に設定されているかどうかを確認します.
ブラウザでアプリケーションを実行し、開発者ツールを開き、アプリケーションタブに移動します.

そこにエラーや警告がないはずです.

サービスワーカーのタブにエラーや警告はありません.

問題がないならば、おめでとう🥳. 我々はすべての設定では、今ちょうど我々のフラッターアプリからプロンプトを呼び出す必要が設定されます.

A 2 HSプログをフラッタで表示する

ここでの懸念は、どのように我々はFlutterアプリのボタンからJSのコールバックを発射するのですか?
今のところ、我々は使用するつもりですuniversal_html パッケージ.我々はまた、それを行うことができますdart:js , しかし、それは直接フラッターのアプリで使用することをお勧めしません.
だから先に行くと追加universal_html あなたの依存pubspec.yaml ファイル.
パッケージ用のリンクUniversal HTML
我々はまた、共有Prefsので、あまりにも追加する必要があります.
パッケージ用のリンクShared Preferences
ユーザーをクリックしてプロンプトを表示できるようにボタンを作成します.プロンプトを表示する準備ができたら、ユーザにポップアップを表示します.
インmain.dart ファイルは、我々は良い古いカウンタアプリを持っている.

import  "package:universal_html/js.dart"  as js;
import  'package:flutter/foundation.dart'  show kIsWeb;

つのパッケージをインポートします.
そして次のコードをinitState :

if (kIsWeb) {
      WidgetsBinding.instance!.addPostFrameCallback((_) async {
        final _prefs = await SharedPreferences.getInstance();
        final _isWebDialogShownKey = "is-web-dialog-shown";
        final _isWebDialogShown = _prefs.getBool(_isWebDialogShownKey) ?? false;
        if (!_isWebDialogShown) {
          final bool isDeferredNotNull =
              js.context.callMethod("isDeferredNotNull") as bool;

          if (isDeferredNotNull) {
            debugPrint(">>> Add to HomeScreen prompt is ready.");
            await showAddHomePageDialog(context);
            _prefs.setBool(_isWebDialogShownKey, true);
          } else {
            debugPrint(">>> Add to HomeScreen prompt is not ready yet.");
          }
        }
      });
    }

ここでは、まず、プラットフォームがウェブであるかどうかチェックしますisDeferredNotNull 我々が書いた機能script.js ファイル.これは私たちを返しますdefferredPrompt これは、ブラウザがプロンプトを表示する準備ができているときにのみNULLではないことを知っています.
NULLでない場合は、ダイアログを表示し、共有しているprefキーをtrueに設定して、再度表示しないように設定します.
以下はダイアログ(ポップアップコード)です:

Future<bool?> showAddHomePageDialog(BuildContext context) async {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Center(
                  child: Icon(
                Icons.add_circle,
                size: 70,
                color: Theme.of(context).primaryColor,
              )),
              SizedBox(height: 20.0),
              Text(
                'Add to Homepage',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
              ),
              SizedBox(height: 20.0),
              Text(
                'Want to add this application to home screen?',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 20.0),
              ElevatedButton(
                  onPressed: () {
                    js.context.callMethod("presentAddToHome");
                    Navigator.pop(context, false);
                  },
                  child: Text("Yes!"))
            ],
          ),
        ),
      );
    },
  );
}

これはpresentAddToHome 関数はscript.js インストールプロンプトを表示するには.

最後のステップ

プロンプトを表示するために、我々は安全なHTTPSホスティングにWebアプリケーションをホストする必要があります.我々は、githubページの上でウェブアプリを主催します.

という名前の新しいリポジトリを作成します

ランflutter build web --web-renderer=html

ビルド成功後build/web ディレクトリ.

新しいGitリポジトリを初期化し、リモートに追加します.For {username}.github.io このリポジトリ.

いくつかの時間を押して待って、GitHubのリポジトリに展開状態をチェックします.

そして今、あなたはすべて完了です!🥂
訪問を確認する{username}.github.io

重要

心に留めておくべきこと

プロンプトは、時々初めて表示されません.ほとんどの場合、ページを訪問したり、ページを再読み込みする次の時間が表示されます.それは条件をチェックしてください.コンソール、タブツールのタブをチェックすることができますdeferredPrompt is null 印刷

サポートされているブラウザを参照してくださいbeforeinstallprompt コールバック.クリックhere 拝見する.

別のブラウザで試してみてください.

ホストの場合のみ動作します.ブラウザのデバッグツールの「アプリケーション」タブでマニフェストにエラーや警告がないことを確認します.

あなたが望んだ結果を得た希望!
ソースコード:

サルコソナワナコ / A 2 HS

フラッターのA 2 HS

フラッタウェブにおけるA 2 HS機能を確立するためのソースコード
これについての記事をご検討ください.
リンクからリンク
ミディアムリンク
View on GitHub
以上です.これは私の最初の記事です、私は改善するための提案を聞くのが大好きだ.ありがとう❤️