Ce support sur les Progressive Web Apps s’adresse aux développeurs qui souhaitent développer des applications utilisables depuis un navigateur qui, tout en capitalisant sur les technologies standards du Web, proposent une expérience utilisateur similaire à celle des applications mobiles.

Dans ce support, l’auteur détaille les technologies et concepts mis en œuvre dans le développement de Progressive Web Apps. Le lecteur commence ainsi par étudier le Web App Manifest qui permet d’ajouter des métadonnées à une application pour activer certaines fonctionnalités ainsi que les notions de service worker et d’API Cache, utiles notamment pour la création d'expériences de navigation déconnectée efficaces. L’auteur présente ensuite la persistance de données côté client avec l’utilisation de l’API IndexedDB et la synchronisation entre l’application et le serveur avec l’API Background Sync. Un chapitre est dédié aux bonnes pratiques de développement qui permettent d’accroître les performances générales de l’application.
Pour finir, l’auteur présente la nouvelle version HTTP/2 du protocole HTTP et la mise en place de notifications push avec l’API Notification.

Tout au long du support, l’auteur propose une mise en pratique permettant au lecteur d’améliorer une application existante, un mini-client GitHub, pour la rendre compatible avec les standards d’une Progressive Web App.

Des éléments complémentaires sont disponibles en téléchargement sur le site www.editions-eni.fr

Téléchargements

• Des fichiers complémentaires (1230 Ko)

Introduction

1. 1. Généralités
2. 2. Deux sigles : PRPL et FIRE
3. 3. Success stories
4. 4. Solutions concurrentes
   1. 4.1 Applications natives
   2. 4.2 Applications web
   3. 4.3 Applications hybrides
5. 5. Ce qui ne sera pas abordé dans ce livre
   1. 5.1 Initialisation d’une PWA avec Angular
   2. 5.2 Initialisation d’une PWA avec React
   3. 5.3 Initialisation d’une PWA avec Vue.js
6. 6. Présentation de l’application fil rouge

Prérequis

1. 1. Introduction
2. 2. Responsive Web Design
   1. 2.1 Définition du viewport
   2. 2.2 Media queries
3. 3. Outils d'aide aux développement d'application web mobile
4. 4. Performances
   1. 4.1 Optimisation de la taille des livrables
   2. 4.2 Lazy loading
   3. 4.3 Pattern Module/No Module
   4. 4.4 Compression des ressources statiques
   5. 4.5 Optimisation de l’application en fonction des capacités de l’appareil
   6. 4.6 Chargement du strict minimum et le plus rapidement possible
   7. 4.7 Automating client hints
5. 5. HTTPS
6. 6. Auditer une application
7. 7. Application fil rouge

Web App Manifest

1. 1. Introduction
2. 2. Contenu à définir
3. 3. Add to Home Screen
4. 4. Critères pour avoir une application installable
5. 5. Custom Install Banner
6. 6. Interaction CSS et JavaScript
7. 7. Compatibilité navigateurs
8. 8. Application fil rouge

Promise et Fetch

1. 1. Introduction
2. 2. Objet Promise
   1. 2.1 Présentation
   2. 2.2 Méthodes utilitaires
   3. 2.3 Conversions
   4. 2.4 Async/Await
3. 3. API Fetch
4. 4. Application fil rouge

Service Worker

1. 1. Introduction
2. 2. Enregistrement du Service Worker
3. 3. Communication avec le Service Worker
4. 4. Événements
   1. 4.1 Événement fetch
   2. 4.2 Événement install
   3. 4.3 Événement activate
   4. 4.4 Événements updatefound et statechange
5. 5. Utilisation de scripts externes
6. 6. Cache du Service Worker
7. 7. Débogage d'un Service Worker
8. 8. Compatibilité navigateurs
9. 9. Application fil rouge

Cache

