web-dev-qa-db-fra.com

comment mettre en œuvre la notification Push Web Flutter

Je me demande si je peux implémenter la notification Push dans Flutter Web? J'ai vu que je pouvais créer une notification Push pour une application mobile avec firbase_messaging mais est-il possible de l'utiliser pour une application Web? ou toute autre alternative pour y parvenir?

flutterflutter-web
3
Sepehr Marashi

Je considère que vous avez déjà mis en place un projet Flutter-Web et que vous avez un projet Firebase.

Dans le dossier du projet Flutter, ouvrez index.html et placez ces scripts dans la section head.

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-messaging.js"></script>

Ensuite, dans le corps, ajoutez le code avant le chargement du script main.Dart.js.

  <script src="./firebase-messaging-sw.js"></script>
  <script src="myjs.js"></script>
  <script src="main.Dart.js" type="application/javascript"></script>

(où myjs.js est n'importe quel fichier dans lequel vous voulez écrire du code, mais firebase-messaging-sw.js doit être là.)

Maintenant, créez deux fichiers dans le répertoire index.html:

  1. firebase-messaging-sw.js
  2. myjs.js (quel que soit le nom que vous avez choisi)

Dans firebase-messaging-sw.js, écrivez simplement

console.log("")

Dans myjs.js (encore une fois, quel que soit le nom de fichier que vous avez choisi), écrivez le code suivant:

var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "~~~~~~",
    databaseURL: "~~~~~",
    projectId: "~~~~~~",
    storageBucket: "~~~~~~",
    messagingSenderId: "~~~~~~",
    appId: "~~~~~~~~~~~~~",
    measurementId: "~~~~~~~~~~~"
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

var messaging = firebase.messaging()

messaging.usePublicVapidKey('Your Key');

messaging.getToken().then((currentToken) => {
    console.log(currentToken)
})

Vous pouvez trouver ces informations d'identification dans les paramètres de projet de la console Firebase. Vous trouverez les détails de firebaseConfig dans l'application Web que vous auriez ajoutée. Pour la clé, vous devrez générer une nouvelle paire. Accédez à la messagerie cloud dans les paramètres du projet, et vous pouvez y générer une nouvelle paire.

Lorsque vous exécutez votre application (flutter run -d chrome), vous pouvez trouver votre jeton dans le journal de la console. Copiez ce jeton.

Depuis la section Cloud Messaging du tiroir latéral, nous pouvons composer une nouvelle notification. Entrez ce que vous voulez dans le titre et le texte. Cliquez sur envoyer un message de test. Collez le token que vous avez copié depuis la console et cliquez sur Test.

Screenshot of the notification

Vous pouvez voir la notification apparaître.

Vous pouvez consulter cet article et documentation firebase pour plus d'informations.

1
Shobhit Maheshwari