---
title: Publier une PWA
tags: support, pwa, frontend
robots: noindex, nofollow
author: Julien Noyer
---

# Publier une PWA


## Support

- Définition : https://hackmd.io/3ZjnKxprQl-AnHAlfbqR1A
- Angular : https://hackmd.io/dx5qJJ6dQSS86neoeyLSUA
- API : https://github.com/DWS-paris/NODEapi_boilerplate

## Package.json

{
  "name": "mcbadist",
  "version": "1.0.0",
  "description": "Répertoire intégrant les éléments nécessaires à la publication d'une PWA depuis une application Angular",
  "main": "index.js",
  "scripts": {
    "build":"cd ../APPclient && ng build --output-path ../APPdist/www --prod && echo 'Build Angular project -> done'",
    "set-icons": "cp -r ./APPdist/icons/ ./www/assets/icons/ && echo 'Set PWA icons -> done'",
    "set-sw-static": "sh ./PWAservices/list.file.sh",
    "set-sw": "cat ./PWAservices/service-worker.static.js ./PWAservices/service-worker.event.js >  service-worker.js && mv service-worker.js ./www && echo 'Set Service Worker -> done \n \n PWA builded!'",
    "add-manifest": "cp ./PWAservices/manifest.json ./www/manifest.json",
    "add-sw": "echo 'START add-sw \n' && npm run build && npm run set-icons && npm run set-sw-static && npm run set-sw && npm run add-manifest",
    "deploy": "scp -r ./www/ [e-mail]:/folder/to/APPdist",
    "test": "cd www && live-server"
  },
  "author": "",
  "license": "ISC"
}

## manifest.json

{
  "lang": "fr",
  "name": "APP name",
  "short_name": "MCBA",
  "dir": "ltr",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/?homescreen=1",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "description": "APP Description",
  "icons": [
    {
      "src": "./assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

## service-worker.event.js

/*
Gestion des événements
*/
    // Installation du service worker
    self.addEventListener('install', async event => {
        // Création d'un cache pour les données statiques
        const staticCache = await caches.open('static-assets');
        // Ajout des données statiques dans le cache 
        staticCache.addAll(staticAssets);
    })

    // Récupérer les données depuis le Service Worker
    self.addEventListener('fetch', event => {
        // Récupération des données de la requête
        const request = event.request;

        // Récupération de l'URL de la requête
        const url = new URL(request.url);
        
        // Gestion des stratégies de cache
        if( url.origin === location.origin ){
            
            // Récuperer les données depuis le cache
            event.respondWith( cacheFirst(request) );

        } else{
            // Récupérer les données depuis une API
            event.respondWith( networkFrist(request) );
        };
    });
//

/*
Définition des stratégies
*/
    const cacheFirst = async (request) => {
        // Vérifier la présence de données dans le cache
        const cachedResponse = await caches.match(request);
        // Renvoyer le résultat : données du cache ou depuis le server
        return cachedResponse || fetch(request);
    };

    const networkFrist = async (request) => {
        // Création d'un cache pour les données dynamiques
        const dynamicCache = await caches.open('dynamic-assets');

        // Récupération des données depuis une API
        try {
            // Ajout des données dans le cache dynamique en mode connecté
            const response = await fetch(request);
            dynamicCache.put( request, response.clone() );

            // Revoyer les données dans le vue
            return response;

        } catch (error) {
            // Récupérer les données du cache en mode hors-connexion
            const cachedResponse = await dynamicCache.match(request);

            // Renvoyer les données du cache ou les données du fallback
            return cachedResponse || await caches.match('./fallback/no-news.json');
        };
    };
//

## list. file. sh

echo  "const staticAssets = [" > ./PWAservices/service-worker.static.js

for file in ./www/*; do
    printf "'./$(basename "$file")', \n" | egrep -v '^d' >> ./PWAservices/service-worker.static.js
done

printf "];\n\n\n" >> ./PWAservices/service-worker.static.js