Developing Progressive Web Apps (PWAs) with Angular

{
  "title": "Developing Progressive Web Apps (PWAs) with Angular",
  "description": "Best practices for creating PWAs using Angular to provide offline capabilities and improved user experiences.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "pwa-service-worker",
      "description": "Implement a service worker to enable offline capabilities and resource caching.",
      "recommendation": "Use Angular's built-in service worker by adding the Angular PWA package and configuring the `ngsw-config.json` file to cache essential assets and API responses.",
      "severity": "error"
    },
    {
      "id": "pwa-web-app-manifest",
      "description": "Include a Web App Manifest to define the PWA's metadata.",
      "recommendation": "Create a `manifest.webmanifest` file with the app's name, icons, start URL, display mode, and theme colors, and link it in the `index.html`.",
      "severity": "warning"
    },
    {
      "id": "pwa-responsive-design",
      "description": "Ensure the application is responsive across various devices and screen sizes.",
      "recommendation": "Utilize CSS media queries and Angular Material components to create a responsive layout that adapts to different viewports.",
      "severity": "warning"
    },
    {
      "id": "pwa-lazy-loading",
      "description": "Implement lazy loading for modules to improve performance.",
      "recommendation": "Configure Angular's router to lazy load feature modules, reducing the initial load time of the application.",
      "severity": "error"
    },
    {
      "id": "pwa-offline-ui",
      "description": "Provide a user-friendly offline experience.",
      "recommendation": "Design an offline page that informs users of their offline status and offers guidance on available features during connectivity loss.",
      "severity": "warning"
    },
    {
      "id": "pwa-push-notifications",
      "description": "Incorporate push notifications to enhance user engagement.",
      "recommendation": "Use the service worker to handle push events and display notifications, ensuring users are informed about updates and new content.",
      "severity": "warning"
    },
    {
      "id": "pwa-security-https",
      "description": "Serve the application over HTTPS to ensure security.",
      "recommendation": "Configure the web server to use HTTPS, as service workers and other PWA features require a secure context.",
      "severity": "error"
    },
    {
      "id": "pwa-performance-optimization",
      "description": "Optimize performance by minimizing and compressing assets.",
      "recommendation": "Use tools like Webpack to minify JavaScript and CSS files, and implement image optimization techniques to reduce load times.",
      "severity": "warning"
    },
    {
      "id": "pwa-accessibility",
      "description": "Ensure the application is accessible to all users.",
      "recommendation": "Follow WCAG guidelines and use ARIA attributes to improve accessibility for users with disabilities.",
      "severity": "warning"
    },
    {
      "id": "pwa-testing",
      "description": "Conduct thorough testing to ensure PWA functionality.",
      "recommendation": "Use tools like Lighthouse to audit the PWA's performance, accessibility, and best practices compliance.",
      "severity": "warning"
    }
  ]
}