Make PWA of a Django Project

Progressive Web Apps (PWAs) are web applications built using standard web technologies that can be installed on devices like native apps, providing offline capabilities, push notifications, and faster loading.

Prerequisites:

A django project that is ready to be deployed.

• Django Introduction and Installation
• Creating a Project

The below steps have to be followed to create a progressive web application of a Django project.

Install django-pwa

Install the django-pwa package which simplifies the PWA integration:

pip install django-pwa

Configure Django Settings

1. In your settings.py, add 'pwa' to the INSTALLED_APPS list:

INSTALLED_APPS = [
...
'pwa',
]

2. Also, add the path for the service worker (you'll create this later):

import os

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

3. Add your PWA settings to settings.py to generate the manifest.json automatically. Customize the values as per your app:

PWA_APP_NAME = 'geeksforgeeks'
PWA_APP_DESCRIPTION = "GeeksForGeeks PWA"
PWA_APP_THEME_COLOR = '#000000'
PWA_APP_BACKGROUND_COLOR = '#ffffff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': '/static/images/icon-160x160.png',
        'sizes': '160x160',
        'type': 'image/png',
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': '/static/images/icon-160x160.png',
        'sizes': '160x160',
        'type': 'image/png',
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icon.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

Update urls.py

Include the pwa app URLs in your project's urls.py:

This will expose necessary URLs like /manifest.json and /serviceworker.js.

Create the Service Worker

Create a folder static/js inside your Django project if it doesn't exist. Inside static/js, create a file called serviceworker.js and add the following code:

var staticCacheName = 'djangopwa-v1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
        event.respondWith(caches.match(''));
        return;
      }
    }
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
});

Add PWA Meta Tags in Templates

In your base template or the main page template (e.g., index.html), add the following at the top to load PWA tags:

This will automatically add the manifest and service worker registration scripts in your HTML.

Test Your PWA

1. Run your Django development server:

python manage.py runserver

2. Open your site in Chrome or any modern browser.

3. Open Developer Tools (F12 or right-click → Inspect).

4. Go to the Application tab:

• Verify that the Manifest is loaded.
• Verify that the Service Worker is registered and active.

5. Our PWA is ready to be installed now. You will see the install icon in the address tab.