Make PWA of a Django Project - GeeksforGeeks

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.
kushwanthreddy
Python Django
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Install PIP on Windows ?
Check if element exists in list in Python
How To Convert Python Dictionary To JSON?
Python Classes and Objects
How to drop one or multiple columns in Pandas Dataframe
Defaultdict in Python
Python | Get unique values from a list
Python | os.path.join() method
Create a directory in Python
Python | Pandas dataframe.groupby()