Prévenir les utilisateurs d’une mise à jour de l’application


Avatar de Pierre Courtois

Vous avez publié une mise à jour de votre application Flutter, mais ne savez pas comment la promouvoir à vos utilisateurs ? Dans ce guide, je vous explique comment mettre en place un système qui va les prévenir qu’une mise à jour est disponible, au démarrage de l’application.


Notification mise à jour

Mettre en place un système d’alerte des mises à jour

Voici comment implémenter un système de notification de mise à jour dans une application Flutter, en utilisant les packages in_app_update pour Android et new_version_plus pour IOS.

1. Ajouter les dépendances

Pour commencer, ajoutez les packages in_app_update et new_version_plus dans leur dernière version, en modifiant votre fichier pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter
  in_app_update: ^4.2.3 #Remplacer par la dernière version
  new_version_plus: ^0.1.0 #Remplacer par la dernière version

Puis exécutez la commande suivante pour installer les packages :

flutter pub get

2. Configurer les permissions pour Android

Pour que in_app_update fonctionne sur Android, assurez-vous que votre application a la permission d’accéder à Internet. Si ce n’est pas le cas, modifiez le fichier android/app/src/main/AndroidManifest.xml pour ajouter :

<uses-permission android:name="android.permission.INTERNET"/>

Les mises à jour in-app ne peuvent pas être testées localement. Vous devrez donc publier votre application sur le Google Play Store pour pouvoir tester si tout fonctionne correctement.

3. Configurer l’identifiant de l’application pour iOS

Pour iOS, le package new_version_plus aura besoin de l’identifiant unique de votre application sur l’App Store (par exemple, com.reviser.app). Cette méthode, appelée iOSId, est fourni directement par le package. Vous pouvez stocker cette information de la manière suivante, afin de pouvoir la réutiliser plus tard :

final newVersion = NewVersionPlus(iOSId: 'com.monapp.app');

Si votre application est disponible dans un App Store spécifique (par exemple, uniquement en France), ajoutez le code pays ISO 3166-1 alpha-2 (ex. : FR) avec le paramètre iOSAppStoreCountry :

final newVersion = NewVersionPlus(
  iOSId: 'com.reviser.app',
  iOSAppStoreCountry: 'FR',
);

Les deux packages sont en place, ne reste maintenant plus qu’à les utiliser dans votre code Flutter.

4. Implémenter le code de vérification des mises à jour

Voici le code complet pour créer une classe qui va gérer la vérification des mises à jour sur Android et IOS :

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:in_app_update/in_app_update.dart';
import 'package:new_version_plus/new_version_plus.dart';

class UpdateChecker {
  Future<void> checkForUpdates(BuildContext context) async {
    if (Platform.isAndroid) {
      await checkForAndroidUpdate();
    } else if (Platform.isIOS) {
      await checkForIosUpdate(context);
    }
  }

  Future<void> checkForAndroidUpdate() async {
    try {
      // Vérifie si une mise à jour est disponible sur le Google Play Store
      final updateInfo = await InAppUpdate.checkForUpdate();
      print("Info de mise à jour : ${updateInfo.toString()}");
      if (updateInfo.updateAvailability == UpdateAvailability.updateAvailable) {
        // Lance une mise à jour immédiate (interface plein écran)
        await InAppUpdate.performImmediateUpdate();
      }
    } catch (e) {
      print('Erreur lors de la vérification des mises à jour Android : $e');
    }
  }

  Future<void> checkForIosUpdate(BuildContext context) async {
    // Configure l’identifiant de l’application et le code pays (si nécessaire)
    final newVersion = NewVersionPlus(
      iOSId: 'com.reviser.app', // Remplacez par votre identifiant
      iOSAppStoreCountry: 'FR', // Optionnel, selon votre App Store
    );
    try {
      // Vérifie la version sur l’App Store (renvoi un booléen)
      final status = await newVersion.getVersionStatus();
      if (status != null && status.canUpdate) {
        if (context.mounted) {
          // Affiche une boîte de dialogue personnalisée
          newVersion.showUpdateDialog(
            context: context,
            versionStatus: status,
            dialogTitle: 'Nouvelle version disponible',
            dialogText:
                'Une nouvelle version de l\'application est disponible. '
                'Veuillez mettre à jour pour accéder aux dernières fonctionnalités.',
          );
        }
      }
    } catch (e) {
      print('Erreur lors de la vérification des mises à jour iOS : $e');
    }
  }
}

Voici dans les grandes lignes ce que fait cette classe :

  • checkForUpdates : Détermine la plateforme (Android ou iOS) et appelle la fonction correspondante.
  • checkForAndroidUpdate : Utilise InAppUpdate.checkForUpdate() pour vérifier si une mise à jour est disponible dans le PlayStore. Si c’est le cas, l’utilisateur est redirigé dessus pour la télécharger.
  • checkForIosUpdate : Initialise NewVersionPlus avec iOSId et, si nécessaire, iOSAppStoreCountry. Si une mise à jour est disponible, affiche une boîte de dialogue avec un lien vers l’App Store.

5. Appeler la vérification des mises à jour au lancement de l’app

Enfin, ne vous reste plus qu’à appeler la fonction checkForUpdates, afin de vérifier si une mise à jour est disponible, lors du démarrage. Vous pouvez par exemple la placer dans le premier widget qui s’affiche à l’écran quand on lance l’application :

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    // Vérifie les mises à jour après le premier rendu
    WidgetsBinding.instance.addPostFrameCallback((_) {
      UpdateChecker().checkForUpdates(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mon Application')),
      body: const Center(child: Text('Bienvenue !')),
    );
  }
}

Je place ma fonction dans WidgetsBinding.instance.addPostFrameCallback(). Cela permet de ne la lancer qu’une fois que le widget a fini de se construire et ainsi de ne pas bloquer l’application.

6. Tester l’application

Comme expliqué plus haut, ces deux packages ne fonctionnent pas sur émulateur ou même quand vous testez votre application localement sur votre téléphone. La version Android devrait même vous renvoyer l’erreur « ERROR_API_NOT_AVAILABLE ».

Vous devrez donc republier votre application sur les deux plateformes, pour que cette fonctionnalité puisse fonctionner lors des prochaines mises à jour.

Pour Android, assurez-vous que votre appareil utilise bien une version d’Android supérieure ou égale à 21. Pour IOS, vérifiez simplement que iOSId contient bien le bon identifiant et que iOSAppStoreCountry contient le bon code pays, si votre application est régionale.

Avatar de Pierre Courtois