Developing Progressive Web Apps (PWAs) with TypeScript

---
description: Enforce best practices for developing Progressive Web Apps (PWAs) using TypeScript
globs: src/**/*.{ts,tsx}
tags: [TypeScript, PWA, Best Practices]
priority: 1
version: 1.0.0
---

# Developing Progressive Web Apps (PWAs) with TypeScript

## Context
- Applicable when building Progressive Web Apps using TypeScript.
- Ensures adherence to best practices for robust and efficient PWA development.

## Requirements

- **Strict TypeScript Configuration**: Enable strict mode in `tsconfig.json` to enforce type safety and catch potential issues early.

  ```json
  {
    "compilerOptions": {
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true
    }
  }
  ```

- **Modular Code Structure**: Organize code into feature-based modules to enhance maintainability and scalability.

  ```
  src/
    features/
      user/
        components/
        services/
        types.ts
      auth/
        components/
        hooks/
  ```

- **Service Worker Implementation**: Implement a service worker to enable offline capabilities and resource caching.

  ```typescript
  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);
      });
  }
  ```

- **Web App Manifest**: Include a `manifest.json` file to provide metadata for the PWA.

  ```json
  {
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
      {
        "src": "/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }
  ```

- **Responsive Design**: Ensure the application is responsive and provides a seamless experience across various devices and screen sizes.

- **Performance Optimization**: Implement code splitting and lazy loading to improve load times and performance.

  ```typescript
  const LazyComponent = React.lazy(() => import('./LazyComponent'));

  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    );
  }
  ```

- **Testing**: Write comprehensive tests using TypeScript-compatible testing frameworks to ensure application reliability.

  ```typescript
  import { render, screen } from '@testing-library/react';
  import App from './App';

  test('renders learn react link', () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
  });
  ```

## Examples

<example>
**Good Example**: Implementing a service worker for offline capabilities.

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">
**Bad Example**: Not implementing a service worker, leading to lack of offline support.

// No service worker registration
</example>