Skip to content
Related Articles

Related Articles

Improve Article

Make PWA of a Django Project

  • Difficulty Level : Easy
  • Last Updated : 06 Nov, 2020

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.

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course

My Personal Notes arrow_drop_up
Recommended Articles
Page :