Quick answer: A progressive web app is a website built with newer browser features so it behaves more like an app. It can load quickly on repeat visits, work offline or on poor connections, be added to the home screen with its own icon, and, in some browsers, send push notifications. It runs over HTTPS and is built with a service worker and a web app manifest. Support is strongest in Chrome and Firefox on Android today, while Safari and iOS do not yet support service workers, so a PWA works as a normal website there.
The term was coined in 2015 by Google engineer Alex Russell and designer Frances Berriman to describe a set of techniques rather than a single technology. The idea is simple: instead of choosing between a website that everyone can reach and an app that people must find, download and update, you build a website that becomes more app like in browsers that allow it.
Why the idea is getting attention
Native apps have clear advantages: an icon on the home screen, offline use, notifications and smooth performance. They also have costs:
- People have to find and install them, and many will not bother for a business they use occasionally.
- You usually need separate builds for iOS and Android.
- Every update has to go through app store review and be installed by users.
- Search engines cannot index app content as easily as web pages.
Websites are the opposite: instantly reachable, linkable and indexable, but traditionally weaker offline and less engaging on mobile. Progressive web apps aim to combine the reach of the web with some of the features of apps.
What makes a web app progressive
The word “progressive” refers to progressive enhancement. The site works for everyone, and adds extra features where the browser supports them. The main characteristics are:
- Responsive: works on any screen size.
- Fast: loads quickly, especially on repeat visits.
- Reliable: works offline or on flaky connections.
- Installable: can be added to the home screen.
- Secure: served over HTTPS.
- Linkable: every screen has a URL that can be shared.
- Fresh: always up to date, without an app store update.
The building blocks
Service workers
A service worker is a script that the browser runs in the background, separate from the page. It sits between your site and the network and can decide how to answer each request:
- Serve files from a cache, so the site loads even without a connection.
- Fetch from the network and update the cache.
- Show a custom offline page instead of the browser’s error.
- Receive push messages when the site is not open.
Service workers only run over HTTPS, because they are powerful enough to intercept every request. They are supported in current versions of Chrome, Opera and Firefox. Microsoft has listed them as under consideration for Edge. Apple has not announced support in Safari.
Web app manifest
The manifest is a small JSON file that tells the browser how your app should look when installed:
- The name and short name.
- Icons in several sizes.
- The start URL.
- Theme and background colours.
- Display mode, such as full screen or standalone without the browser bar.
In Chrome on Android, a site with a manifest, a service worker and HTTPS can show an “add to home screen” banner to engaged visitors. Once added, it opens like an app, with its own icon and splash screen.
The app shell model
Many PWAs use an “app shell”: the basic layout, menu and styling are cached on the first visit, and only the content is fetched from the network after that. The interface appears almost instantly on later visits, even on slow mobile connections.
What PWAs can and cannot do today
Works now (in supporting browsers)
- Offline and low connection support through caching.
- Add to home screen with an icon and full screen display.
- Push notifications in Chrome and Firefox.
- Background updates to cached content.
Not available or limited
- No service worker support in Safari or on iOS, so iPhone users get the normal website.
- Limited access to some device features that native apps can use, such as contacts or Bluetooth.
- No presence in app stores, which some users still expect.
- Payments, background sync and other features are still being developed as web standards.
Where a PWA makes sense
Content and publishing sites
News sites, blogs and magazines can cache articles for reading offline and load quickly on repeat visits.
Ecommerce
Shoppers on mobile networks benefit from faster loading. Caching the product catalogue structure and showing a useful offline page reduces the frustration of dropped connections.
Booking and service tools
Customer portals, booking systems and simple account tools often do not justify a native app. A PWA can give regular users a home screen icon and fast access.
Internal business tools
Staff tools for field work, stock checks or inspections benefit from offline support, and a PWA avoids managing app store distribution for a small internal audience.
Where a native app is still better
- Apps that rely heavily on device hardware, such as advanced camera features or Bluetooth devices.
- Games and graphics heavy apps.
- Products where iOS users are the main audience and offline use is essential.
- Situations where being listed in the app stores matters for discovery.
Planning a PWA
Start with a good mobile website
A PWA is only as good as the site underneath it. Fix responsive layout, page weight and navigation first. If your site is not mobile friendly yet, our guide to the mobile friendly update is the place to start.
Move to HTTPS
Service workers require it. Our HTTPS migration guide covers the steps without losing search rankings.
Decide on a caching strategy
Not everything should be cached the same way. Common approaches:
- Cache first for the app shell, fonts and icons that rarely change.
- Network first for content that must be fresh, such as prices or stock levels.
- Stale while revalidate for content where showing a slightly old version immediately is fine while a fresh copy loads.
Plan how cached content is updated, or users may see old versions after you change something.
Think about data
If your app reads from your systems through an API, design that API with caching in mind. Our article on REST API design explains good practice.
Test on real devices
Test on mid range Android phones with throttled connections, not just a fast laptop. That is where the benefits show.
FAQ
Do PWAs help SEO?
A PWA is a website, so its pages can be indexed like any other. Speed improvements can help. Sites that build everything in JavaScript need care, because search engines may not see content that only appears after scripts run.
Will a PWA replace our native app?
For some businesses, especially those whose app mainly displays content or handles simple tasks, it may. For others it can be the mobile web experience alongside the native app.
Is it expensive to build?
Adding a manifest and a basic service worker with an offline page to an existing site is a modest job. A full app shell with complex caching takes more planning and development.
Weighing up web, app or both?
We help businesses decide whether a native app, a progressive web app or a better mobile website is the right fit, then build it. See our approach to custom development.
