Building Progressive Web Apps (PWAs) with JavaScript

---
description: Enforce best practices for developing Progressive Web Apps (PWAs) using JavaScript to ensure native app-like experiences, including offline capabilities and push notifications.
globs: ["**/*.js"]
tags: [pwa, javascript, best-practices]
priority: 1
version: 1.0.0
---

# Building Progressive Web Apps (PWAs) with JavaScript

## Context
- Applicable to all JavaScript files in projects aiming to develop Progressive Web Apps (PWAs).
- Ensures adherence to PWA standards for offline functionality, performance, and user engagement.

## Requirements

- **Service Worker Implementation**: Register a service worker to manage caching and enable offline functionality.
  - Ensure the service worker caches essential assets and handles fetch events appropriately.
  - Update the service worker to manage cache versions and delete outdated caches.

- **Web App Manifest**: Include a `manifest.json` file with the following properties:
  - `name` or `short_name`
  - `start_url`
  - `display` (set to `standalone`, `fullscreen`, or `minimal-ui`)
  - `icons` (provide at least 192px and 512px versions)

- **HTTPS Requirement**: Serve the PWA over HTTPS to ensure secure communication.

- **Responsive Design**: Implement responsive design principles to ensure the PWA adapts to various screen sizes and orientations.

- **Performance Optimization**: Optimize performance by:
  - Minifying and compressing JavaScript and CSS files.
  - Implementing code splitting to load only necessary code for specific pages or features.
  - Utilizing lazy loading for non-critical resources.

- **Push Notifications**: Implement push notifications using the Push API to enhance user engagement.

- **Accessibility**: Ensure the PWA is accessible by:
  - Using semantic HTML elements.
  - Providing alternative text for images.
  - Ensuring keyboard navigability.

- **Testing**: Conduct thorough testing, including:
  - Unit tests for JavaScript functions.
  - Integration tests for service worker functionality.
  - End-to-end tests to simulate user interactions.

## Examples

<example>
// Registering a service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}
</example>

<example type="invalid">
// Registering a service worker without error handling
navigator.serviceWorker.register('/service-worker.js');
*Missing error handling for service worker registration.*
</example>