Django PWA and AWS Static Files

[josylad]

Hi, my Django PWA is giving errors and I think it is related to the fact that I am serving all my static files from AWS S3. How do make PWA to pick static files from AWS and work properly??

I get this error "Uncaught (in promise) TypeError: Request failed"

[josylad]

Fixed.

[ghost]

Fixed.

I have the same issue. Could you please share the solution?

[saileshkush95]

I'm also facing same problem

[josylad]

Fixed.

I have the same issue. Could you please share the solution?

Hello, I was able to fix it by creating my own service worker and then point at it using the PWA_SERVICE_WORKER_PATH variable (PWA_APP_FETCH_URL is passed through).

PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'my_app', 'serviceworker.js')

[josylad]

Hello, @saileshkush95 @i-konuk I was able to fix it by creating my own service worker and then point at it using the PWA_SERVICE_WORKER_PATH variable (PWA_APP_FETCH_URL is passed through).

PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'my_app', 'serviceworker.js')

This problem is due to the fact that Django cannot find all the static files listed in the Serviceworker.js file, so you should create a custom service worker, copy the exact one from the documentation and delete the url to files that do not exist on your server or edit the url to the correct one and it should work fine.

[josylad]

My Example Service worker.

// Base Service Worker implementation.  To use your own Service Worker, set the PWA_SERVICE_WORKER_PATH variable in settings.py

var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
    // '/offline',
    'https://my-app.s3.amazonaws.com/static/images/my_app_icon2.png',
    'https://my-app.s3.amazonaws.com/static/images/pwa-app-icon.png',

];

// 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("django-pwa-")))
                    .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('offline');
            })
    )
});