PWA offline service worker settings

Question

I am building a simple Progressive Web Application with Python Django and django-pwa package. I have set up everything but offline functionality is not working. At this point, service workers (SW) are installed and dev tools recognize application as PWA. But when I check "offline" in devtools->Application and reload the web page there is a "No internet connection" error.

Here are my SW settings:

var staticCacheName = 'djangopwa-v1';

var filesToCache = [
    '/',
    '/x_offline/',
    '/static/x_django_pwa/images/my_app_icon.jpg',
    '/media/images/bfly1.2e16d0ba.fill-320x240.jpg',
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("djangopwa-v1")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('x_offline');
            })
    )
});

Listed settings are almost the same as default one from django-pwa repo When I load the page for the first time I see that requests are also made for the urls listed in SW and all of them have status 200. In the cache storage I see cache with paths set in SW. So I don't understand what I do wrong.

Not sure if this additional info is useful, but: when I set SW to offline and reload the web page the cache storage is empty.

Andrew Andrew · Accepted Answer · 2019-07-18T12:36:54

The issue is in the settings that django-pwa repo provided. They accidentally added sign , at the end of the scope variable and so if you copy settings you copy with incorrect scope setting (PWA_APP_SCOPE = '/',) and it brakes offline mode. I am going to contact with repo admins so that to fix the issue for the next users.

PWA offline service worker settings

1 Answers