React Progressive Web App

Make your React app work offline as a PWA.

Create PWA Template

```bash npx create-react-app my-app --template cra-template-pwa ```

Register Service Worker

```javascript // index.js import * as serviceWorkerRegistration from './serviceWorkerRegistration';

serviceWorkerRegistration.register(); ```

manifest.json

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

Offline Detection

```javascript function useOnlineStatus() { const [isOnline, setIsOnline] = useState(navigator.onLine);

useEffect(() => { const handleOnline = () => setIsOnline(true); const handleOffline = () => setIsOnline(false);

window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline);

return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []);

return isOnline; } ```

Remember

- Works offline - Installable on mobile - Add to home screen - Requires HTTPS

> Next: Learn GraphQL!