'iOS PWA 'added to home screen' cache is expiring after a day
I'm building an installable PWA from a CRA. I've added a custom service worker that caches all external requests using the service worker cache API. After the first request, I can toggle my phone onto airplane mode and the app still works, however when I leave the app installed on my phone for a day and come back, the app no longer works in offline mode and instead shows the "Safari cannot open the page because your iPhone is not connected to the internet".
Does an installed PWA on iOS have a cache expiry? Am I doing something wrong?
Here is my service worker code:
const PRECACHE = "precache-v1";
const RUNTIME = "runtime-v2";
const PRECACHE_URLS = [];
this.addEventListener("install", event => {
event.waitUntil(
caches
.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(this.skipWaiting())
);
});
this.addEventListener("activate", event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches
.keys()
.then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
})
.then(cachesToDelete => {
return Promise.all(
cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
})
);
})
.then(() => this.clients.claim())
);
});
this.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|