Comment convertir WebApp en PWA avec notification push

Dans cet article, nous voyons comment convertir une application Web ou un site Web en PWA avec une notification push à l'aide de Firebase Cloud Messaging.

Dans le monde moderne, la plupart des applications Web sont converties en PWA (Progressive Web App) car elles offrent des fonctionnalités telles que le support hors ligne, notification push, synchronisation en arrière-plan. Les fonctionnalités PWA font de notre application Web une application native et offrent une expérience utilisateur riche.

Par exemple, de grandes entreprises comme Twitter et Amazon ont converti leur application Web en PWA pour plus d'engagement des utilisateurs.

Qu'est-ce qu'une PWA?

PWA = (Web App) + (certaines fonctionnalités d'application natives)

PWA est votre même application Web (HTML + CSS + JS). Il fonctionne de la même manière que votre application Web sur tous les navigateurs, comme auparavant. Mais il peut avoir des fonctionnalités natives lorsque votre site Web se charge sur un navigateur moderne. Cela rend votre application Web plus puissante qu'auparavant et la rend également plus évolutive car nous pouvons prérécupérer et mettre en cache les actifs dans le frontend, cela réduit les demandes adressées à votre serveur backend.

En quoi PWA est différent de Web App

• installable: Votre Web App peut être installée comme une application native
• Progressive : Fonctionne de la même manière que votre application Web, mais avec certaines fonctionnalités natives
• Expérience d'application native: L'utilisateur peut utiliser et naviguer dans Web App comme un natif, une fois installé.
• Facile d'accès: Contrairement à notre application Web, nos utilisateurs n'ont pas besoin de saisir des adresses Web à chaque visite. Une fois installé, il peut être ouvert en un seul clic.
• Mise en cache des applications: Avant PWA, le seul mécanisme de mise en cache avec lequel notre application Web était implémentée était d'utiliser le cache HTTP qui n'est disponible que pour le navigateur. Mais avec PWA, nous pouvons mettre en cache des choses en utilisant le code côté client lui-même qui n'est pas disponible dans une application Web.
• Publication sur la boutique (App/Play): PWA peut être publié dans Google Play Store et IOS App Store.

Convertir votre application en PWA ne fera que la rendre plus puissante.

Pourquoi les entreprises devraient envisager PWA

Alors que la plupart de nos clients nous contactent et nous demandent de développer d'abord la solution Web App, puis ils demandent Applications Android et iOS. Tout ce que nous allons faire est de créer la même fonctionnalité dans l'application Web vers l'application Android/IOS par une équipe distincte, ce qui prend plus de coûts de développement et plus de temps sur le marché.

Mais certains clients ont un budget limité ou certains clients peuvent penser que le délai de mise sur le marché est plus important pour leur produit.

La plupart des exigences des clients peuvent être satisfaites par les fonctionnalités PWA elles-mêmes. Pour eux, nous suggérons PWA uniquement et leur donnons une idée pour convertir leur PWA en application Android à l'aide de TWA s'ils souhaitent se déployer dans Playstore.

Si votre besoin nécessite vraiment des fonctionnalités d'application natives qui ne peuvent pas être satisfaites par PWA. Les clients peuvent aller développer les deux applications comme ils le souhaitent. Mais même dans ce scénario. Ils peuvent déployer la PWA dans le Play Store jusqu'à ce que le développement d'Android soit terminé.

Exemple : Titan Eyeplus

Initialement, ils ont développé une application PWA et l'ont déployée dans le Play Store à l'aide de TWA (Trusted Web Activity). Une fois qu'ils ont terminé le développement de leur application Android. Ils ont déployé leur véritable application Android dans le Play Store. Ils ont atteint à la fois le temps de mise sur le marché en utilisant PWA et le coût du développement.

PWA features

PWA donne à nos applications Web des fonctionnalités natives de type application.

Les principales caractéristiques sont:

• Installable : une application Web installée comme une application native.
• Mise en cache : la mise en cache de l'application est possible, ce qui donne à notre application un support hors ligne.
• Notification push : Une notification push peut être envoyée depuis notre serveur pour engager nos utilisateurs sur notre site Web.
• Geofencing : L'application peut être avertie par un événement chaque fois que l'emplacement de l'appareil change.
• Demande de paiement : activez le paiement dans votre application avec une excellente expérience utilisateur comme une application native.

Et bien d'autres fonctionnalités à venir dans le futur.

Les autres caractéristiques sont:

• Raccourcis : URL rapidement accessibles ajoutées dans le fichier manifeste.
• API de partage Web : laissez votre application recevoir des données partagées par d'autres applications.
• API Badge : pour afficher le nombre de notifications dans votre PWA installée.
• API de synchronisation périodique en arrière-plan : enregistre les données de votre utilisateur jusqu'à ce qu'il soit connecté au réseau.
• Sélecteur de contacts : utilisé pour sélectionner des contacts à partir du mobile de l'utilisateur.
• Sélecteur de fichiers : utilisé pour accéder au fichier sur le système local/mobile

Avantage de PWA par rapport à l'application native

L'application native fonctionne mieux que PWA et a plus de fonctionnalités que PWA. Néanmoins, elle présente certains avantages par rapport à l'application native.

• PWA fonctionne sur plusieurs plates-formes comme Android, IOS, Desktop.
• Cela réduit vos coûts de développement.
• Déploiement facile des fonctionnalités par rapport à une application native.
• Facilement détectable car PWA (site Web) est optimisé pour le référencement
• Sécurisé car il ne fonctionne que sur HTTPS

Inconvénients de PWA par rapport à l'application native

• Des fonctionnalités limitées sont disponibles par rapport à une application native.
• Les fonctionnalités PWA ne sont pas garanties pour prendre en charge tous les appareils.
• L'image de marque de PWA est faible car elle n'est pas disponible dans l'App Store ou le Play Store.

Vous pouvez déployer votre PWA en tant qu'application Android dans le Play Store en utilisant Android Activité Web de confiance (TWA). Cela aidera votre image de marque.

Éléments nécessaires pour convertir une application Web en PWA

Pour convertir toute application Web ou site Web en PWA.

• Service-Worker : le cœur de toute application PWA pour la mise en cache, la notification push, un proxy pour nos requêtes.
• Fichier manifeste : il contient des détails sur votre application Web. Il téléchargeait notre application comme une application native sur l'écran d'accueil.
• Logo de l'application : image de haute qualité 512 x 512 px pour l'icône de votre application. Logo de l'application nécessaire pour PWA sur l'écran d'accueil, l'écran de démarrage, etc. Nous devons donc créer un ensemble d'images au rapport 1: 1 pour notre APP à l'aide de n'importe quel outil.
• Conception réactive : l'application Web doit être réactive pour fonctionner sur différentes tailles d'écran.

Qu'est-ce qu'un Service Worker :

Un agent de service (script côté client) est un proxy entre votre application Web et le côté externe, fournissant des notifications push pour notre application Web et prenant en charge la mise en cache.

Service Worker s'exécute indépendamment du javascript principal. Il n'a donc pas accès à l'API DOM. Il ne peut accéder qu'à API IndexedDB, Fetch API, API de stockage de cache. Mais il peut communiquer avec le thread principal avec un message.

Service fourni par un travailleur de service :

• Intercepter les requêtes HTTP de votre domaine d'origine.
• Recevez une notification push de votre serveur.
• Disponibilité hors ligne de notre application

Le service worker contrôle votre application et peut manipuler vos requêtes, mais il s'exécute indépendamment. Donc, pour cette raison, le domaine d'origine doit être activé avec HTTPS pour éviter une attaque de l'homme du milieu.

What is the Manifest file

Un fichier manifeste (manifest.json) contient des détails sur notre application PWA à indiquer au navigateur.

• nom : Nom de l'application
• short_name : nom abrégé de notre application. Si fourni
•  avec à la fois le nom de la propriété et le nom abrégé, le navigateur prendra le nom abrégé.
• description : Description pour décrire notre application.
• start_url : pour spécifier la page d'accueil de l'application lors du lancement de notre PWA.
• icônes : Ensemble d'images pour PWA pour l'écran d'accueil, etc.
• background_color : pour définir la couleur d'arrière-plan de l'écran de démarrage dans notre application PWA.
• display : pour personnaliser l'interface utilisateur de notre navigateur afin qu'elle s'affiche dans notre application PWA.
• theme_color : couleur du thème de l'application PWA.
• scope : portée de l'URL de notre application à prendre en compte pour les PWA. Par défaut, l'emplacement du fichier manifeste localisé.
• raccourcis : liens rapides vers notre application PWA.

Convert Web App to PWA

À des fins de démonstration, j'ai créé une structure de dossiers de site Web Geekflare avec des fichiers statiques.

• index.html – page d'accueil
• des articles/
  • index.html – page des articles
• auteurs/
  • index.html – page des auteurs
• outils/
  • index.html – page d'outils
• offres/
  • index.html – page des offres

Si vous avez déjà un site Web ou une application Web, essayez de le convertir en PWA en suivant les étapes ci-dessous.

Créer les images requises pour PWA

Tout d'abord, prenez le logo de votre application et recadrez-le dans un rapport 1: 1 en 5 tailles différentes. j'ai utilisé https://tools.crawlink.com/tools/pwa-icon-generator/ pour obtenir rapidement différentes tailles d'image. Vous pouvez donc l'utiliser aussi.

Créer un fichier manifeste

Deuxièmement, créez un fichier manifest.json pour votre application Web avec les détails de votre application. Pour la démo, j'ai créé un fichier manifeste pour le site Web Geekflare.

{ "name": "Geekflare", "short_name": "Geekflare", "description": "Geekflare produit des articles de haute qualité sur la technologie et la finance, crée des outils et des API pour aider les entreprises et les gens à se développer.", "start_url": "/", "icons": [{ "src": "assets/icon/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icon/icon-152x152.png", "tailles": "152x152", "type": "image/png" }, { "src": "assets/icon/icon-192x192.png", "tailles ": "192x192", "type": "image/png" }, { "src": "assets/icon/icon-384x384.png", "sizes": "384x384", "type": "image/png " }, { "src": "assets/icon/icon-512x512.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#EDF2F4", " display": "standalone", "theme_color": "#B20422", "scope": "/", "shortcuts": [{ "name": "Articles", "short_name": "Articles", "description": "1595 articles sur la sécurité, l'administration système, le marketing numérique, le cloud computing, le développement et bien d'autres sujets.", "url": "/articles", "icons": [{ "src": "/assets/icon/icon- 152x152.png", "taille s": "152x152" }] }, { "name": "Auteurs", "short_name": "Auteurs", "description": "Geekflare - Auteurs", "url": "/authors", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name": "Outils", "short_name": "Outils", "description" : "Geekflare - Outils", "url": "/tools", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name": "Deals", "short_name": "Deals", "description": "Geekflare - Deals", "url": "/deals", "icons": [{ "src": "/assets/ icon/icon-152x152.png", "tailles": "152x152" }] } ] }

S'inscrire Service-travailleur

créez un fichier de script register-service-worker.js et service-worker.js dans le dossier racine.

Le premier, register-service-worker.js est le fichier javascript qui s'exécutera sur le thread principal qui peut accéder à l'API DOM. Mais service-worker.js est un script de service worker qui s'exécute indépendamment du thread principal et sa durée de vie est également courte. Il s'exécute chaque fois que des événements appellent des agents de service et s'exécute jusqu'à ce qu'il termine le processus.

En vérifiant le fichier javascript du thread principal, vous pouvez vérifier si le service worker y est enregistré. sinon, vous pouvez enregistrer le script de service worker (service-worker.js).

collez l'extrait ci-dessous dans register-service-worker.js :

if ('serviceWorker' dans le navigateur) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); }

Collez l'extrait ci-dessous dans service-worker.js

self.addEventListener('install', (event) => { // événement lors de l'installation du service worker console.log( 'install', event); self.skipWaiting(); }); self.addEventListener('activate', (event) => { // événement lors de l'activation du service worker console.log('activate', event); return self.clients.claim(); }); self.addEventListener('fetch', function(event) { // Intercepteur de requête HTTP event.respondWith(fetch(event.request)); // envoie toutes les requêtes http sans aucune logique de cache /*event.respondWith( caches.match( event.request).then(function(response) { return response || fetch(event. request); }) );*/ // cache nouvelle requête. si déjà dans le cache sert avec le cache. });

Nous ne nous sommes pas concentrés sur la façon d'activer le cache pour le support hors ligne. Nous ne parlons que de la conversion des applications Web en PWA.

Ajoutez un fichier manifeste et un script dans la balise all head de votre page HTML.

Actualisez la page après avoir ajouté. Vous pouvez maintenant installer votre application comme ci-dessous sur mobile chrome.

Sur l'écran d'accueil, l'application est ajoutée.

Si vous utilisez WordPress. Essayez d'utiliser le plug-in de conversion PWA existant. Pour vueJS ou reactJS, vous pouvez suivre la méthode ci-dessus ou utiliser les modules PWA npm existants pour accélérer votre développement. Parce que les modules PWA npm sont déjà activés avec la mise en cache de support hors ligne, etc.

Enable Push Notification

Les notifications push Web sont envoyées au navigateur pour que nos utilisateurs s'engagent/interagissent plus souvent avec notre application. Nous pouvons l'activer en utilisant

• notification API: Il est utilisé pour configurer la manière dont notre notification push doit être présentée à l'utilisateur.
• API push: Il est utilisé pour recevoir les messages de notification envoyés de notre serveur au navigateur.

La première étape pour activer la notification push dans notre application consiste à vérifier l'API de notification et à obtenir la permission de l'utilisateur d'afficher une notification. Pour cela, copiez et collez l'extrait ci-dessous dans votre registre-service-worker.js.

if ('Notification' dans la fenêtre && Notification.permission != 'accordé') { console.log('Demander l'autorisation de l'utilisateur') Notification.requestPermission(status => { console.log('Status:'+status) displayNotification(' Notification activée'); }); } const displayNotification = notificationTitle => { console.log('display notification') if (Notification.permission == 'granted') { navigator.serviceWorker.getRegistration().then(reg => { console.log(reg) const options = { body : 'Merci d'avoir autorisé la notification push !', icône : '/assets/icons/icon-512x512.png', vibreur : [100, 50, 100], données : { dateOfArrival : Date.now(), primaryKey : 0 } } ; reg.showNotification(notificationTitle, options ); }); } } ;

Si tout s'est bien passé. Vous recevrez une notification de l'application.

'Notification' dans la fenêtre nous dira que l'API de notification est prise en charge dans ce navigateur. Notification.permission indiquera que l'utilisateur a été autorisé à afficher la notification. Si l'utilisateur a autorisé notre application, la valeur sera "accordée". si l'utilisateur a rejeté la valeur sera 'bloquée'.

Enable Firebase Cloud Messaging and Create Subscription

Maintenant, la vraie partie commence. Pour transmettre les notifications de votre serveur à l'utilisateur, nous avons besoin d'un terminal/abonnement unique pour chaque utilisateur. Pour cela, nous allons utiliser la messagerie cloud firebase.

Dans un premier temps, créez un compte firebase en visitant ce lien https://firebase.google.com/ et appuyez sur commencer.

1. Créez un nouveau projet avec un nom et appuyez sur Continuer. Je vais le créer avec le nom Geekflare.
2. À l'étape suivante, Google Analytics est activé par défaut. Vous pouvez basculer que nous n'en avons pas besoin maintenant et appuyer sur Continuer. Vous pouvez l'activer plus tard dans votre console firebase si vous en avez besoin.
3. Une fois le projet créé, il ressemblera à ci-dessous.

Ensuite, allez dans les paramètres du projet et cliquez sur la messagerie cloud et générez des clés.

À partir des étapes ci-dessus, vous avez 3 clés.

• clé de serveur de projet
• Clé privée des certificats push Web
• Clé publique des certificats push Web

Collez maintenant l'extrait ci-dessous dans register-service-worker.js :

const updateSubscriptionOnYourServer = subscription => { console.log('Écrivez votre code ajax ici pour enregistrer l'abonnement utilisateur dans votre base de données', subscription); // écrivez votre propre méthode de requête ajax en utilisant fetch, jquery, axios pour enregistrer l'abonnement sur votre serveur pour une utilisation ultérieure. } ; const subscribeUser = async () => { const swRegistration = attendre navigator.serviceWorker.getRegistration(); const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY' ; // collez votre clé publique de certificat webpush const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }) .then((subscription) => { console.log('L'utilisateur vient de s'abonner :', abonnement); updateSubscriptionOnServer(subscription); }) .catch((err ) => { if (Notification.permission === 'denied') { console.warn('L'autorisation pour les notifications a été refusée') } else { console.error('Échec de l'abonnement de l'utilisateur : ', err) } }) ; } ; const urlB64ToUint8Array = (base64String) => { const padding = '='.repeat((4 - base64String.length % 4) % 4) const base64 = (base64String + padding) .replace(/\-/g, '+' ) .replace(/_/g, '/') const rawData = window.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } retourne outputArray ; } ; const checkSubscription = async () => { const swRegistration = attendre navigator.serviceWorker.getRegistration(); swRegistration.pushManager.getSubscription() .then(subscription => { if (!!subscription) { console.log('L'utilisateur EST déjà abonné.'); updateSubscriptionOnYourServer(subscription); } else { console.log('L'utilisateur n'est PAS abonné. Inscrire l'utilisateur nouvellement'); subscribeUser(); } }); } ; checkAbonnement();

Collez l'extrait ci-dessous dans service-worker.js.

self.addEventListener('push', (event) => { const json = JSON.parse(event.data.text()) console.log('Push Data', event.data.text()) self.registration. showNotification(json.header, json.options) });

Maintenant, tout est réglé dans le front-end. En utilisant l'abonnement, vous pouvez envoyer des notifications push à votre utilisateur quand vous le souhaitez jusqu'à ce qu'il ne soit pas refusé les services push.

Push depuis le backend node.js

Vous pouvez utiliser le web-push module npm pour le rendre plus facile.

Exemple d'extrait pour envoyer une notification push à partir du serveur nodeJS.

const webPush = require('web-push'); // pushSubscription n'est rien d'autre qu'un abonnement que vous avez envoyé depuis votre frontal pour l'enregistrer dans DB const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj -uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}} ; //votre clé publique de certificats web const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; //votre clé privée de certificats Web const vapidPrivateKey = 'clé privée de certificat Web'; var payload = JSON.stringify({ "options": { "body": "PWA push notification testing form backend", "badge": "/assets/icon/icon-152x152.png", "icon": "/assets /icon/icon-152x152.png", "vibrate": [100, 50, 100], "data": { "id": "458", }, "actions": [{ "action": "view" , "title": "View" }, { "action": "close", "title": "Fermer" }] }, "header": "Notification de la démo Geekflare-PWA" }); var options = { vapidDetails : { subject : 'mailto:your-actual-mail@gmail.com', publicKey : vapidPublicKey, privateKey : vapidPrivateKey }, TTL : 60 } ; webPush.sendNotification( pushSubscription, payload, options).then(data => { return res.json({status : true, message : 'Notification sent'}); }).catch(err => { return res.json( {état : faux, message : erreur }); });

Le code ci-dessus enverra une notification push à l'abonnement. L'événement push dans le service-worker sera déclenché.

Push depuis le backend PHP

Pour le backend PHP, vous pouvez utiliser le web-push-php package compositeur. Consultez l'exemple de code pour envoyer des notifications push ci-dessous.

array ( 'body' => 'PWA push notification testing form backend', 'badge' => '/assets/icon/icon-2x2.png', 'icon' => '/assets/icon/icon-0x8.png ', 'vibrer' => tableau ( 8 => 2, 7 => 9, 88 => 6, ), 'data' => tableau ( 'id' => '5', ), 'actions' => tableau ( 41 => array ( 'action' => 'view', 'title' => 'View', ), 3 => array ( 'action' => 'close', 'title' => 'Fermer', ) , ), ), 'header' => 'Notification de la démo Geekflare-PWA', ); // auth $auth = [ 'GCM' => 'your project private-key', // obsolète et facultatif, c'est ici uniquement pour des raisons de compatibilité 'VAPID' => [ 'subject' => 'mailto:your-actual- mail@gmail.com', // peut être un mailto: ou l'adresse de votre site web 'publicKey' => 'BOcTIipY8N256Y0Y-8r1NMoJHofmCzn0Pu5g-LMsgIMGH4HVr3_LW7ia152lMr152TsTLKS152UcdkE152IcC0hJDYsY', // (recommandé) clé publique non compressée P-100 encodée en URL privée Base1 => 'your web-certificate private-key', // (recommandé) en fait le multiplicateur secret de la clé privée encodée en Base50-URL ], ]; $webPush = nouveau WebPush($auth); $subsrciptionData = json_decode($subsrciptionJson,true); // webpush 2 $webPush->sendOneNotification( Subscription::create($subsrciptionData), json_encode($payloadData) // facultatif (par défaut null) );

Conclusion

J'espère que cela vous donne une idée de la conversion des applications Web en PWA. Vous pouvez vérifier le code source de cet article ici et faites une démonstration ici. J'ai également testé la notification push en l'envoyant depuis le backend à l'aide d'un exemple de code.