PWA Audit: Manifest Validator & Service Worker Checker

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.

How to PWA Manifest & Service Worker Audit Online

1. 1

   Paste your web app manifest JSON content (manifest.json or site.webmanifest) into the Manifest input editor.

2. 2

   Optionally, switch to the Service Worker tab and paste your background service worker JavaScript code (sw.js).

3. 3

   Click "Audit PWA" or press ⌘↵ (Ctrl+Enter) to execute the client-side validation engine.

4. 4

   Inspect the comprehensive Installability status, A–F letter grade, and 0–100 scored health benchmark.

5. 5

   Review severity-ranked diagnostics: red errors indicate critical installability blockers, while orange warnings highlight suboptimal configurations.

6. 6

   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.

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.