100 Mobile Web / PWA resources for developers

Define 'display': 'standalone' and 'theme_color' in manifest.json to ensure the browser UI is removed and the status bar matches your brand on Android.

Use the Workbox CLI or build tool plugin to automatically generate a service worker that handles precaching for all assets in your build folder.

Implement Workbox's StaleWhileRevalidate for API calls to serve cached content immediately while updating the cache in the background.

Add a 'message' event listener to call self.skipWaiting() allowing new service workers to activate immediately without waiting for tab closure.

Include <link rel='apple-touch-icon' sizes='180x180' href='/icon.png'> because iOS ignores the Web App Manifest for home screen icons.

Use the SyncManager to defer actions like form submissions until the user has a stable internet connection.

Implement a cache-cleanup function during the 'activate' event to delete outdated cache versions and free up mobile storage.

Integrate vite-plugin-pwa for zero-config manifest generation and service worker registration in Vue or React projects.

Invoke navigator.share() to trigger the native mobile sharing sheet for text, URLs, or files instead of custom UI overlays.

Enable navigationPreload in your service worker to start network requests for the main page before the service worker has finished booting.

Use navigator.setAppBadge(count) to show a notification count on the installed PWA icon on supported platforms like Android and macOS.

Capture the 'beforeinstallprompt' event to show a custom in-app button for installation rather than relying on browser banners.

Add 'viewport-fit=cover' to your meta viewport tag and use 'env(safe-area-inset-top)' to handle notches on iPhone and modern Android devices.

Apply fetchpriority='high' to LCP images (like hero banners) to ensure the browser prioritizes them over scripts and styles.

Apply content-visibility: auto to long lists or off-screen sections to skip rendering work until the element approaches the viewport.

Use 'touch-action: manipulation' on buttons to disable the 300ms tap delay and improve perceived responsiveness on older mobile browsers.

Serve AVIF images via the <picture> element to reduce payload size by up to 50% compared to WebP on supported mobile browsers.

Set font-display: swap in @font-face to prevent invisible text during font loading, critical for slow mobile 3G connections.

Use 'contain: layout style' on independent UI components to limit the scope of browser reflows and repaints.

Always audit using the 'Mobile' preset in Lighthouse to simulate a Moto G4 on a 4G connection, revealing true performance bottlenecks.

Pass {passive: true} to touch and wheel event listeners to prevent them from blocking the browser's main thread during scrolling.

Combine small UI icons into a single SVG sprite to reduce the number of HTTP requests on high-latency mobile networks.

Use <link rel='preconnect'> for critical third-party origins like font providers or API endpoints to resolve DNS/TLS early.

Implement push notifications using VAPID keys to send system-level alerts to users even when the browser is closed.

Use the 'idb' wrapper for IndexedDB to store large amounts of structured data locally for offline-first application logic.

Wrap your PWA with Ionic Capacitor to access native APIs like Camera, Geolocation, and Biometrics that are restricted in standard browsers.

Implement navigator.credentials.get({otp}) to automatically read SMS verification codes, reducing friction in mobile login flows.

Standardize gesture handling (swipes, pinches) by using Pointer Events instead of separate Touch and Mouse event listeners.

Request navigator.storage.persist() to prevent the mobile OS from automatically clearing your app's IndexedDB and Cache data under storage pressure.

Use navigator.contacts.select() to allow users to select contacts from their native address book directly into your web app.

Implement window.showOpenFilePicker for PWAs that require direct editing and saving of local user files on supported platforms.

Use navigator.wakeLock.request('screen') to keep the device screen on during long-running tasks like navigation or media playback.

Configure your service worker to serve a static 'offline.html' page when a navigation request fails and no cache is available.

Use navigator.virtualKeyboard to programmatically control keyboard behavior and adjust layouts so UI elements aren't obscured.