Make PWA of a Django Project
Last Updated :
12 Jul, 2022
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 = '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.
Share your thoughts in the comments
Please Login to comment...