IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Llegiu abans AppCache i Service Workers

Tingueu en compte les diferències entre AppCache i Cache API a l'apartat introducció.

Introducció

Diferències entre AppCache i Cache API

The primary difference is that AppCache is a high-level, declarative API, with which you specify the set of resources you'd like the browser to cache; whereas Service Worker is a low-level, imperative, event-driven API with which you write a script that can intercept fetch events and cache their responses along with doing other things (like displaying push notifications).

The pros and cons are largely a function of API design: theoretically, AppCache is easier to use, while having more limited use cases; whereas Service Worker is harder to use, but is more flexible.

Nevertheless, AppCache is considered hard to use in practice due to poor design (see Application Cache Is A Douchebag for a list of design issues). And it has been deprecated, so it is being removed from browsers (per Using the application cache).

Thus the only reason to prefer AppCache is to offline an app on browsers that don't yet support Service Worker, as Kenneth Ormandy recommends in Don’t Wait for ServiceWorker: Adding Offline Support with One-Line.

Compare Can I use Service Workers? to Can I use Offline web applications? to see the differences in browser support. But note that browsers that support Service Worker, like Chrome and Firefox, are removing support for AppCache, so you'll need to implement both to offline your app across all browsers that support either standard. Recursos:

Història i AppCache

Vegeu AppCache

Suport

Cal comprovar si tenim suport amb:

if('caches' in window) {
  // Has support!
}

Recursos:

Operacions bàsiques amb la cache

Creating a Cache

S'utilitza el mètode caches.open i es posa un nom a la cache:

caches.open('test-cache').then(function(cache) {
  // Cache is created and accessible
});

Adding to Cache

Un cache és un array de Request objects que funcionen com a claus per obtenir les respostes emmagatzemades pel navegador. S'utilitzen dos mètodescaches.add i caches.addAll i es passa o la URl del recurs o un Request object ( vegeu també fetch API post):

caches.open('test-cache').then(function(cache) { 
  cache.addAll(['/', '/images/logo.png'])
    .then(function() { 
      // Cached!
    });
});

Observeu l'ús de Promises. Per afegir una sola URL:

caches.open('test-cache').then(function(cache) {
  cache.add('/page/1');  // "/page/1" URL will be fetched and cached!
});

O un Objecte Request a mida:

caches.open('test-cache').then(function(cache) {
  cache.add(new Request('/page/1', { /* request options */ }));
});
/<pre>

també hi he el mètode put amb una [[URL]] i un [[Response object]]:

<pre class="brush:javascript">
fetch('/page/1').then(function(response) {
  return caches.open('test-cache').then(function(cache) {
    return cache.put('/page/1', response);
  });
});

Exploring Cache

Per veure les request que ja han estat catxejades utilitzeu cache.keys:

caches.open('test-cache').then(function(cache) { 
  cache.keys().then(function(cachedRequests) { 
    console.log(cachedRequests); // [Request, Request]
  });
});

Resultat:

/*
Request {
  bodyUsed: false
  credentials: "omit"
  headers: Headers
  integrity: ""
  method: "GET"
  mode: "no-cors"
  redirect: "follow"
  referrer: ""
  url: "https://fullhost.tld/images/logo.png"
}


Per veure la resposta que esta catxejada cal utilitzar match i matchAll:

caches.open('test-cache').then(function(cache) {
  cache.match('/page/1').then(function(matchedResponse) {
    console.log(matchedResponse);
  });
});

Exemple resultat:

/*
Response {
  body: (...),
  bodyUsed: false,
  headers: Headers,
  ok: true,
  status: 200,
  statusText: "OK",
  type: "basic",
  url: "https://davidwalsh.name/page/1"
}
*/

Es pot aprendre més sobre els Response objects a l'article fetch API.

Removing a Cached Request

Per eliminar una request de la cache utilitzeu el mètode delete:

caches.open('test-cache').then(function(cache) {
  cache.delete('/page/1');
});

Getting Existing Cache Names

S'utilitza també el mètode caches.keys:

caches.keys().then(function(cacheKeys) { 
  console.log(cacheKeys); // ex: ["test-cache"]
});
window.caches.keys() again returns a promise.

Deleting A Cache

Per eliminar tota una cache:

caches.delete('test-cache').then(function() { 
  console.log('Cache successfully deleted!'); 
});

Sovint es borra una cache quan es reemplaza per una nova ( al disparar la re-installation d'un Service worker):

// Assuming `CACHE_NAME` is the newest name
// Time to clean up the old!
var CACHE_NAME = 'version-8';

// ...

caches.keys().then(function(cacheNames) {
  return Promise.all(
    cacheNames.map(function(cacheName) {
      if(cacheName != CACHE_NAME) {
        return caches.delete(cacheName);
      }
    })
  );
});

Exemple d'ús amb Service Workers

Vegeu Service_Worker#Cache

Vegeu també

Enllaços externs