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 (coming soon)
  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


Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, Wagtail CMS and React.

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

Search

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More

Subscribe

Get notified about new great Web Development Tutorial