This content originally appeared on DEV Community and was authored by Rachit Khurana
We can convert a Django website to a PWA (Progressive web app) very easily.
PWA are web apps that look like a normal native app on the phone or PC. I consider it to be a shortcut for making cross-platform applications
We will be using django-pwa package for the same.
Installation
- Installing the
django-pwapackage
pip install django-pwa
- Add
pwato your list of INSTALLED_APPS in settings.py:
# project/settings.py
INSTALLED_APPS = [
...
'pwa',
...
]
Configuration
- Adding PWA settings to settings.py file
# project/settings.py
PWA_APP_NAME = 'My App'
PWA_APP_DESCRIPTION = "My app description"
PWA_APP_THEME_COLOR = '#0A0302'
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/my_app_icon.png',
'sizes': '160x160'
}
]
PWA_APP_ICONS_APPLE = [
{
'src': '/static/images/my_apple_icon.png',
'sizes': '160x160'
}
]
PWA_APP_SPLASH_SCREEN = [
{
'src': '/static/images/icons/splash-640x1136.png',
'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
}
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'
Making it compatible with Django 4
Currently django-pwa version 1.0.10 is not compatible with Django 4. So if you are using an earlier version of Django or this package has received updates, you can skip these steps (marked with *).
- *Make a new folder in the base directory*
I named it pwa1
- *Make a new file urls.py with the following content*
from django.urls import re_path as url
from .views import manifest, service_worker, offline
# Serve up serviceworker.js and manifest.json at the root
urlpatterns = [
url(r'^serviceworker\.js$', service_worker, name='serviceworker'),
url(r'^manifest\.json$', manifest, name='manifest'),
url('^offline/$', offline, name='offline')
]
- Add the following to your project's
urls.pyfile
...
urlpatterns=[
...
path('', include('pwa.urls')),
...
]
- Make a
serviceworker.jsfile in your static folder with the following content.
// Base Service Worker implementation. To use your own Service Worker, set the PWA_SERVICE_WORKER_PATH variable in settings.py
var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
'/offline',
'/css/django-pwa-app.css',
'/images/icons/icon-72x72.png',
'/images/icons/icon-96x96.png',
'/images/icons/icon-128x128.png',
'/images/icons/icon-144x144.png',
'/images/icons/icon-152x152.png',
'/images/icons/icon-192x192.png',
'/images/icons/icon-384x384.png',
'/images/icons/icon-512x512.png',
'/static/images/icons/splash-640x1136.png',
'/static/images/icons/splash-750x1334.png',
'/static/images/icons/splash-1242x2208.png',
'/static/images/icons/splash-1125x2436.png',
'/static/images/icons/splash-828x1792.png',
'/static/images/icons/splash-1242x2688.png',
'/static/images/icons/splash-1536x2048.png',
'/static/images/icons/splash-1668x2224.png',
'/static/images/icons/splash-1668x2388.png',
'/static/images/icons/splash-2048x2732.png'
];
// Cache on install
self.addEventListener("install", event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
)
});
// Clear cache on activate
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(cacheName => (cacheName.startsWith("django-pwa-")))
.filter(cacheName => (cacheName !== staticCacheName))
.map(cacheName => caches.delete(cacheName))
);
})
);
});
// Serve from Cache
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('offline');
})
)
});
- Load PWA meta in templates
Add the following tags in your
base.htmlfile.
{% load pwa %}
<head>
...
{% progressive_web_app_meta %}
...
</head>
That's All 🎉
You can now see an option to install your site as an app in your supported browser on mobile as well as PC
This content originally appeared on DEV Community and was authored by Rachit Khurana
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Rachit Khurana | Sciencx (2022-06-27T16:01:59+00:00) Convert Django website to PWA. Retrieved from https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/
" » Convert Django website to PWA." Rachit Khurana | Sciencx - Monday June 27, 2022, https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/
HARVARDRachit Khurana | Sciencx Monday June 27, 2022 » Convert Django website to PWA., viewed ,<https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/>
VANCOUVERRachit Khurana | Sciencx - » Convert Django website to PWA. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/
CHICAGO" » Convert Django website to PWA." Rachit Khurana | Sciencx - Accessed . https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/
IEEE" » Convert Django website to PWA." Rachit Khurana | Sciencx [Online]. Available: https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/. [Accessed: ]
rf:citation » Convert Django website to PWA | Rachit Khurana | Sciencx | https://www.scien.cx/2022/06/27/convert-django-website-to-pwa/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.