PWA Manifest & Service Worker Audit
Validate manifest.json, inspect service worker config, and flag installability issues.
Audit Progressive Web Apps (PWAs) directly in your browser with our comprehensive manifest validator and service worker inspector. Validate web app manifest JSON properties including required name and short_name lengths, start_url routes, display modes (standalone, fullscreen, minimal-ui), orientation locks, theme colors, and adaptive maskable icon sets (192x192, 512x512). Inspect service worker lifecycle listeners (install, activate, fetch), detect runtime caching strategies (Cache First, Network First, Stale-While-Revalidate), verify cache versioning, and identify installability blockers. Features instant A–F scoring, actionable issue diagnostics, and 100% client-side privacy with zero telemetry.
Keywords: PWA audit tool, manifest validator, web app manifest, service worker checker, PWA installability, progressive web app, PWA testing, add to home screen, offline support, caching strategy, manifest.json validator, service worker debug, PWA checklist, install prompt, manifest icons, service worker caching
Tags: pwa, manifest, service-worker, audit, install, offline, validator
Popular Web Code tools
- URL Encoder/DecoderEncode, decode, and parse URLs and query strings instantly.
- SQL FormatterFormat, minify, and validate SQL queries with dialect support.
- SVG OptimizerOptimize, minify, and clean SVG files with configurable SVGO presets.
- Color ConverterConvert colors between HEX, RGB, HSL, oklch, CMYK, and 16+ formats instantly.
- HTML FormatterFormat, minify, and validate HTML with attribute sorting and template support.
PWA Manifest & Service Worker Audit is also known as: PWA Validator, Web App Manifest Checker, Service Worker Tester, PWA Installability Checker, Progressive Web App Linter, Manifest.json Validator.
How to PWA Manifest & Service Worker Audit Online
Paste your web app manifest JSON content (manifest.json or site.webmanifest) into the Manifest input editor.
Optionally, switch to the Service Worker tab and paste your background service worker JavaScript code (sw.js).
Click "Audit PWA" or press ⌘↵ (Ctrl+Enter) to execute the client-side validation engine.
Inspect the comprehensive Installability status, A–F letter grade, and 0–100 scored health benchmark.
Review severity-ranked diagnostics: red errors indicate critical installability blockers, while orange warnings highlight suboptimal configurations.
Export your full audit report as formatted JSON (⌘⇧C) for team sharing, CI/CD pipeline integration, or compliance tracking.
PWA Manifest & Service Worker Audit Features
Complete Web App Manifest validation: checks required name, short_name length constraints, absolute start_url paths, and display modes.
App installability scoring: grades PWA readiness (A–F) and flags fatal blockers that prevent Add to Home Screen prompts across mobile and desktop.
Adaptive icon audit: verifies 192x192 and 512x512 resolution presence, valid MIME formats (PNG, WebP, SVG), and maskable purpose attributes.
Service worker lifecycle analysis: inspects install, activate, and fetch event handlers to ensure proper registration and execution.
Runtime caching strategy detection: classifies Cache First, Network First, Stale-While-Revalidate, Cache Only, and Network Only patterns.
Offline fallback verification: identifies navigation preload, offline HTML document handlers, and offline asset availability.
Cache versioning & cleanup inspection: detects versioned cache names and ensures activate handlers purge stale caches to avoid asset deadlocks.
Display mode and orientation validation: audits standalone, minimal-ui, fullscreen, and browser display modes alongside screen orientation locks.
Web App Shortcuts validation: verifies quick-action shortcut names, target URLs, and icon dimensions for Android and desktop app menus.
Async lifecycle safety: checks that asynchronous cache operations are safely wrapped in event.waitUntil() to prevent browser task termination.
Exportable JSON reports: copy the complete audit diagnostic tree with one keystroke (⌘⇧C) for automated CI/CD gating and reporting.
100% Client-side privacy: all manifest parsing and AST code inspection execute locally in your browser with zero remote data transfer.
Supported Formats & Dialects
The PWA Manifest & Service Worker Audit supports 6 syntax formats and dialects for accurate parsing and processing.
- Standard Web App Manifest (manifest.json / site.webmanifest)
- Standard W3C metadata specification defining application branding, start URLs, default display orientations, theme/background colors, and system launcher shortcuts.
- Standalone & Minimal-UI Display Configurations
- Immersive application windows that hide default browser chrome (navigation bars and address inputs) to deliver native operating system look and feel.
- Maskable & Adaptive Icon Profiles
- Android adaptive icon standards utilizing 10% safe-zone margins and "purpose": "maskable any" to prevent harsh letterboxing and awkward circular cropping.
- Cache-First Precaching Architecture (Workbox & Native)
- Deterministic precaching patterns utilizing CacheStorage during the service worker install event for immutable CSS, JavaScript bundles, web fonts, and core markup.
- Network-First & Stale-While-Revalidate Runtime Strategies
- Dynamic network interceptors that balance instant response speed against real-time data freshness for APIs, user feeds, and frequently updated documents.
- Background Sync & Web Push Notification Service Workers
- Event-driven background worker tasks operating independently of the browser window to handle push payloads, badge counts, and queued offline network synchronization.
In-Depth Technical Guides
All GuidesDetecting Website Technology Stacks: Frameworks, CMS & Server Fingerprinting Guide
Learn how to detect frontend frameworks, CMS platforms, CDN edge layers, and server runtimes using DOM markers, script paths, and HTTP response headers.
Frontend Bundle Size Optimization: Tree-Shaking, Chunk Splitting & Dead Code Elimination
Diagnose JavaScript bundle bloat, fix broken tree-shaking patterns, eliminate barrel file overhead, and optimize Core Web Vitals (INP/LCP) in Next.js, Vite, and Webpack.
Mastering Responsive Web Design: Viewports, CSS Breakpoints & Multi-Device Testing
A comprehensive developer guide to responsive web design, covering layout vs visual viewports, modern CSS media queries, container queries, fluid typography, and viewport testing strategies.
PWA Web App Manifest & Service Worker Guide: Icons, Offline Caching & Installability
Build installable Progressive Web Apps that pass Lighthouse audits. Master web app manifest configurations, maskable icons, and service worker caching strategies.
Related Standards & RFC Specifications
All StandardsA Progressive Web App is a web application built using modern APIs to deliver native app-like capabilities, offline support, and installability.
A Service Worker is an event-driven programmable client-side network proxy running in the browser background to enable offline caching, push notifications, and background sync.
The viewport represents the visible polygonal viewing area in web browsers, governing CSS layout dimensions, media query breakpoints, and responsive rendering.
Explore Full AI Model Pricing Directory
Compare per-token rates, prompt caching discounts, and context windows across leading LLMs (GPT-4o, Claude 3.5 Sonnet, Gemini 2.5 Flash, DeepSeek, and more) in our verified catalog.
Pre-built Automation Pipelines
Chain PWA Manifest & Service Worker Audit with other utilities in a multi-step visual workflow.
Base64 Decode → JSON Format
Decode a Base64 string and pretty-print the JSON inside it.
CSV → JSON → YAML
Convert CSV data to JSON, then to YAML format.
JSON Format → TypeScript Schema
Format JSON and generate TypeScript/Zod schema from it.
Example Input & Output
Sample ReferenceInteractive Example: PWA Manifest & Service Worker Audit in ActionShow example
Sample Input (text)
{
"name": "My Progressive Web App",
"short_name": "MyPWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0284c7",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"purpose": "any"
}
]
}Sample Output
[Processed output for PWA Manifest & Service Worker Audit]
Input transformed successfully using PWA audit tool, manifest validator, web app manifest.What happened:
Validate manifest.json, inspect service worker config, and flag installability issues.
Frequently Asked Questions
- What exact criteria must a Progressive Web App satisfy to trigger native "Install" prompts in modern browsers?
- To trigger the browser install prompt (such as Chrome's "beforeinstallprompt" event or the desktop install icon), a web application must fulfill four core requirements: (1) Served securely over HTTPS or localhost, (2) Contains a valid Web App Manifest with a non-empty name or short_name, an absolute start_url, a display property set to standalone, fullscreen, or minimal-ui, and at least 192x192 and 512x512 PNG/WebP icons, (3) Has a registered and active Service Worker with a fetch event handler providing offline support, and (4) The user meets standard engagement heuristics (e.g., interacting with the page for several seconds).
- Why is the 512x512 PNG icon strictly required, and how do "maskable" vs "any" purpose values work?
- Browsers and operating systems require a 512x512 PNG icon to generate high-resolution splash screens, task switcher thumbnails, and app store preview listings. The "purpose" property specifies how the OS renders the icon: "any" allows the image to be rendered as-is (with transparent backgrounds), while "maskable" indicates that the icon includes a 10% safe zone margin allowing Android to crop it into circular, squircle, or rounded-rectangular shapes without clipping core logo artwork. Providing icons with purpose "maskable any" or separate entries for both formats ensures optimal display across all platforms.
- How does display: standalone differ from minimal-ui, fullscreen, and browser display modes?
- "standalone" opens the web app in its own dedicated top-level window, completely hiding the browser URL bar, navigation buttons, and bookmarks to look like a native application. "minimal-ui" provides a standalone window with minimal navigation controls (back/reload buttons). "fullscreen" occupies the entire hardware display with no OS status bars (ideal for games and kiosk interfaces). "browser" opens links in standard browser tabs without native app encapsulation.
- What are the key Service Worker lifecycle events (install, activate, fetch) and why is event.waitUntil() critical?
- A service worker transitions through three primary lifecycle events: (1) "install": triggered when a new worker is downloaded, used for precaching static app shell assets; (2) "activate": triggered after old workers are replaced, used for deleting outdated cache buckets and claiming clients; and (3) "fetch": intercepts outgoing HTTP network requests. Wrapping asynchronous operations (such as caches.open or cache.addAll) in "event.waitUntil(promise)" is critical because it signals the browser to keep the service worker thread alive until all underlying asynchronous tasks successfully resolve.
- How should developers choose between Cache-First, Network-First, and Stale-While-Revalidate caching strategies?
- Choose based on asset volatility and network sensitivity: (1) Cache First: Best for versioned/content-hashed static assets (compiled JavaScript, CSS, web fonts, brand logos) where speed is paramount and files are immutable; (2) Network First: Best for dynamic, rapidly changing resources (REST APIs, live financial data, user profiles) where fresh data is mandatory but offline fallback is desired; (3) Stale-While-Revalidate: Best for high-frequency reads that tolerate slight staleness (blog posts, avatars, documentation pages) by returning the cached version instantly while asynchronously fetching and caching the fresh version.
- How do self.skipWaiting() and clients.claim() affect service worker activation and updates?
- By default, when an updated service worker is installed, it remains in the "waiting" state until all browser tabs controlled by the previous worker are closed. Calling "self.skipWaiting()" inside the install event forces the new worker to activate immediately without waiting for user tab closure. Calling "self.clients.claim()" inside the activate event allows the active service worker to immediately take control of all uncontrolled open client tabs without requiring an explicit page refresh.
- How can PWAs provide an offline fallback navigation page when network requests fail?
- During the service worker "install" event, precache a dedicated fallback HTML page (e.g., "/offline.html"). In the "fetch" event listener, inspect whether the request is a page navigation by checking "event.request.mode === 'navigate'". If the network request fails due to lack of connectivity, catch the network exception and return the cached "/offline.html" response using "caches.match('/offline.html')". This ensures users see a friendly, branded offline screen rather than the browser's default network error page.
- Why should service workers avoid caching HTTP POST, PUT, and DELETE requests?
- HTTP POST, PUT, and DELETE requests represent state-mutating operations that modify server-side database records. The Cache Storage API is designed for idempotent GET requests. Caching POST or PUT responses can lead to severe defects, such as replaying duplicate transactions, submitting stale form payloads, or caching authentication errors. For offline state mutations, modern PWAs use Background Sync APIs combined with client-side IndexedDB queues to buffer and replay mutation requests once connectivity is restored.
- How does cache versioning prevent stale asset deadlocks across PWA deployments?
- Because service workers cache assets locally in Cache Storage, users may remain stuck on obsolete JavaScript and CSS bundles if cache keys remain unchanged across deployments. By defining versioned cache names (e.g., "static-v2.1.0") and iterating through "caches.keys()" during the "activate" event to delete all cache names not matching the current version, developers ensure seamless cache invalidation and prevent stale asset deadlocks on production deployments.
- What are Web App Shortcuts (shortcuts manifest array) and how do OS launchers render them?
- Web App Shortcuts allow developers to define deep links to specific application pages (e.g., "New Invoice", "Compose Message", "Search") within the "shortcuts" array of manifest.json. On mobile devices (Android) and desktop platforms (Windows/macOS), the operating system exposes these shortcuts when a user long-presses or right-clicks the installed app icon, allowing users to jump directly into specific workflows.
- How do PWAs behave on Apple iOS/iPadOS Safari compared to Android Chrome and desktop platforms?
- On iOS/iPadOS Safari, users install PWAs by tapping the Share button and selecting "Add to Home Screen". Since iOS 16.4, PWAs installed to the home screen support Web Push Notifications, Badging API, and background synchronization with dedicated WebKit isolated storage. Unlike Android Chrome, iOS does not trigger the programmatic "beforeinstallprompt" event, requiring custom UI instructions guiding iOS users through the manual Share sheet installation process.
- Is any manifest JSON or service worker code sent to a remote server during this audit?
- No. The DevFlow PWA Audit Tool runs 100% locally in your web browser using client-side JavaScript AST parsing and JSON schema validation. Your manifest configuration, proprietary service worker source code, API keys, and endpoint paths are never transmitted, logged, or stored on external servers.
Related Developer Tools
- Favicon GeneratorGenerate multi-size ICO, SVG, Apple Touch, and PWA favicons from images, text, or emojis.
- Meta Tag GeneratorGenerate SEO meta tags, Open Graph, Twitter Cards, and JSON-LD structured data.
- Responsive Design TesterPreview web pages across multiple device viewports instantly.
- HTTP Headers AnalyzerAnalyze HTTP response headers for security, caching, and compliance issues.
- CSP Builder & ValidatorBuild and validate Content Security Policy headers with security scoring.
- Bundle Size AnalyzerAnalyze and visualize JavaScript bundle sizes with optimization suggestions.
- Accessibility CheckerScan HTML for WCAG accessibility issues with AI-powered fix suggestions.