I wrote a simple PWA (current version) based on this tutorial by Vaadin. It works fine, tested in Chrome, also in offline mode.

By using it on a mobile device, issues occur:

• After saving the PWA, starting it once, it runs fine.
• then after closing, turning on flight mode and restarting the PWA, I get a system message, saying I have no internet connection -> no problem, I can ignore that
• after ignoring, the app does not load the static assets as I expected it, but shows a blank page, saying the browser could not load the page, since I don't have internet connection.

I thought that is, what the PWA is good for? Why does it not load the static assets? I think my service-worker is just fine:

const staticAssets = [
    './',
    './styles.css',
    './app.js',
    './images',
    './fallback.json',
    './images/system/offline.png'
]



self.addEventListener('install', async event => {
    const cache = await caches.open('static-assets');
    cache.addAll(staticAssets);
});

self.addEventListener('fetch', event => {
    const req = event.request;
    const url = new URL(req.url);

    if(url.origin === location.origin){
        event.respondWith(cacheFirst(req));
    }else{
        event.respondWith(networkFirst(req));
    }

});


async function cacheFirst(req){
    const cachedResponse = await caches.match(req);
    return cachedResponse || fetch(req);
}

async function networkFirst(req){
    const cache = await caches.open('dynamic-content');
    try{
        const res = await fetch(req);
        cache.put(req, res.clone());
        return res;
    }catch(err){
        const cachedResponse = await cache.match(req);
        return cachedResponse || caches.match('./fallback.json');
    }
}

I'm happy to share more code, if you think the problem is somewhere else!

I wrote a simple PWA (current version) based on this tutorial by Vaadin. It works fine, tested in Chrome, also in offline mode.

By using it on a mobile device, issues occur:

• After saving the PWA, starting it once, it runs fine.
• then after closing, turning on flight mode and restarting the PWA, I get a system message, saying I have no internet connection -> no problem, I can ignore that
• after ignoring, the app does not load the static assets as I expected it, but shows a blank page, saying the browser could not load the page, since I don't have internet connection.

I thought that is, what the PWA is good for? Why does it not load the static assets? I think my service-worker is just fine:

const staticAssets = [
    './',
    './styles.css',
    './app.js',
    './images',
    './fallback.json',
    './images/system/offline.png'
]



self.addEventListener('install', async event => {
    const cache = await caches.open('static-assets');
    cache.addAll(staticAssets);
});

self.addEventListener('fetch', event => {
    const req = event.request;
    const url = new URL(req.url);

    if(url.origin === location.origin){
        event.respondWith(cacheFirst(req));
    }else{
        event.respondWith(networkFirst(req));
    }

});


async function cacheFirst(req){
    const cachedResponse = await caches.match(req);
    return cachedResponse || fetch(req);
}

async function networkFirst(req){
    const cache = await caches.open('dynamic-content');
    try{
        const res = await fetch(req);
        cache.put(req, res.clone());
        return res;
    }catch(err){
        const cachedResponse = await cache.match(req);
        return cachedResponse || caches.match('./fallback.json');
    }
}

I'm happy to share more code, if you think the problem is somewhere else!

• javascript
• caching
• service-worker
• progressive-web-apps
• offline-mode

• Doesn't really answer what is wrong with your logic, but personally i've had success with offline PWAs by using google's Workbox. Rather than re-inventing the wheel they've already developed, you can use their already developed scaffolding and only worry about writing the code that actually related to your application. – Taplar Commented May 16, 2019 at 14:57
• Is the "blank page" the page with "Please check your internet connection and try again."` (so the one you coded yourself?) – Roland Starke Commented May 16, 2019 at 15:01
• No, not on my device. I see the standard safari blank page ("Safari can't open the page [...]"). Did you get the one I coded on a mobile device?! I got that only on Chrome for Mac. – maxischl Commented May 16, 2019 at 15:06

2 Answers 2

The problem was within the service-worker:

I forgot to add the service worker file to the static assets.

Found the solution by reading the answers of this question: https://stackoverflow./a/44482764/7350000.

I had the same issue. In my case, the issue came from the manifest adding a query string to the start_url. The cache is sensitive to this. You can add an argument to .match in order to prevent it, like this:

caches.match(event.request, {ignoreSearch: true})