PWA and Django #1: What is a Progressive Web Application?

Developing Progressive Web Applications with Django

The current web applications are much more than web pages that show interactive info. Sometimes, they behave almost like native apps. And what kind of magic do they use to do that? This series of posts will answer that question...

What is a Progressive Web Application

I like the definition of PWA's at Mozilla Developer site (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps):

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app. Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.

It's an hybrid between a native app and a webpage, thanks to the incredible capacities of the nowadays web browsers, like:

• Embedded database

• Offline workers

• Desktop and mobile operating system integration

• Etc.

In this series of posts, we will develop an offline and installable Progressive Web Application using our beloved Django, with the help of Google Project IDX.

Create the demo environment

Create a github repo:

Create a new app in IDX importing that repo:

Initialize the Django app from the IDX console:

python -m venv ~/.venv
source ~/.venv/bin/activate

mkdir src
cd src

echo "django" > requirements.txt
pip install --upgrade pip
pip install -r requirements.txt

django-admin startproject djangopwa

Do the initial migration and run the server:

python manage.py migrate
python manage.py runserver

Create IDX files to enable embedded preview, with the help of the project https://github.com/arifnd/nix-idx/, that compiles several IDX configurations:

cd ~/djangopwa 
wget https://raw.githubusercontent.com/arifnd/nix-idx/main/python/django/devserver.sh
cd ~/djangopwa/.idx
wget https://raw.githubusercontent.com/arifnd/nix-idx/main/python/django/dev.nix

NOTE: Edit the default dev.nix and devserver.sh as needed and restart IDX environment

Then, create demo app:

python manage.py startapp demo

Add an empty view:

from django.shortcuts import render

def index(request):
    context = {}
    return render(request, "index.html", context)

Create the routes to the new app:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("demo.urls")),
    path('admin/', admin.site.urls),
]

And wait a few days until the next chapter!

About the list

Among the Python and Docker posts, I will also write about other related topics, like:

• Software architecture

• Programming environments

• Linux operating system

• Etc.

If you found some interesting technology, programming language or whatever, please, let me know! I'm always open to learning something new!

About the author

I'm Andrés, a full-stack software developer based in Palma, on a personal journey to improve my coding skills. I'm also a self-published fantasy writer with four published novels to my name. Feel free to ask me anything!