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 https://www.geeksforgeeks.org/django-tutorial/

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 settings.py of project inside installed apps section add ‘pwa’ and in urls.py of project give the following path –

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

settings.py

urls.py

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

Javascript

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);
      })
    );
});

STEP 4: Now in settings.py 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

Python3

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'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': 'static/images/icon-160x160.png',
        'sizes': '160x160'
    }
]
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'

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

Related Articles

Make PWA of a Django Project

Javascript

Python3