Make PWA of a Django Project

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

filter_none

edit
close

play_arrow

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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'

chevron_right


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.




My Personal Notes arrow_drop_up

I am a passionate learner with an innovative mind I am curious about new technologies and always try to learn them and make something productive

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : kushwanthreddy

Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.