Django PWA Tutorial

Michael Yin

Last updated on August 04 2021

Table of Contents

Background

When I built a Django project which has some PWA features, I found many online resources are outdated, and some are not easy for Django developers to understand.

So I decide to help people with this Django PWA Tutorial Series, it contains 7 blog posts and one open source project on Github.

The source code is available on Github/django-pwa-demo

Objectives

By the end of this course, you will be able to:

  1. Understand what is Web app manifest and how to generate app icons using NPM package.
  2. Learn how to use python-webpack-boilerplate to make Webpack work with Django.
  3. Understand what is Service Worker, and the life cycle.
  4. Learn to develop Service Worker with Workbox packages.
  5. Serve Service Worker in Django.
  6. Use Service worker to cache the offline page, and return cached response when network is not available.
  7. Learn how to use workbox-precaching to precache static assets.
  8. Rewrite the fallback logic with workbox-routing.
  9. Understand what is caching strategy
  10. Learn how to make PWA installable.
  11. Learn the workflow of the Web Push Notification
  12. Understand what is VAPID and how to set it up.
  13. Use django-push-notifications to store the subscription info and send push message on server side.
  14. Learn to use Push API and handle push event in Service worker.

Unlike some people do this with vanilla js, we will benefit from the great frontend ecosystem and write modern JS code to do this.

Tech

  • Django
  • django-push-notifications
  • python-webpack-boilerplate
  • workbox-webpack-plugin

Table of content

Django PWA Tutorial Series:

  1. Introduction
  2. Add Web app manifest to Django
  3. Add Service Worker to Django
  4. Fallback Offline Page in Django
  5. Caching and Routing (coming soon)
  6. How to add install button to PWA (coming soon)
  7. Send Web Push Notification from Django (part 1) (coming soon)
  8. Send Web Push Notification from Django (part 2) (coming soon)

The source code is available on https://github.com/AccordBox/django-pwa-demo

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.

Table of Contents

Django SaaS Template

It aims to save your time and money building your product, developed by Michael Yin

Learn More

Build Jamstack web app with Next.js and Wagtail CMS.

Read More

Subscribe

Get notified about new great Web Development Tutorial