Building Progressive Web Apps with Python

---
title: Building Progressive Web Apps with Python
description: Guidelines for developing progressive web applications using Python frameworks, enhancing user experience and performance.
category: Python Cursor Rules
version: 1.0.0
---

# Building Progressive Web Apps with Python

## Context
- Applicable when developing Progressive Web Apps (PWAs) using Python frameworks such as Django or Flask.
- Aims to enhance user experience, performance, and maintainability of PWAs.

## Requirements

### 1. Adhere to PEP 8 Coding Standards
- **Indentation**: Use 4 spaces per indentation level.
- **Line Length**: Limit lines to 79 characters.
- **Naming Conventions**: Use descriptive names for variables, functions, and classes.

### 2. Implement Service Workers for Offline Support
- **Caching Strategy**: Utilize service workers to cache essential resources, enabling offline functionality.
- **Update Handling**: Ensure service workers are updated appropriately to reflect changes in the application.

### 3. Optimize Performance
- **Lazy Loading**: Implement lazy loading for non-critical resources to improve initial load times.
- **Minification**: Minify CSS, JavaScript, and HTML files to reduce payload size.
- **Compression**: Enable Gzip or Brotli compression on the server to decrease response sizes.

### 4. Ensure Responsive Design
- **Media Queries**: Use CSS media queries to adapt the layout for various screen sizes.
- **Flexible Grids**: Implement flexible grid layouts to accommodate different devices.

### 5. Secure the Application
- **HTTPS**: Serve the application over HTTPS to encrypt data transmission.
- **Input Validation**: Validate and sanitize all user inputs to prevent security vulnerabilities.

### 6. Implement Web App Manifest
- **Manifest File**: Create a `manifest.json` file to define the app's metadata, such as name, icons, and start URL.
- **Add to Home Screen**: Ensure the manifest allows users to add the PWA to their home screen.

### 7. Monitor Performance and Errors
- **Performance Auditing**: Use tools like Google Lighthouse to audit and improve performance metrics.
- **Error Tracking**: Integrate error tracking services to monitor and resolve runtime errors.

## Examples

# Example of a service worker registration in a Django template
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch(function(error) {
        console.log('Service Worker registration failed:', error);
      });
  }
</script>
// Example of a web app manifest file
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/static/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}