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

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 li…


This content originally appeared on DEV Community and was authored by Andrés Álvarez Iglesias

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

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!

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!


This content originally appeared on DEV Community and was authored by Andrés Álvarez Iglesias


Print Share Comment Cite Upload Translate Updates
APA

Andrés Álvarez Iglesias | Sciencx (2024-09-10T04:45:43+00:00) PWA and Django #1: What is a Progressive Web Application?. Retrieved from https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/

MLA
" » PWA and Django #1: What is a Progressive Web Application?." Andrés Álvarez Iglesias | Sciencx - Tuesday September 10, 2024, https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/
HARVARD
Andrés Álvarez Iglesias | Sciencx Tuesday September 10, 2024 » PWA and Django #1: What is a Progressive Web Application?., viewed ,<https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/>
VANCOUVER
Andrés Álvarez Iglesias | Sciencx - » PWA and Django #1: What is a Progressive Web Application?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/
CHICAGO
" » PWA and Django #1: What is a Progressive Web Application?." Andrés Álvarez Iglesias | Sciencx - Accessed . https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/
IEEE
" » PWA and Django #1: What is a Progressive Web Application?." Andrés Álvarez Iglesias | Sciencx [Online]. Available: https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/. [Accessed: ]
rf:citation
» PWA and Django #1: What is a Progressive Web Application? | Andrés Álvarez Iglesias | Sciencx | https://www.scien.cx/2024/09/10/pwa-and-django-1-what-is-a-progressive-web-application/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.