Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/accordbox/django-pwa-demo
Django Progressive Web App Demo
https://github.com/accordbox/django-pwa-demo
django pwa pwa-example
Last synced: about 1 month ago
JSON representation
Django Progressive Web App Demo
- Host: GitHub
- URL: https://github.com/accordbox/django-pwa-demo
- Owner: AccordBox
- Created: 2021-05-28T01:15:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-21T03:48:13.000Z (about 3 years ago)
- Last Synced: 2024-05-28T21:45:31.289Z (8 months ago)
- Topics: django, pwa, pwa-example
- Language: JavaScript
- Homepage:
- Size: 725 KB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
1. Fallback offline page.
1. Precaching static assets.
1. Install PWA.
1. Web Push Notification.
You can also check [Django PWA Tutorial Series](https://www.accordbox.com/blog/django-pwa-tutorial/) to learn more.
## Run on local
### Solution 1 (Docker)
You need Docker and Docker Compose and you can install it here [Get Docker](https://docs.docker.com/get-docker/)
```bash
$ 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`
```python
PUSH_NOTIFICATIONS_SETTINGS = {
'WP_CLAIMS': {
"sub": "mailto: [email protected]"
},
'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',
}
```
```bash
$ 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
```bash
$ 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`
```python
PUSH_NOTIFICATIONS_SETTINGS = {
'WP_CLAIMS': {
"sub": "mailto: [email protected]"
},
'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](https://nodejs.org/en/download/)
1. Using [nvm](https://github.com/nvm-sh/nvm) I recommend this way.
```bash
$ 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
