Bonjour à tous,
Je me suis mis depuis quelques jours à travailler sur quelques tutos sur les progressive web app (pwa). C’est un moyen de faire des applications mobiles grâce au html et javascript sans utiliser les langages natifs.
Malheureusement, je bloque sur un point. Lors de l’audit avec devtool tous les points sont quasi validés sauf au niveau du service worker. J’ai cette erreur que je n’arrive pas à corriger :
User will not be prompted to Install the Web App Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url.
Voici l’url de mon app : https://chopelink.com/pwa/
Voici le contenu de mon manifest.json :
{
"name": "App Test",
"short_name": "App",
"icons": [
{
"src": "images/icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"theme_color": "#2196f3",
"background_color": "#E81E7C",
"display": "standalone",
"start_url": "/index.html"
}
Mon service worker :
var cacheName = 'todoAppCache';
var filesToCache = [
'/',
'styles/inline.css',
'index.html'];
// install service worker
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
// active service worker
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});;
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();
caches.open(cacheName)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
Et le contenu de mon app.js :
// si navigateur accepte on install le service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}
window.addEventListener("beforeinstallprompt", function(e) {
// log the platforms provided as options in an install prompt
console.log(e.platforms); // e.g., ["web", "android", "windows"]
e.userChoice.then(function(outcome) {
console.log(outcome); // either "accepted" or "dismissed"
}, handleError);
});
Qu’est se qui ne va pas ?
Merci d’avance pour votre aide ou vos pistes.
Florian