Django PWA Tutorial

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