# [TUTO] PWA
## _PWA POUR LES NAZES_
[](https://nodesource.com/products/nsolid)
### 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 :
```shell
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 :
```htmlembedded
<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 :
```javascript
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).
- Suivez les instructions à l'écran pour terminer l'installation.
#### 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.
<!-- ### Connexion avec Firebase
https://firebase.google.com/docs/web/pwa
Tout dépend du langage de programmation utilisé pour la PWA. -->
Sign in with Wallet
Connect another wallet