PWA Bunga! PWA

Une PWA (Progressive Web App) est une application web qui utilise les dernières technologies web pour offrir une expérience utilisateur similaire à celle d'une application native. Contrairement aux applications natives, les PWA ne nécessitent pas de téléchargement à partir d'un magasin d'applications et peuvent être utilisées directement à partir d'un navigateur web.

Elles sont conçues pour être fiables, rapides et engageantes, en permettant aux utilisateurs d'accéder à une version hors ligne de l'application, de recevoir des notifications push, de s'adapter à différentes tailles d'écran et de s'intégrer à d'autres fonctionnalités du système, telles que la caméra ou le microphone.

Les PWA ont une portée plus large que les applications natives car elles peuvent être utilisées sur différents types de périphériques (smartphones, tablettes, ordinateurs de bureau) et sur différents navigateurs web (Chrome, Firefox, Safari, etc.). Cela signifie que l'on peut créer une seule PWA qui fonctionnera pour tous les utilisateurs, au lieu de devoir créer plusieurs versions pour chaque plateforme ou système d'exploitation.

Elles ont aussi d'autres avantages comme le fait qu'elles soient applications web, ce qui signifie qu'elles sont accessibles via un navigateur et donc facilement indexables par les moteurs de recherche.

Les PWA sont de plus en plus populaires car elles offrent une alternative moins coûteuse et plus accessible aux applications natives, tout en offrant une expérience utilisateur de qualité similaire.

Les fichiers de base d'une PWA

Afin de mettre en place votre PWA, vous trouverez dans PWA Bunga! PWA :

• Les fichiers d'icônes : Il est important d'avoir des icônes de différentes tailles pour l'application, pour qu'elle puisse s'adapter à différents écrans et être installée sur l'écran d'accueil de l'appareil.
• Le fichier app.webmanifest : Ce fichier contient les métadonnées de l'application, telles que son nom, sa description, son icône et sa couleur de thème. Il permet également à l'application d'être installée sur l'écran d'accueil de l'appareil.
• Le fichier serviceworker.js : Il s'agit d'un script JavaScript qui fonctionne en arrière-plan et qui permet à l'application d'être disponible hors ligne. Le service worker peut mettre en cache des ressources pour une utilisation ultérieure, ce qui améliore la vitesse de chargement de l'application.
• Le fichier pwabunga.js : Ce fichier va permettre d'enregistrer le Service worker et fournir des fonctions permettant d'améliorer l'expérience utilisateur des évènements de la PWA.
• Le fichier pwabunga-ui.css : Un fichier CSS optionnel pour mettre en forme les éléments d'interface utilisateur utilisés par pwabunga.js.

Sommaire de la documentation de PWA Bunga! PWA

Webmanifest

• Informations générales de la PWA
  • Nom
  • Description
  • Langue
  • Identifiant
• Navigation de la PWA
  • URL de la page d'accueil
  • Portée de la navigation
• Thème de la PWA
  • Mode d'affichage
  • Orientation
  • Couleur du thème
  • Couleur de fond
  • Icônes

Icônes

• Icônes et Touch icons pour les environnements applicatifs et les anciennes versions d'Android
  • Affichage des icônes
  • Dimensions des icônes
  • Appel des icônes
• Maskable icons : icônes adaptatives pour l'environnement Android
  • Zone de sécurité et formes des icônes adaptatives
  • Affichage des icônes adaptatives
  • Appel des icônes adaptatives
• Touch icon pour l'environnement iOS
  • Formats et dimensions de apple-touch-icon.png

Service worker

• Configuration du cache et du traitement des requêtes
  • Nom et version du cache
  • Ressources mises en cache
  • Choix de la stratégie du traitement des requêtes
  • Déclaration d'un dossier dynamique
• Manipulation du cache
  • Ajout des ressources au cache
  • Mise à jour des ressources du cache
  • Suppression d'une instance de cache
  • Suppression des anciennes versions du cache
• Stratégies de traitement des requêtes
  • Cache only
  • Network only
  • Cache first
  • Network first
  • Stale While Revalidate
• Évènements du service worker
  • Évènement install
  • Évènement activate
  • Évènement message
  • Évènement fetch

pwabunga.js

• Enregistrement du Service worker
  • Fonction pwaRegister
• Amélioration de l'expérience utilisateur
  • Fonction pwaInstall
  • Fonction pwaUpdate
  • Fonction pwaShare
  • Fonction pwaParams
• Autorisations
  • Fonction pwaNotification
  • Fonction pwaGeolocation

pwabunga-ui.css

• Variables
• Composants d'interface utilisateur de la PWA
  • Boutons
  • PWA Banner
  • PWA Modal
  • PWA Switch
  • PWA Alert
  • PWA Loader
• Styles additionnels
  • Barre d'actions de la PWA
  • Elément version de la fonction pwaParams()
  • Listing des autorisations
• Etats des éléments utiles aux fonctions de pwabunga.js
  • Bouton d'installation de la fonction pwaInstall()
  • Bouton de partage de la fonction pwaShare()
  • Eléments de la fonction pwaParams()

Contribuer

Pour contribuer, vous pouvez utiliser les trackers de problèmes du dépôt du module PWA Bunga! PWA

• https://github.com/PwaBunga/pwa/issues

Les modifications apportées sur ce seront ensuite effectuées sur le dépôt principal du projet.

Le tracker de problèmes est le canal privilégié pour signaler des bugs, des demandes de fonctionnalités et soumettre des requêtes de fusion, mais veuillez respecter les restrictions suivantes :

• Merci de ne pas utiliser le tracker de problèmes pour des demandes de support personnel.
• Merci de ne pas détourner ou saboter les problèmes. Maintenez la discussion sur le sujet et respectez les opinions des autres.