Implementing Progressive Web App (PWA) Features in React

{
  "title": "Implementing Progressive Web App (PWA) Features in React",
  "description": "Guidelines for adding PWA capabilities to React applications to enhance offline functionality and performance.",
  "category": "React Cursor Rules",
  "rules": [
    {
      "id": "pwa-service-worker-registration",
      "description": "Ensure the service worker is registered in the React application to enable offline capabilities.",
      "severity": "error",
      "pattern": "import\\s+\\*\\s+as\\s+serviceWorkerRegistration\\s+from\\s+['\"]\\.\\/serviceWorkerRegistration['\"]",
      "fix": {
        "description": "Add the service worker registration code to your React application's entry point.",
        "code": "import * as serviceWorkerRegistration from './serviceWorkerRegistration';\n\nserviceWorkerRegistration.register();"
      }
    },
    {
      "id": "pwa-manifest-existence",
      "description": "Verify the presence of a valid web app manifest file to define the PWA's metadata.",
      "severity": "error",
      "pattern": "public\\/manifest\\.json",
      "fix": {
        "description": "Create a 'manifest.json' file in the 'public' directory with appropriate metadata.",
        "code": "{\n  \"short_name\": \"MyPWA\",\n  \"name\": \"My Progressive Web App\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}"
      }
    },
    {
      "id": "pwa-https-enforcement",
      "description": "Ensure the application is served over HTTPS to meet PWA security requirements.",
      "severity": "error",
      "pattern": "https://",
      "fix": {
        "description": "Configure your development and production environments to serve the application over HTTPS.",
        "code": "In development, set the 'HTTPS' environment variable to 'true':\n\nHTTPS=true npm start\n\nIn production, deploy your application to a server with an SSL certificate to enable HTTPS."
      }
    },
    {
      "id": "pwa-service-worker-caching",
      "description": "Implement caching strategies in the service worker to enhance offline functionality and performance.",
      "severity": "warning",
      "pattern": "self\\.addEventListener\\('install',\\s*\\(event\\)\\s*=>\\s*{",
      "fix": {
        "description": "Add caching logic to the service worker's 'install' event to cache essential assets.",
        "code": "self.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('app-cache').then((cache) => {\n      return cache.addAll([\n        '/',\n        '/index.html',\n        '/manifest.json',\n        '/static/css/main.chunk.css',\n        '/static/js/main.chunk.js'\n        // Add additional static assets to cache\n      ]);\n    })\n  );\n});"
      }
    },
    {
      "id": "pwa-lighthouse-audit",
      "description": "Perform a Lighthouse audit to evaluate the PWA's performance, accessibility, and best practices compliance.",
      "severity": "info",
      "pattern": "",
      "fix": {
        "description": "Use Lighthouse to audit your application and identify areas for improvement.",
        "code": "Run Lighthouse in Chrome DevTools:\n\n1. Open Chrome DevTools.\n2. Navigate to the 'Lighthouse' tab.\n3. Click 'Generate report' to perform the audit."
      }
    }
  ]
}