Progressive Web Application with Django

How to make a Django application run offline using service workers

  1. Create a manifest.webmanifest file in your static folder
{"name": "Name of your app","short_name": "APP_NAME","start_url": "http://localhost:8000/","display": "standalone","orientation": "portrait","background_color": "#fff","description": "Enter the description of your app here.","icons": [{"src": "avatar.png","sizes": "2700x2700","type": "image/png"},{"src": "avatar_02.png","sizes": "192x192","type": "image/png"}]}
const cacheName = 'YOUR_APP_NAME';function precache() {return caches.open('my-cache').then(function (cache){return cache.addAll([    '{% url "home" %}',    '{% url "about" %}',    '{% url "contact" %}',
// YOU CANN ADD YOUR URLs HERE.
]);});}{% load static %}const staticAssets = ['{% static "css/style.css" %}',
'{% static "css/bootstrap.min.css" %}',
'{% static "js/bootstrap.min.js" %}',
// YOU CAN ADD ALL YOUR STATIC FILES HERE];self.addEventListener('install', async e => {const cache = await caches.open(cacheName);await cache.addAll(staticAssets);return self.skipWaiting();});self.addEventListener('activate', e => {self.clients.claim();});self.addEventListener('fetch', async e => {const req = e.request;const url = new URL(req.url);if (url.origin === location.origin) {e.respondWith(cacheFirst(req));} else {e.respondWith(networkAndCache(req));}});async function cacheFirst(req) {const cache = await caches.open(cacheName);const cached = await cache.match(req);return cached || fetch(req);}async function networkAndCache(req) {const cache = await caches.open(cacheName);try {const fresh = await fetch(req);await cache.put(req, fresh.clone());return fresh;} catch (e) {const cached = await cache.match(req);return cached;}}
from django.views.generic.base import TemplateView"""Service worker for offline app"""
class ServiceWorker(TemplateView):
template_name = "mobile/sw.js"
content_type = "application/javascript"
from django.urls import path
from django.contrib import admin
from your_app.views import ServiceWorker
urlpatterns = [
path('admin/', admin.site.urls),
path('', ServiceWorker.as_view(), name="sw"),
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//Put the manifest.webmanifest file here
<!--LINK TO MANIFEST (FOR PWA)-->
<link rel="manifest" href="{% static 'manifest.webmanifest' %}">
<!-- SERVICE WORKER JS -->
<script>
// REGISTER SERVICE WORKERif ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('{% url "sw"%}').then(function(registration) {// Registration was successfulconsole.log('ServiceWorker registration successful with scope: ', registration.scope);}, function(err) {// registration failed :(console.log('ServiceWorker registration failed: ', err);});});}</script>
<!-- END SERVICE WORKER -->
</head><body></body>
</html>

And there you go, your progressive web app with Django…

A Django progressive web application
  1. You’ll notice a “+” button (marked with a red circle) at the top right corner. This button is the button you will use to download the app to your desktop or mobile phone
  2. Using the inspect tools, navigate to the application tab, (marked with the green rectangle). You’ll see your manifest.webmanifest data showing up. Your app name and other information.
  3. The service worker can be seen by clicking the “Service Worker” button on the right. You will see this
Service worker working properly, sourcing from the directory set in your urls.py file.

Cheers and happy coding! 😉

--

--

--

I’m a Software Engineer. I am interested in Technology and getting better at what I do 😁

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What every front-end developer should know about change detection in Angular and React

Testing with react-testing-library and Jest

React Redux for Beginners(part_7)

Choose columns according to a certain column calculation

Creating, Testing and Publishing a VSCode Extension

Why I Choose React?

The Arrow Function

What is ARIA?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Olaoluwayemi Rasheed

Olaoluwayemi Rasheed

I’m a Software Engineer. I am interested in Technology and getting better at what I do 😁

More from Medium

Using .env and .gitignore to not keep tracking sensitive variables

Django: Building OAuth2 client using Authlib

Make interactive web applications in pure PyWebIO.

Headlines at your fingertips: Today in Tabs