Service Worker API

Lesservice workers agissent principalement comme des serveurs intermédiaires entre les applications web, le navigateur, et le réseau (lorsque celui-ci est disponible). Ils sont conçus, entre autres, pour permettre la création de fonctionnalités hors ligne, intercepter les requêtes réseau, et agir en conséquence selon que le réseau est disponible ou non, et mettre à jour les fichiers qui sont situés sur le serveur. Ils permettent également d'accéder aux API de notificationspush et de synchronisation en arrière-plan.

Concepts et utilisation desservice workers

Unservice worker est unworker manipulé avec des évènements et enregistré relativement à une origine et à un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page web à laquelle il est associé, interceptant et modifiant les requêtes de ressources et de navigation, permettant une gestion fine de la mise en cache des ressources afin de permettre un contrôle complet sur le comportement de votre application dans certains cas (le plus évident étant l'absence de réseau).

Unservice worker s'exécute dans le contexte d'unworker et n'a donc pas accès au DOM. Il s'exécute dans unthread différent duthread JavaScript principal et n'est donc pas bloquant. Il est conçu pour fonctionner de façon complètement asynchrone. Aussi, les API synchrones commeXHR etWeb Storage ne peuvent pas être utilisées dans le code d'unservice worker.

Pour des raisons de sécurité, lesservice workers ne fonctionnent qu'avec le protocole HTTPS. En effet, les connexions HTTP sont susceptibles d'être victimes d'injection de code parattaque du monstre du milieu et l'accès à ces API aggraverait ces attaques.

Note :Sur Firefox, lesservice workers ne fonctionnent pas en navigation privée.

Note :Sur Firefox, il est possible de tester lesservice workers via HTTP (donc de façon non-sécurisée) en cochant l'optionActiver les Service Workers via HTTP (lorsque la boîte à outils est ouverte) dans les options des outils de développement.

Note :Lesservice workers utilisentles promesses. Ils attendent généralement l'arrivée de réponses auxquelles ils répondront par une action de réussite ou d'échec. L'architecture asynchrone des promesses est idéale pour ce mode de fonctionnement.

Enregistrement

On commence par enregistrer unservice worker à l'aide de la méthodeServiceWorkerContainer.register(). Si cela fonctionne, leservice worker sera téléchargé sur le client et tentera les étapes d'installation et d'activation (voir ci-après) pour les URL auxquelles la personne accède pour toute l'origine concernée ou le sous-ensemble qui a été indiqué.

Téléchargement, installation et activation

À partir de ce point, leservice worker suivra ce parcours :

Téléchargement
Installation
Activation

Leservice worker est téléchargé immédiatement lorsque la personne accède pour la première fois à une page/un site contrôlé par unservice worker.

Ensuite, leservice worker est mis à jour :

Lorsque la personne navigue sur une page concernée par la portée duservice worker.
Lorsqu'un évènement est déclenché sur leservice worker et qu'il n'a pas été téléchargé lors des dernières 24 heures.

Une tentative d'installation a lieu lorsque le fichier téléchargé est nouveau, soit parce qu'il est différent (en termes d'octets) duservice worker actuel, ou parce que c'est la première fois qu'unservice worker est rencontré pour cette page/ce site.

Si c'est la première fois qu'unservice worker est disponible, une tentative d'installation a lieu et si elle réussit, il est activé.

S'il y a déjà unservice worker existant disponible, la nouvelle version est installée en arrière-plan mais n'est pas activée immédiatement. À cet instant, leservice worker est considéré commeworker en attente. L'activation a lieu dès qu'il n'y a plus de pages chargées qui utilisent encore l'ancienservice worker. Dès qu'il n'y a plus de pages à charger, le nouveauservice worker est activé et devient donc leworker actif. L'activation peut être déclenchée plus tôt en utilisantServiceWorkerGlobalScope.skipWaiting() et les pages existantes peuvent alors être revendiquées par leworker actif avecClients.claim().

Il est possible d'écouter l'évènementinstall, cela permet généralement de préparer leservice worker à être utilisé lorsque cet évènement se déclenche (par exemple en créant un cache avec l'API de stockage et en y plaçant des données qui permettront l'exécution de l'application hors-ligne).

Il existe également un évènementactivate qui est déclenché à l'activation. À ce moment, il est généralement utile de rafraîchir les vieux caches et autres éléments associés à l'ancienne version duservice worker.

Unservice worker peut répondre aux requêtes en utilisant l'évènementFetchEvent. Les réponses à ces requêtes peuvent être modifiées en utilisant la méthodeFetchEvent.respondWith().

Note :Comme les évènementsinstall/activate peuvent prendre un certain temps à finir, la spécification fournit une méthodewaitUntil(). Lorsque celle-ci est appelée sur les évènementsinstall ouactivate avec une promesse, les évènements fonctionnels commefetch etpush attendront la résolution de la promesse.

Pour un tutoriel complet illustrant comment construire un premier exemple simple fonctionnel, voir le guideUtiliser lesservice workers.

Autres idées de cas d'usage

Lesservice workers sont également conçus pour répondre à ces scénarios :

Synchronisation de données en arrière-plan
Réponse à des requêtes de ressource depuis d'autres origines
Réception de mises à jour de données coûteuses en calcul (par exemple la géolocalisation ou le gyroscope) afin que plusieurs pages puissent utiliser un même ensemble de données
Compilation et gestion de dépendances côté client à des fins de développement (par exemple CoffeeScript, less, modules CJS/AMD)
Déclencheurs (hooks) pour des services d'arrière-plan
Gestion de modèles personnalisés selon le motif des URL
Amélioration des performances, par exemple pour précharger les ressources qui seront probablement nécessaires ensuite (par exemple la prochaine image d'un album que la personne parcourt).

À l'avenir, lesservice workers pourront réaliser d'autres tâches qui rapprocheront la plateforme web des applications natives. D'autres spécifications peuvent déjà exploiter les contextes desservice workers, par exemple :

Synchronisation en arrière-plan pour démarrer unservice worker même lorsqu'il n'y a personne sur le site afin de mettre à jour les caches, etc.
Réaction aux messagespush pour démarrer unservice worker afin d'envoyer un message aux personnes pour leur indiquer que du nouveau contenu est disponible
Réaction à une date/heure donnée
Entrée dans une zone géographique donnée.

Interfaces

Cache: Représente le stockage pour la paire d'objetsRequest /Response mis en cache pendant la vie duservice worker.
CacheStorage: Représente le stockage pour les objetsCache. Fournit un répertoire racine pour tous les caches nommés auxquels unservice worker peut accéder et maintient la liste des noms des objetsCache correspondants.
Client: Représente la portée d'un client deservice worker. Un client deservice worker est un document dans le contexte d'un navigateur ou unSharedWorker, contrôlé par unworker actif.
Clients: Représente un conteneur d'une liste d'objetsClient. Il s'agit de la méthode principale pour accéder aux clients duservice worker actif pour l'origine courante.
ExtendableEvent: Étend la durée de vie des évènementsinstall etactivate émis sur la portéeServiceWorkerGlobalScope pendant le cycle de vie d'unservice worker. Cela permet de s'assurer que les évènements fonctionnels (commeFetchEvent) ne sont pas diffusés auservice worker tant qu'il n'a pas mis à jour ses modèles de base de données, supprimé ses éléments de cache expirés, etc.
ExtendableMessageEvent: Un objet représentant l'évènementmessage déclenché sur unservice worker (lorsqu'un message de canal est reçu sur la portéeServiceWorkerGlobalScope depuis un autre contexte). Permet d'étendre la durée de vie de tels évènements.
FetchEvent: Le paramètre passé au gestionnaire d'évènementonfetch. Représente une action de récupération diffusée sur la portéeServiceWorkerGlobalScope d'unservice worker. Contient des informations à propos de la requête et de la réponse associé. Fournit une méthodeFetchEvent.respondWith() qui permet de fournir une réponse arbitraire à la page contrôlée.
InstallEventObsolète Non standard: Le paramètre passé au gestionnaire d'évènement oninstall. Représente une action d'installation diffusée sur la portéeServiceWorkerGlobalScope d'unservice worker. Il s'agit d'une interface enfant deExtendableEvent et permet donc de s'assurer que les évènements fonctionnels commeFetchEvent ne sont pas diffusés pendant l'installation.
NavigationPreloadManager: Fournit des méthodes pour gérer le préchargement des ressources avec unservice worker.
Navigator.serviceWorker: Renvoie un objetServiceWorkerContainer qui donne accès à l'enregistrement, la suppression, la mise à jour et la communication avec les objetsServiceWorker pour ledocument associé.
NotificationEvent: Le paramètre passé au gestionnaire d'évènementonnotificationclick. L'interfaceNotificationEvent représente un évènement de clic de notification diffusé sur la portéeServiceWorkerGlobalScope d'unservice worker.
ServiceWorker: Représente unservice worker. Plusieurs contextes de navigation (par exemple des pages, desworkers) peuvent être associés au même objetServiceWorker.
ServiceWorkerContainer: Fournit un objet représentant leservice worker comme une unité dans l'écosystème réseau, avec des utilitaires pour enregistrer, décommissionner, mettre à jour desservice workers et accéder à l'état desservice workers et de leur enregistrement.
ServiceWorkerGlobalScope: Représente le contexte global d'exécution d'unservice worker.
MessageEvent: Représente un message envoyé à une portéeServiceWorkerGlobalScope.
ServiceWorkerRegistration: Représente l'enregistrement d'unservice worker.
SyncEventExpérimental: L'interfaceSyncEvent représente une action de synchronisation diffusée sur la portée ServiceWorkerGlobalScope d'unservice worker.
SyncManagerExpérimental: Fournit une interface pour enregistrer et écouter les enregistrements de synchronisation.
WindowClient: Représente la portée d'un client deservice worker qui est un document dans le contexte d'un navigateur, contrôlé par unworker actif. Il s'agit d'un type particulier d'objetClient avec certaines méthodes et propriétés complémentaires.