La ventaja de la API de ServiceWorker de JavaScript es que permite a los desarrolladores web controlar fácilmente los cachés. Aunque el uso de tecnologías como Etags también es una tecnología para controlar los cachés, el uso de JavaScript permite que los programas controlen los cachés más potentes y libremente. Por supuesto, Strong tiene sus ventajas y desventajas: debe realizar tratamiento después del cuidado. El llamado tratamiento posterior al cuidado es limpiar el caché.
Echemos un vistazo a cómo crear un objeto de caché, agregue los datos de caché de solicitud en el caché, elimine los datos de caché de solicitud de la memoria caché y finalmente cómo eliminar completamente el caché.
Determine el soporte del navegador para la API de caché de objeto de caché
Verifique si el navegador admite la API de caché ...
if ('Caches' en la ventana) {// tiene soporte!}… Compruebe si hay un objeto de Caches en la ventana.
Crear un objeto de caché
La forma de crear un objeto de caché es usar caches.open () y pasar el nombre de la memoria caché:
Caches.open ('test-cache'). Entonces (function (caché) {// se crea el caché y puede acceder a él ahora});Este método abre de caché. Devuelve una promesa, y el objeto de caché en él está recientemente creado. Si se ha creado antes, no se recreará.
Agregar datos en caché
Para este tipo de caché, puede considerarlo como una variedad de objetos de solicitud, y los datos de respuesta obtenidos por la solicitud de solicitud se almacenarán en el objeto de caché por valor clave. Hay dos formas de agregar datos al caché: agregar y agregar. Use estos dos métodos para agregar la dirección de la solicitud a almacenarse en caché. Para una introducción al objeto de solicitud, puede consultar el artículo de la API de Fetch.
Use el método addall para agregar solicitudes de caché en lotes:
Caches.open ('test-cache'). entonces (function (cache) {cache.addall (['/', '/images/logo.png']) .then (function () {// cached!});});Este método addall puede aceptar una matriz de direcciones como parámetro, y los datos de respuesta de estas direcciones de solicitud se almacenarán en caché en el objeto de caché. Addall devuelve una promesa. Para agregar una sola dirección, use el método Agregar:
Caches.open ('test-cache'). Entonces (function (cache) {cache.add ('/page/1'); // se solicitará la dirección "/página/1" y los datos de respuesta se almacenarán en caché.});El método add () también puede aceptar una solicitud personalizada:
Caches.open ('test-cache'). entonces (function (cache) {cache.add (nueva request ('/page/1', {/* requestameter*/}));});Es muy similar al método add (). El método Put () también puede agregar la dirección de solicitud y agregar sus datos de respuesta al mismo tiempo:
fetch ('/page/1'). entonces (function (respuesta) {return caches.open ('test-cache'). entonces (function (cache) {return cache.put ('/página/1', respuesta);});});Acceder a datos en caché
Para ver los datos de solicitud cambiados, podemos usar el método Keys () en el objeto de caché para obtener todos los objetos de solicitud en caché en un formulario de matriz:
Caches.open ('test-cache'). entonces (function (cache) {cache.keys (). entonces (function (cachedrequests) {console.log (cachedrequests); // [request, request]});});/*request {bodyususeused: falsos credenciales: "omitir" encabezados: integridad de los encabezados: "" Método: "get" mode "mode" no-cors "no-cors" no-cors "no diotect" no diod. "Sigue" referente: "" URL: "http://www.webhek.com/images/logo.png"h}*/Si desea ver el contenido de respuesta de la solicitud de solicitud en caché, puede usar el método cache.match () o cache.matchall ():
Caches.open ('test-cache'). entonces (function (cache) {cache.match ('/page/1'). entonces (function (coincidenteeResponse) {console.log (matchedResponse);});});/*Respuesta {Body: (...), Bodyused: False, Headers: Healers, OK: True, Status: 200, StatusText: "Ok,", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ". "https://www.webhek.com/page/1"}*/Para obtener más información sobre el uso y los detalles de los objetos de respuesta, puede consultar el artículo de Fetch API.
Eliminar datos en el caché
Eliminar datos del caché, podemos usar el método Delete () en el objeto de caché:
Caches.open ('test-cache'). entonces (function (cache) {cache.delete ('/página/1');});De esta manera, no habrá datos de solicitud de más /1 en el caché.
Obtenga el nombre de caché en el caché existente
Para obtener el nombre de los datos de caché que ya existe en el caché, necesitamos usar el método Caches.Keys ():
Caches.keys (). Entonces (function (cachekeys) {console.log (cachekeys); // ex: ["test-cache"]});Window.caches.Keys () devuelve una promesa.
Eliminar un objeto de caché
Para eliminar un objeto en caché, solo necesita el nombre de la clave en caché:
Caches.delete ('test-cache'). entonces (function () {console.log ('cache eliminado con éxito!');});Cómo eliminar los datos cachorros viejos en grandes cantidades:
// Supongo que `cache_name` es el nombre del nuevo caché // ahora borre el viejo caché var cache_name = 'versión-8'; // ... caches.keys (). Entonces (function (cachenames) {return promise.all (cachenames.map (function (cachename) {if (cachename! = Cache_name {return cachenames (cachename) }}));});¿Quiere convertirse en un experto en trabajadores de servicios? Vale la pena poner el código anterior en su biblioteca. Firefox y Google Chrome Support Service Worker, y creo que más sitios web y aplicaciones utilizarán esta tecnología de almacenamiento en caché para mejorar su velocidad de funcionamiento pronto.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.