PWA 101
Ton CV en PWA
Fonctionnalités
- Fonctionnement hors-ligne
- Installable
- Notifications
Mais aussi :
- Rapide
- Responsive
- Hybride
=> Comme une web-app mais en plus rapide.
Ma première PWA
Commencez par une page de base
HTML/CSS et quelques images.
Votre CV en ligne, par exemple?
Firebase
Installer firebase-tools (npm)
Créer un projet en local
firebase init => Hosting
firebase deploy
Vérifier que ça marche
Note : si votre site est purement statique, surge peut suffire.
C'est parti!
Lancer Lighthouse
=> Chrome obligatoire
Service worker
Déclarer dans le HTML
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function() {
console.log('Service Worker Registered');
});
}
</script>Service worker
sw.js
var cacheName = 'cv-page';
var filesToCache = [
'/',
'/index.html',
'/cv.css'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
return response || fetch(event.request);
})
);
});Et voilà!
Vos fichiers et infos sont stockés en cache pour un accès hors-connexion.
Le saviez-vous? On peut tester directement le offline dans les devtools Chrome.
Icônes
Il est impératif d'avoir des icônes pour les tailles suivantes :
128x128, 144x144, 152x152, 192x192, 512x512
Ajoutez-les aussi dans fichiers à mettre en cache!
Attention : outil magique!
Si vous n'avez pas d'icône ou que vous ne voulez pas vous embêter à la mettre sous tous les bons formats.
Le look PWA
Ajoutez deux petites lignes dans le header de votre html :
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#008000"/>
<link rel="manifest" href="manifest.json">manifest.json
C'est dans ce fichier que vous aurez tout ce qu'il faut pour une PWA qui dépote.
Modifiez quelques valeurs, voyez ce que ça fait.
{
"name": "CV PWA",
"short_name": "Hi",
"icons": [{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#FF9800",
"theme_color": "#FF9800"
}Youpi
Arrivés là, on a un cv :
- responsif
- installable
- avec un splash screen
- disponible hors-ligne
Et tout cela sur la plupart des navigateurs et supports!
Mais... et les notifications?
Les notifications
Le nécessaire
Un serveur avec une base de données pour émettre les notifs et les stocker si besoin.
Un client pour gérer les autorisations.
Des clés pour sécuriser les échanges.
=> beaucoup d'efforts pour une feature intrusive
(sauf si ça vaut VRAIMENT le coup)
(ou que vous n'avez pas le choix)
Ressources
Astuces
- Chrome DevTools => Audits => Progressive WebApps
- PWABuilder
Pour aller plus loin
Vous trouverez facilement des templates pour faire des PWA avec React, Vue et autres.
Vous pouvez tout à fait prévoir une version PWA pour un site existant.
Une vidéo qui présente plein de choses qu'on peut faire avec une PWA.
PWA 101
By LauDev
