README

Introduction

This project will teach you how to use modern frontend tech to add PWA (Progressive Web App) features to Django.

Features:

1. Favicons generation without 3-party services.
2. Fallback offline page.
3. Precaching static assets.
4. Install PWA.
5. Web Push Notification.

You can also check Django PWA Tutorial Series to learn more.

Run on local

Solution 1 (Docker)

You need Docker and Docker Compose and you can install it here Get Docker

$ git clone https://github.com/AccordBox/django-pwa-demo
$ cd django-pwa-demo

$ docker-compose build
$ docker-compose run --rm web vapid --applicationServerKey

No private_key.pem file found.
Do you want me to create one for you? (Y/n)y
Generating private_key.pem
Generating public_key.pem
Application Server Key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Copy the Above Application Server Key to the PUSH_NOTIFICATIONS_SETTINGS.APP_SERVER_KEY of django_pwa_app/settings.py

PUSH_NOTIFICATIONS_SETTINGS = {
    'WP_CLAIMS': {
        "sub": "mailto: michaelyin@accordbox.com"
    },
    'WP_ERROR_TIMEOUT': 10,  # timeout for the request on the push server
    'UPDATE_ON_DUPLICATE_REG_ID': True,
    'APP_SERVER_KEY': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'WP_PRIVATE_KEY': 'private_key.pem',
}

$ docker-compose up

frontend_1  | webpack 5.24.2 compiled successfully in 7972 ms
frontend_1  | ℹ ｢wdm｣: Compiled successfully.

# check on http://127.0.0.1:8000/

Solution 2

$ git clone https://github.com/AccordBox/django-pwa-demo
$ cd django-pwa-demo

$ pip install -r requirements.txt
$ vapid --applicationServerKey

No private_key.pem file found.
Do you want me to create one for you? (Y/n)y
Generating private_key.pem
Generating public_key.pem
Application Server Key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Copy the Above Application Server Key to the PUSH_NOTIFICATIONS_SETTINGS.APP_SERVER_KEY of django_pwa_app/settings.py

PUSH_NOTIFICATIONS_SETTINGS = {
    'WP_CLAIMS': {
        "sub": "mailto: michaelyin@accordbox.com"
    },
    'WP_ERROR_TIMEOUT': 10,  # timeout for the request on the push server
    'UPDATE_ON_DUPLICATE_REG_ID': True,
    'APP_SERVER_KEY': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'WP_PRIVATE_KEY': 'private_key.pem',
}

If you don't have nodejs installed, please install it first by using below links

1. On nodejs homepage
2. Using nvm I recommend this way.

$ cd frontend
$ npm install
$ npm run watch

# in another terminal
$ python manage.py migrate
$ python manage.py runserver

# check on http://127.0.0.1:8000/

Screenshot