DEV Community

Andrés Álvarez Iglesias
Andrés Álvarez Iglesias

Posted on

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

#python #django #pwa

Originally published on Substack: https://andresalvareziglesias.substack.com/p/pwa-and-django-1-what-is-a-web-application?r=1ymfiv

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...

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

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 github repo

Create a new app in IDX importing that repo:

Create a new app in IDX importing a github 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
Enter fullscreen mode Exit fullscreen mode

Do the initial migration and run the server:

python manage.py migrate python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Then, create demo app:

python manage.py startapp demo
Enter fullscreen mode Exit fullscreen mode

Add an empty view:

from django.shortcuts import render def index(request): context = {} return render(request, "index.html", context)
Enter fullscreen mode Exit fullscreen mode

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), ]
Enter fullscreen mode Exit fullscreen mode

And wait a few days until the next chapter!

Image description

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!

Top comments (0)