React को PWA के रूप में बनाना

{
  "name": "App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

$ cat public/manifest.json
{
  "short_name": "MyApp",
  "name": "My React App",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

// Run in your local React project (npm install required)
// vite.config.js (using vite-plugin-pwa)
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [VitePWA({ registerType: 'autoUpdate' })],
};

Image Optimization की Techniques · Production Build बनाना · Bundle Size का विश्लेषण · React में Environment Variables

1. manifest.json file भूल जाना, जो यह है जो एक browser को बिल्कुल 'Add to Home Screen' offer करने देती है।
2. Offline behavior test न करना, मान लेना कि service worker 'just works' actually verify किए बिना कि cached content बिना connection के load होती है।
3. Content को बहुत aggressively cache करना, users को एक नई deployment के लंबे समय बाद भी stale content दिखाने का कारण बनते हुए।

• एक Progressive Web App (PWA) एक web app है जो install हो सकता है और एक native app जैसा behave कर सकता है, offline support सहित।
• एक manifest.json file app का name, icons, और installation के लिए display mode describe करती है।
• एक service worker एक background script है जो assets cache कर सकती है और offline होने पर भी उन्हें serve कर सकती है।
• Vite और Create React App दोनों PWA plugins/templates offer करते हैं जो इसमें से ज़्यादातर automatically setup करते हैं।

Service workers और installability सभी modern browsers में supported हैं (historically older iOS Safari versions में notably limited support, हालांकि modern versions इसमें से ज़्यादातर support करते हैं)।