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.

Favicon generator

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.

Et le générateur qui va bien.

{
  "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"
}