Objectif :
Accélérer le chargement initial de l'appli (l'API-XL n'est pas cachée à part les reflists)
Routes appelées aujourd'hui
- Access Token (436ms)
- Configuration (230ms)
- Account/me (130ms)
- Member/me (245ms)
- Advertising (89ms)
- Optins (67ms)
+ options (17ms per request)
+ all interactions sent
+ reflists
+ ...
Solutions possibles
-
Utiliser le service worker pour intercepter les requêtes
-
Enregistrer l'ensemble du store en mémoire (pouchDB ?)
-
Appeler moins de routes avant d'afficher l'appli (chaud à part la route optins je pense)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' })
.then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
};
const CACHE_NAME = `sparkle-v1/${}aboid`;
self.addEventListener('fetch', function(event) {
console.log('fetch event : ', event);
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
console.log('Response from cache ', response);
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
console.log('Response of request ', response);
if(!response || response.status !== 200) { // here a whitelist of URLs we want to cache
return response;
}
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Adding to cache : ', responseToCache);
cache.put(event.request, responseToCache);
})
.catch(function(err) {
console.error(err);
});
return response;
}
);
})
);
});
Problem
- When to update cache
- Hard to debug
- Does not work on IE/Edge/Safari (in development in Edge, some day in Safari, IE will die)
- Get cache manifests/front-cache-busting to preload ads
deck
By Alexandre BARBIER
deck
- 271