A progressive web app (PWA) is an app built with web technologies that can be installed and used like a platform-specific app, partly even offline. It runs from one codebase on many platforms and stays reachable through a normal URL.
What is a PWA made of?
MDN describes these building blocks. The web app manifest is a JSON file with the app’s name, icons, start URL, display mode and colors. A service worker is a script that can intercept requests and cache responses, which enables offline use and background tasks. Both depend on HTTPS, and service workers only run over secure connections.
MDN’s guide states that a PWA needs a manifest to be installed but no service worker. Whether a browser offers installation depends on further criteria, such as suitable icons, and these vary by browser.
What does it mean for SEO?
For Google a PWA is handled like any JavaScript website. Googlebot fetches the HTML, queues pages with status 200 for rendering in a headless Chromium and indexes the rendered result. It finds links only in <a> elements with an href. For apps with client-side routing, Google recommends the History API instead of URL fragments, because it cannot reliably resolve fragment URLs. For pages that do not exist, the app should return a real error status or add noindex, otherwise soft 404 pages appear.
Microsoft’s documentation lists indexing by search engines as one of the web-related advantages of PWAs. A PWA has no separate SEO status, and where each view has its own linkable URL the usual rules apply.
In a test by searchVIU (2020), registering a service worker during the Search Console live test failed with the message “Rejected.” That fits Google’s description of its renderer, which keeps no state between page loads and clears cookies and local storage. A PWA’s content should therefore load completely without a service worker.
Example
Linking the manifest in the <head>:
<link rel="manifest" href="/manifest.webmanifest">
An excerpt of the file:
{
"name": "Example Shop",
"start_url": "/",
"display": "standalone",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Common mistakes
- Error screens that return status 200 and become soft 404 pages.
- Routing with
#fragments. - Click handlers instead of
<a href>, so follow-up pages are not discovered.
FAQ
How is a PWA installed? If the site meets the browser’s criteria, the browser offers installation, usually in the address bar or the menu.
More on the searchVIU blog
Sources
- Progressive web apps – MDN Web Docsdeveloper.mozilla.org
- What is a progressive web app? – MDN Web Docsdeveloper.mozilla.org
- Overview of Progressive Web Apps – Microsoft Edge Docslearn.microsoft.com
- Understand JavaScript SEO basics – Google Search Centraldevelopers.google.com
- The Truth About Service Workers and Google Search – searchVIU blog (2020)searchviu.com
- Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
Last updated: