PWA Builder a été conçu par Microsoft pour transformer les sites Web en Applications. C'est un outil open source de développeurs qui vous aide à construire des PWA de haute qualité.
Voyons dans les lignes qui suivent la façon de générer le Service Worker, le Manifest, le sitemap, le Robot, les icônes et bien d'autres.
- Comment fonctionne le Service Worker
Un Service Worker est un script que les navigateurs exécutent en arrière-plan. Il joue le rôle de proxy entre votre application, le réseau et le navigateur. Il assure l'interconnexion, voire la synchronisation entre ces trois (3) éléments. Le service Worker peut être personnalisé pour être utiliser tout naturellement en ligne. Aussi, il peut utiliser des ressources de votre cache en récupérant les données du LocalStorage si votre réseau n'est pas disponible et rend votre application hors-ligne.
Ainsi, vous pouvez enregistrer le Service Worker à travers ces méthodes:
- rendez-vous sur la plateforme de PWA Builder pour copier ce dont vous avez besoin en cliquant ici;
- vous pouvez directement copier ce bout de code pour l'insérer dans votre code HTML dans <body></body>; juste avant vos balises <script> comme suit (suivez l'ordre) :
Ensuite, il vous faudra enregistrer à la racine de votre projet ce fichier sw.js :
importScripts("workbox-v5.1.4/workbox-sw.js");
workbox.setConfig({ modulePathPrefix: "workbox-v5.1.4/" });
const precacheManifest = [];
if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`);
workbox.core.setCacheNameDetails({
prefix: 'ccp',
suffix: 'v1',
precache: 'precache',
runtime: 'run-time',
});
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
Pour mettre en cache vos styles google fonts il faut ce bout de code puissant:
// Cache the Google Fonts stylesheets with a stale while revalidate strategy.
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
purgeOnQuotaError: true,
}),
],
}),
);
Vous pouvez également utiliser ceci :
import {ExpirationPlugin} from 'workbox-expiration';
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
// Cache Google Fonts with a stale-while-revalidate strategy, with
// a maximum number of entries.
registerRoute(
({url}) => url.origin === 'https://fonts.googleapis.com' ||
url.origin === 'https://fonts.gstatic.com',
new StaleWhileRevalidate({
cacheName: 'google-fonts',
plugins: [
new ExpirationPlugin({maxEntries: 20}),
],
}),
);
De même, pour mettre en cache vos images, fichiers JavaScript, feuille de style css il faut :
workbox.routing.registerRoute(
new RegExp('/images/'),
new workbox.strategies.CacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 30 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 14,
purgeOnQuotaError: true,
}),
]
})
);
Ici vous pouvez changer le '/images/' & '/image-cache/' en :
- '/css/' & '/css-cache/' s'il s'agit de mettren e cache vos feuilles de style;
- '/js/' & '/js-cache/' s'il s'agit de mettre en cache vos fichiers JavaScript;
- '/css/' & '/css-cache/' s'il s'agit de mettre en cache vos feuilles de style;
Pour terminer en beauté votre ficher sw.js, ajouter ce code esle:
} else {
console.log(`Boo! Workbox didn't load 😬`);
}
const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin('myQueueName', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});
workbox.routing.registerRoute(
/\/api\/.*\/*.json/,
new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin]
}),
'POST'
);
Ou utiliser ce code simplifié pour mettre en cahce vos images, votre JavaScript et votre CSS :
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
import {registerRoute} from 'workbox-routing';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'images',
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}),
);
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'script' ||
request.destination === 'style',
new StaleWhileRevalidate()
);
Pour bien comprendre ces démarches, je vous conseille de visiter le site de WorkBox.
Enfin, votre Service Worker est opérationnel. Pour le vérifier, aller sur la site web dans lequel vous venez d'ajouter le sw.js. Une fois sur sur le site, faite clic droit et cliquer sur inspecter la page. Ceci étant fait, aller dans l'onglet application.
Vous devriez voir ceci:
2. Générer des icônes pour le manifest
Pour générer des icônes carrées, de bonne qualités, de bon format et de bonne taille pour toutes les plateformes, aller sur le site de PWA Builder/imageGenerator.
Après avoir générer et télécharger vos icônes, il est temps de construire votre manifest.webmanifest.
3. Générer le manifest.webmanifest
Le manifest.webmanifest est un fichier à titre informatif. En effet, c'est dans ce fichier que vous aller saisir le titre de votre application, définir la couleur thème, la couleur du background, etc... Sans plus tarder, jetons un coup d'œil à ce exemple de code que vous pouvez facilement générer à partir d'ici; ou suivez ces étapes :
{
"dir": "auto",
"lang": "fr",
"name": "Le nom de votre application",
"scope": "/",
"display": "standalone",
"start_url": "/?source=pwa",
"short_name": "Nom cort de votre application oul",
"theme_color": "La couleur du thème de votre application",
"description": "La description de votre application",
"orientation": "portrait",
"background_color": "La couleur arrière de votre application",
"related_applications": [{
"platform": "windows",
"url": "https://lien de votre site web/manifest.webmanifest"
}],
"prefer_related_applications": false,
"screenshots": [{
"src": "src/images/icons/screenshot/screenshot.png",
"type": "image/png",
"sizes": "512x512"
}],
"categories": [
"music"
],
"icons": [
{
"src": "src/images/windows10/Square71x71Logo.scale-400.png",
"sizes": "284x284"
}
4. Générateur de XML Site Map fichier
Il est très utilisé car il permet aux développeurs d'avoir une carte de leur site web. Une fois votre site web en ligne, copier le lien de ce site et aller sur SiteMap pour le coller dans la barre de recherche prévu à cet effet. Une fois terminer, il vous sera demander de télécharger le fichier et le mettre dans la racine de votre projet. Ce ci étant fait, vous devriez créer un ficher appelé : robot toujours à la racine de votre projet et ajouter le code suivant
User-agent: *
Allow: /
Sitemap: https://le lien de votre site/sitemap.xml
Nous avons touché les points essentiels qui permettraient à votre site web d'être transformé en application. Ainsi, pour un meilleur rendu de votre PWA, veuillez ajouter ce bout de code en ajoutant les informations de votre application:
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<link rel="manifest" href="manifest.json"/>
<meta name="theme-color" content="#f6f6f6"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="msapplication-TileColor" content="#6a8be0">
<meta name="msapplication-TileImage" content="img.png">
<title>Title</title>
<meta name="author" content=""/>
<meta name="title" content="">
<meta name="keywords" content=""/>
<meta name="description" content="">
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:image" content="" />
<meta property="og:image:secure_url" content="" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="canonical" href=""/>
<link rel="shortcut icon" href="" type="image/x-icon" />
<link rel="icon" href="" type="image/png" />
<link rel="apple-touch-icon" sizes="57x57" href="">
<link rel="apple-touch-icon" sizes="60x60" href="">
<link rel="apple-touch-icon" sizes="72x72" href="">
<link rel="apple-touch-icon" sizes="76x76" href="">
<link rel="apple-touch-icon" sizes="114x114" href="">
<link rel="apple-touch-icon" sizes="120x120" href="">
<link rel="apple-touch-icon" sizes="144x144" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
<link rel="apple-touch-icon" sizes="180x180" href="">
<link rel="icon" type="image/png" sizes="512x512" href="">
<link rel="icon" type="image/png" sizes="192x192" href="">
<link rel="icon" type="image/png" sizes="96x96" href="">
<link rel="icon" type="image/png" sizes="16x16" href="">
</head>
Pour vérifier que votre PWA fonctionne bien, aller sur le site de PWABuilder et entrer l'url de votre site web. Après une analyse, cette page vous donnera les détails du fonctionnement des éléments que nous avons vu précédemment. Vous verrez quels sont les éléments qui n'ont pas été bien codé.
Ensuite, allez sur votre site (avec l'url). Une fois la page chargée, faite un clic droit. Dans le menu qui s'ouvra, aller dans "inspecter la page" . Dans les onglets en haut à droite, cliquer sur "lighthouse" et générez le rapport. Si votre PWA fonctionne correctement, vous devriez voir ceci :
A très bientôt pour un nouvel article. Si vous avez manquez mon premier article sur La découverte de PWA, je vous invite à le lire. 😉
C'est super j'adore ton blog
RépondreSupprimerMerci beaucoup
Supprimer✨✨
RépondreSupprimerSuper 💪💪bravo
RépondreSupprimer