1. 1. Introduction
2. 2. Événements offline et online
3. 3. API Network Information
4. 4. API Cache
   1. 4.1 Méthode add
   2. 4.2 Méthode addAll
   3. 4.3 Méthode match
   4. 4.4 Méthode matchAll
   5. 4.5 Méthode put
   6. 4.6 Méthode delete
   7. 4.7 Méthode keys
5. 5. Où utiliser l'API Cache ?
6. 6. Premières interaction avec l'API Cache
7. 7. Intégration dans les Service Workers
8. 8. Stratégies de mise en cache
   1. 8.1 Cache only
   2. 8.2 Network only
   3. 8.3 Network falling back to cache
   4. 8.4 Stale-while-revalidate
   5. 8.5 Stratégie complexe
9. 9. Versionning du cache
10. 10. Workbox
11. 11. API Content Indexing
12. 12. Compatibilité navigateurs
13. 13. Application fil rouge

IndexedDB

1. 1. Introduction
2. 2. API localStorage et sessionStorage
3. 3. API IndexedDB
4. 4. Manipuler des objectStore
5. 5. Manipuler des données
6. 6. Cursor
7. 7. Index
8. 8. Stratégie de stockage
9. 9. Compatibilité navigateurs
10. 10. Application fil rouge

Background Sync

1. 1. Introduction
2. 2. API Background Sync
3. 3. API Periodic Background Sync
4. 4. Compatibilité navigateurs
5. 5. Application fil rouge

Performances générales

1. 1. Introduction
2. 2. Concaténation
3. 3. Suppression du code non nécessaire
4. 4. Gestion des images
   1. 4.1 Sprites
   2. 4.2 Balise picture
   3. 4.3 Attribut loading
   4. 4.4 Domain sharding
   5. 4.5 IntersectionObserver
5. 5. Chargement des fichiers JavaScript
6. 6. Priority hints
7. 7. Server-side rendering
8. 8. Application fil rouge

HTTP/2

1. 1. Introduction
2. 2. Premiers pas avec HTTP/2
3. 3. Nouvelles fonctionnalités
   1. 3.1 Format binaire
   2. 3.2 TLS
   3. 3.3 Multiplexage
   4. 3.4 Compression des headers
   5. 3.5 Server push
4. 4. Activation du protocole HTTP/2 avec Nginx
5. 5. Compatibilité navigateurs
6. 6. Application fil rouge

Notifications

1. 1. Introduction
2. 2. API Notification
3. 3. API Push
4. 4. Événements
5. 5. Mise en place côté serveur
6. 6. API Notification Triggers
7. 7. Compatibilité navigateurs
8. 8. Application fil rouge

Projet Fugu

1. 1. Introduction
2. 2. API Geolocation
3. 3. API Screen Orientation
4. 4. API Badging
5. 5. API Contact Picker
6. 6. API Get Installed Related Apps
7. 7. API Wake Lock
8. 8. API Shape Detection
9. 9. API Web Share
10. 10. API Web Share Target
11. 11. API SMS Receiver
12. 12. API Payment Request
13. 13. API Picture in Picture
14. 14. API Portal
15. 15. Application fil rouge

Déploiement sur les stores

1. 1. Introduction
2. 2. Play Store
3. 3. Apple Store
4. 4. Microsoft Store
5. 5. pwabuilder

Boîte à outils

1. 1. Outils vus dans le chapitre Prérequis
2. 2. Outils vus dans le chapitre Web App Manifest
3. 3. Outils vus dans le chapitre Promise et Fetch
4. 4. Outils vus dans le chapitre Service Worker
5. 5. Outils vus dans le chapitre Cache
6. 6. Outils vus dans le chapitre IndexedDB
7. 7. Outils vus dans le chapitre Background Sync
8. 8. Outils vus dans le chapitre Performances générales
9. 9. Outils vus dans le chapitre HTTP/2
10. 10. Outils vus dans le chapitre Notifications
11. 11. Outils vus dans le chapitre Déploiement sur les stores
14. Index