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 the following details. Django will automatically builds the manifest.json for your project
Python3
PWA_APP_NAME = 'neveropen'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.
