Skip to content
Related Articles

Related Articles

Make PWA of a Django Project

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 25 May, 2022

Progressive Web Apps or PWA are a type of application that is developed using web technologies and can be installed on any device like a normal application. 

Prerequisites: A django project that is ready to be deployed. For Django tutorial you can refer the following link

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

STEP 1: Firstly use the following command to install django pwa

pip install django-pwa

STEP 2: In of project inside installed apps section add ‘pwa’ and in of project give the following path – 

path(“, include(‘pwa.urls’))

STEP 3: In the js folder, create a file named serviceworker.js and add the following code to it.


var staticCacheName = 'djangopwa-v1';
self.addEventListener('install', function(event) {
  event.waitUntil( {
      return cache.addAll([
self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);

STEP 4: Now in add the path to service worker as PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, ‘static/js’, ‘serviceworker.js’). 

STEP 5:  Now to create manifest.json file go into settings file of your Django Project and add rhe following details. Django will automatically builds the manifest.json for your project


PWA_APP_NAME = 'geeksforgeeks'
PWA_APP_DISPLAY = 'standalone'
        'src': 'static/images/icon-160x160.png',
        'sizes': '160x160'
        'src': 'static/images/icon-160x160.png',
        'sizes': '160x160'
        'src': 'static/images/icon.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
PWA_APP_DIR = 'ltr'

STEP 6: Add {% load pwa %} and {% progressive_web_app_meta %} in index or first page of the project. 

STEP 7: Right click on browser and choose inspect element option. In the application section you will see that manifest file and service worker file are present there.

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!