L'API Cache fait partie de la spécification Service Worker et constitue un excellent moyen d'avoir plus de puissance sur la mise en cache des ressources.
- introduction
- Détecter si l'API Cache est disponible
- Initialiser un cache
- Ajouter des éléments au cache
- Récupérer un élément du cache
- Obtenez tous les éléments dans une cache
- Obtenez tous les caches disponibles
- Supprimer un élément du cache
- Supprimer un cache
introduction
L'API Cache fait partie de la spécification Service Worker et constitue un excellent moyen d'avoir plus de puissance sur la mise en cache des ressources.
Cela vous permet demettre en cache les ressources adressables par URL, ce qui signifie des actifs, des pages Web, des réponses API HTTP.
C'estne pasdestiné à mettre en cache des morceaux de données individuels, ce qui est la tâche duAPI IndexedDB.
Il est actuellement disponible dans Chrome> = 40, Firefox> = 39 et Opera> = 27.
Safari et Edge ont récemment introduit une prise en charge.
Internet Explorer ne le prend pas en charge.
La prise en charge mobile est bonne sur Android, prise en charge sur Android Webview et dans Chrome pour Android, tandis que sur iOS, elle n'est disponible que pour les utilisateurs d'Opera Mobile et de Firefox Mobile.
Détecter si l'API Cache est disponible
L'API Cache est exposée via lecaches
objet. Pour détecter si l'API est implémentée dans le navigateur, vérifiez simplement son existence en utilisant:
if ('caches' in window) {
//ok
}
Initialiser un cache
Utilisez lecaches.open
API, qui renvoie unpromesseavec unobjet de cacheprêt à être utilisé:
caches.open('mycache').then(cache => {
// you can start using the cache
})
mycache
est un nom que j'utilise pour identifier le cache que je souhaite initialiser. C'est comme un nom de variable, vous pouvez utiliser n'importe quel nom que vous voulez.
Si le cache n'existe pas encore,caches.open
le crée.
Ajouter des éléments au cache
Lecache
object expose deux méthodes pour ajouter des éléments au cache:add
etaddAll
.
cache.add()
add
accepte une seule URL et, lorsqu'elle est appelée, elle récupère la ressource et la met en cache.
caches.open('mycache').then(cache => {
cache.add('/api/todos')
})
Pour permettre plus de contrôle sur la récupération, au lieu d'une chaîne, vous pouvez passer unDemanderobjet, partie de laRécupérer l'APIspécification:
caches.open('mycache').then(cache => {
const options = {
// the options
}
cache.add(new Request('/api/todos', options))
})
cache.addAll()
addAll
accepte un tableau et renvoie unpromesselorsque toutes les ressources ont été mises en cache.
caches.open('mycache').then(cache => {
cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
//all requests were cached
})
})
Récupérer et ajouter manuellement
cache.add()
récupère automatiquement une ressource et la met en cache.
L'API Cache offre un contrôle plus granulaire à ce sujet viacache.put()
. Vous êtes responsable de récupérer la ressource, puis de dire à l'API Cache de stocker une réponse:
const url = '/api/todos'
fetch(url).then(res => {
return caches.open('mycache').then(cache => {
return cache.put(url, res)
})
})
Récupérer un élément du cache
cache.match()
renvoie unRéponseobjet qui contient toutes les informations sur la requête et la réponse de la requête réseau
caches.open('mycache').then(cache => {
cache.match('/api/todos').then(res => {
//res is the Response Object
})
})
Obtenez tous les éléments dans une cache
caches.open('mycache').then(cache => {
cache.keys().then(cachedItems => {
//
})
})
cachedItemsest un tableau deDemanderobjets, qui contiennent l'URL de la ressource dans leurl
biens.
Obtenez tous les caches disponibles
Lecaches.keys()
La méthode répertorie les clés de chaque cache disponible.
caches.keys().then(keys => {
// keys is an array with the list of keys
})
Supprimer un élément du cache
Donné uncache
objet, c'estdelete()
La méthode en supprime une ressource mise en cache.
caches.open('mycache').then(cache => {
cache.delete('/api/todos')
})
Supprimer un cache
Lecaches.delete()
La méthode accepte un identificateur de cache et lorsqu'elle est exécutée, elle efface le cache et ses éléments en cache du système.
caches.delete('mycache').then(() => {
// deleted successfully
})
Téléchargez mon gratuitManuel du débutant JavaScript
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts