DEV Community

Cover image for How to Create Progressive Web Apps (PWA) in Python?
Thuwarakesh Murallie
Thuwarakesh Murallie

Posted on • Edited on • Originally published at the-analytics.club

How to Create Progressive Web Apps (PWA) in Python?

Python is a fantastic programming language that you can use to create amazing things on the web.

Python frameworks such as Django and Flask power a large portion of the internet, and Python has emerged as one of the most popular backend programming languages for many reasons.

Python is also a great language for creating Progressive Web Apps (PWA). You can build installable web apps that can do a lot more than static websites can do. It only takes a few additional steps to your favorite web framework (Django or Flask)

Here's how to convert your Python web app into a progressive web app.


Building progressive web apps using Django.

Django is a web framework that enables you to quickly build web apps with Python. Django includes everything you need to get started, including a web server, templating engine, and ORM.

To create a progressive web app with Django, you need to install the Django PWA package. This package provides all the tools you need to get started with progressive web apps. Django PWA also comes with a dozen of configuration options to customize.

Here are the steps to follow:

  1. Install django-pwa package from PyPI
$ pip install django-pwa
Enter fullscreen mode Exit fullscreen mode
  1. Add pwa to installed apps in Django app settings.
# <proj>/settings.py

INSTALLED_APPS = [
    # other installed apps
    'pwa',
]
Enter fullscreen mode Exit fullscreen mode
  1. Set static files directory
# <proj>/settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    # or any other location of your choice
]
Enter fullscreen mode Exit fullscreen mode
  1. Set the URL for progressive components in urls.py
# <proj>/urls.py

from django.urls import path, include

urlpatterns = [
    # other path settings
    path('', include('pwa.urls')),
]
Enter fullscreen mode Exit fullscreen mode
  1. Load meta tags for progressive web app in the base template
{% load pwa %}

<head>
  <!-- Other head elements -->
  {% progressive_web_app_meta %}
</head>
Enter fullscreen mode Exit fullscreen mode
  1. Optionally you can override a range of options.

PWA_APP_NAME = 'The analytics club'
PWA_APP_DESCRIPTION = "The analytics club is a blog about data science, software development, and technology"
PWA_APP_THEME_COLOR = '#4669a2  '
PWA_APP_BACKGROUND_COLOR = '#fff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': '/static/images/my_app_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': '/static/images/my_apple_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icons/splash-640x1136.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

Enter fullscreen mode Exit fullscreen mode

Did you like what you read? Consider subscribing to my email newsletter because I post more like this frequently.

Thanks for reading, friend! Say Hi to me on LinkedIn, Twitter, and Medium.

Top comments (0)