I created a webplatform for a client in Laravel 9. Everything is working perfect but he wants to use it offline as well. I installed the package for Laravel PWA. On a Windows desktop Chrome it is working fine (offline as well).
But my client is using the platform on Iphone and Ipad, so Safari. There I can create the PWA and use it. Unfortunately it does not work offline. I'm getting the following error:
Fetch event respondwith received an error
I tried to solve it but I don't have much experience with these kind of workers.
This is the package I used: https://packagist.org/packages/ladumor/laravel-pwa
I think the problem is in the sw.js file:
const preLoad = function () {
return caches.open("offline").then(function (cache) {
// caching index and important routes
return cache.addAll(filesToCache);
});
};
self.addEventListener("install", function (event) {
event.waitUntil(preLoad());
});
const filesToCache = [
'/',
'/offline.html'
];
const checkResponse = function (request) {
return new Promise(function (fulfill, reject) {
fetch(request).then(function (response) {
if (response.status !== 404) {
fulfill(response);
} else {
reject();
}
}, reject);
});
};
const addToCache = function (request) {
return caches.open("offline").then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
};
const returnFromCache = function (request) {
return caches.open("offline").then(function (cache) {
return cache.match(request).then(function (matching) {
if (!matching || matching.status === 404) {
return cache.match("offline.html");
} else {
return matching;
}
});
});
};
self.addEventListener("fetch", function (event) {
event.respondWith(checkResponse(event.request).catch(function () {
return returnFromCache(event.request);
}));
if(!event.request.url.startsWith('http')){
event.waitUntil(addToCache(event.request));
}
});