CODEWITHSUNDEEP
pythondjangoservice-workerprogressive-web-appsbrowser-cache
micshapicsha
micshapicsha

Reputation: 187

Django loads correct page only after a hard refresh (shift + refresh) because the service worker is not invalidating the cache every refresh

I have a Django app that uses conditional logic to determine what to display in the navigation bar. For example, if the user is not authenticated --> show "Login", else --> "show username." It works perfectly in development but on my apache server, it seems to always execute the "else" block unless I do a shift+refresh in safari and chrome. It seems to only do this on my index page, on the other pages within the app the if/else works as expected.

base.html

        {% if user.is_authenticated %}
            <a href="{% url 'login-signout' %}" id="account-link">
                {% if user.username %}
                    {{user.username | capfirst }}
                {% elif user.first_name %}
                    {{user.first_name | capfirst }}
                {% else %}
                    Account
                {% endif %}
            </a>
        {% else %}
            <a href="{% url 'login-signup' %}" id="account-link">
                Login
            </a>
        {% endif %}

I tried to just get a fresh copy of the project but I am getting the same results. Any idea why this might be happening?

Edit to update question So after the suggested fix in the comments I was able to determine that the issue is that the service worker is looking at an old cache rather than getting a new copy each refresh.

serviceworker.js

var staticCacheName = "django-pwa-v" + new Date().getTime();

// caches on install
self.oninstall = function (evt) {
    evt.waitUntil(caches.open(staticCacheName).then(function (cache) {
        return Promise.all(['/', 'main/home.html'].map(function (url) {
            return fetch(new Request(url, { redirect: 'manual' })).then(function (res) {
                return cache.put(url, res);
            });
        }));
    }));
};

// 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.onfetch = function (evt) {
    var url = new URL(evt.request.url);
    if (url.pathname != '/' && url.pathname != 'main/home.html') return;
    evt.respondWith(caches.match(evt.request, { cacheName: staticCacheName }));
};

To avoid this issue altogether I built a template called offline in templates/main/offline.html, could I just cache that page and only show that when offline rather than trying to cache the main app page?

Upvotes: 0

Views: 792

Answers (1)

Harsh Nagarkar
Harsh Nagarkar

Reputation: 717

This is not a django issue but browser issue. Your browser is caching pages to improve load times. Which pages browser choose to cache is upto the browser but seems like in your case it is the home page. Also browser makes smart decisions to cache css, js, header of the page because it is probably not going to change. Note:- If you are using server side caching like memcache or varnish, you have to invalidate the cache after every update.

Update
After figuring out its cache invalidation issue, might I suggest, please read the documentation on official W3 affiliated website, it had all the answers about how to invalidate the cache and how to serve offline pages.
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers

Upvotes: 1

Related Questions