Skip to content

Migrate from a native app to a PWA

Published

In one line: A Progressive Web App (PWA) is an application built using web technologies that provides a user experience similar to that of a platform-specific app. This guide covers two of its foundational pieces: the Web App Manifest, which supplies the metadata a browser needs to install the app, and the Service Worker, which can intercept requests to implement offline behaviour.

Both pieces are gated by real browser support, not universal: consult the Manifest and Service Worker compatibility entries for the current per-browser, per-OS position before committing to a migration timeline — support differs enough between engines that “PWA” is not a single yes/no feature.

A minimal manifest supplies the metadata a browser uses when installing the app:

{
"name": "My Migrated App",
"short_name": "MyApp",
"start_url": "/",
"display": "standalone",
"icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}

A service worker is registered from the page and then runs separately from it:

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}

Feature-detect service worker support before relying on it, and give the reader a working page when support is absent rather than a silent failure:

function supportsServiceWorker() {
if ('serviceWorker' in navigator) {
return true;
}
// Fallback: no Service Worker support — the page still loads and functions
// normally, just without the offline behaviour a service worker can add.
return false;
}
  • Do not assume every native capability has a direct browser equivalent — check what the target browsers actually expose using the compatibility entries linked above before committing to a scope.
  • Treat the manifest and service worker as two separate things to verify — do not assume support for one implies support for the other.
  • Keep the migrated app usable when the service worker is absent or unregistered, using the feature-detection fallback shown above.
  • Re-verify current support using the compatibility entries above before shipping, rather than relying on this guide’s snapshot.