[TUTO] PWA

PWA POUR LES NAZES

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Qu'est-ce que c'est ?

Une Progressive Web App (PWA) est une application Web qui utilise les dernières avancées en matière de technologie Web pour offrir une expérience utilisateur similaire à celle d'une application native.

Les avantages

Sécurisé HTTPS
Offline
Pérennité
Tous types de device
Peut utiliser les services des appareils mobiles (bluetooth, gps, vibreur…) > https://whatpwacando.today
Pas cher, plus facile à développer que du natif
Plus facile à maintenir qu'une application native
Plus de profils qui ont des compétences pour une PWA que pour une application native. Moins rare donc moins cher.
Mise à jour automatique : les mises à jour sont automatiquement téléchargées et installées en arrière-plan, sans nécessiter l'intervention de l'utilisateur.

Les inconvénients

Certaines fonctionnalités non compatibles avec iOS :
- Notification
- Bluetooth
Compatibilité limitée : tous les navigateurs ne prennent pas en charge toutes les fonctionnalités de PWA, ce qui peut limiter leur portée.
Un accès limité aux fonctionnalités du téléphone
Elles consomment beaucoup de batterie : le code est plus complexe.
Découverte limitée : les PWA ne sont pas encore référencées de manière aussi visible que les applications natives dans les stores d'applications, ce qui peut rendre difficile pour les utilisateurs de les trouver.

Exemple d'installation (avec VITE)

https://vitejs.dev/guide/
https://vite-pwa-org.netlify.app

dans un terminal :

npm create vite@latest my-app
npm i vite-plugin-pwa -D

https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html

dans ./index.html :

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>My Awesome App</title>
  <meta name="description" content="My Awesome App description">
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
  <meta name="theme-color" content="#ffffff">
</head>

dans ./vite.config.js :

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
      VitePWA({ 
          registerType: 'autoUpdate',
          includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
          manifest: {
            name: 'pwa-example',
            short_name: 'PWA',
            description: 'Default PWA example for future app',
            theme_color: '#ffffff',
            background_color: '#000000',
            orientation: 'portrait',
            display: 'standalone',
            icons: [
                {
                    src: 'vite-192x192.png',
                    sizes: '192x192',
                    type: 'image/png'
                },
                {
                    src: 'vite-512x512.png',
                    sizes: '512x512',
                    type: 'image/png'
                },
            ]
          },
      })
  ]
})

Installer l'application sur son device

Voici comment installer une PWA sur un ordinateur ou un appareil mobile :

Ouvrez votre navigateur Web et rendez-vous sur le site Web de la PWA que vous souhaitez installer.
Cliquez sur l'icône du menu (souvent représentée par trois points ou trois barres situées en haut à droite de l'écran) et sélectionnez "Ajouter à l'écran d'accueil" ou "Installer l'application" (les termes peuvent varier selon le navigateur et la plateforme).
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Suivez les instructions à l'écran pour terminer l'installation.
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →

Si ça ne fonctionne pas, comment faire ?

Si l'installation de la PWA ne fonctionne pas, voici quelques choses à essayer :

Assurez-vous que votre navigateur est à jour.
Vérifiez que vous avez la dernière version du site Web en rafraîchissant la page.
Vérifiez que vous avez les autorisations nécessaires pour installer des applications (par exemple, sur un ordinateur Windows, vous devez être administrateur).
Essayez d'utiliser un autre navigateur ou un appareil différent.