DevFlow logoDevFlow
ToolsPipelinesExploreDocsPricing
⌘F
DashboardPipeline BuilderAnalytics

Try Pro — Free 7 days

No credit card required

PWA Audit Tool — Free Manifest Validator & Service Worker Checker | DevFlow

How to PWA Manifest & Service Worker Audit Online

  1. 1

    Paste your manifest.json content into the Manifest input field. You can copy it from your project or export it from a live site via DevTools → Application → Manifest.

  2. 2

    Optionally, paste your service worker JavaScript code into the Service Worker tab. If you don't have one, you can skip this step — the tool will still audit the manifest.

  3. 3

    Click 'Audit PWA' or press ⌘↵ to run the analysis. The tool validates manifest fields, icon requirements, display modes, and service worker patterns.

  4. 4

    Review the installability status, grade (A–F), and scored 0–100 result. Red errors block installability; orange warnings are recommended fixes.

  5. 5

    Fix the issues flagged in your manifest and service worker code, then re-run the audit until you achieve installable status.

PWA Manifest & Service Worker Audit Features

  • ✓

    Manifest validator: checks required fields (name, short_name, start_url, display, icons), validates icon sizes (192x192, 512x512), purpose (maskable/any), and image formats (PNG, JPG, SVG, WebP).

  • ✓

    Installability score: Grades A–F based on manifest completeness, icon requirements, display mode validity, and service worker presence. Flags show-stopping blockers that prevent Add to Home Screen.

  • ✓

    Service worker code inspection: Detects install/activate/fetch event listeners, caching patterns (Cache First, Network First, Stale-While-Revalidate, Network Only), and flags anti-patterns like caching everything without expiry.

  • ✓

    Offline support detection: Checks for fetch handlers that serve cached responses, navigation fallbacks, and offline pages. Flags missing offline capabilities.

  • ✓

    Cache versioning audit: Ensures cache names include version identifiers (e.g., 'static-v1') and that activate handlers clean up old caches. Prevents stale asset leaks.

  • ✓

    Caching strategy recommendations: Identifies which strategy your service worker uses and suggests improvements — e.g., use Network First for API calls, Cache First for static assets.

  • ✓

    Display mode validation: Verifies display values (standalone, fullscreen, minimal-ui, browser) and warns about suboptimal choices for your use case.

  • ✓

    Icon completeness checker: Ensures both 192x192 and 512x512 icons exist, correct purpose attributes are set, and file formats are supported. Missing 512x512 blocks installability.

  • ✓

    Security & privacy: All analysis runs in your browser. No manifest or service worker code is ever sent to external servers — your IP and code stay private.

  • ✓

    AI-powered explanations: Select any issue to get an AI-generated explanation of why it matters and exact code snippets to fix it (requires AI provider configured).

  • ✓

    Exportable JSON reports: Copy the full audit result as formatted JSON (⌘⇧C) for sharing with your team, CI/CD integration, or tracking PWA progress over time.

  • ✓

    Example manifests: Built-in examples show minimal valid PWA, common install blockers, and a full-featured manifest with service worker — great for learning.

Frequently Asked Questions

What makes a PWA installable?
A PWA is installable when it meets Chrome's install criteria: (1) Served over HTTPS (or localhost), (2) Has a valid manifest with name, short_name (≤12 chars), start_url (path starting with /), display set to standalone/minimal-ui/fullscreen, (3) Contains at least a 192x192 icon and a 512x512 icon in PNG/JPEG format, (4) Has a registered service worker that controls the page. Our tool checks all manifest fields and service worker presence; HTTPS must be configured on your server.
Why is my PWA not showing the 'Install' button even though I have a manifest?
Most common causes: (1) Missing 512x512 icon — this is the #1 blocker, (2) short_name exceeds 12 characters (truncated on home screen), (3) start_url does not resolve to a valid route, (4) display set to 'browser' (opens in tab, not standalone), (5) service worker not yet activated or not controlling the page. Open DevTools → Application → Manifest to see Chrome's installability criteria diagnostic.
What's the difference between 'any' and 'maskable' icon purpose?
any: icon can be used in any context (favicon, touch icon, splash screen). maskable: icon can be safely masked by the OS into shapes (circles, squarcles) without losing important content. For adaptive icons on Android 8+, provide maskable icons. Best practice: set purpose: 'maskable any' to support both use cases, or provide two separate icons.
What caching strategy should I use in my service worker?
Choose based on resource type: (1) Static assets (CSS/JS/ fonts) → Cache First (fastest), (2) API/JSON data → Network First (fresh data) with fallback to cache, (3) Articles/content that changes hourly → Stale-While-Revalidate (balance freshness & speed), (4) Real-time data → Network Only. Never cache POST/PUT/DELETE requests. Always version cache names ('v1', 'v2') and delete old caches in activate.
Why do I need a service worker for my PWA?
The service worker enables offline support, background sync, and push notifications. Without it, your app only works online. The service worker intercepts network requests, caches resources, and serves them when offline — this is what makes a PWA 'progressive'.
What are common service worker anti-patterns?
(1) Caching everything without bounds (run out of storage), (2) No cache versioning (users stuck on old assets), (3) Skipping cleanup in activate event (old caches accumulate), (4) Not using event.waitUntil() (async ops may be terminated early), (5) Caching POST requests (bad — cache only GET), (6) No navigation fallback for offline pages. Our tool flags these patterns.
How do I test my PWA locally?
Serve your app with HTTPS (use mkcert or self-signed cert), then open Chrome and go to chrome://inspect → Service Workers to debug. For install prompt testing, use chrome://flags → 'Add to Home screen' (enable) or open DevTools → Application → Manifest to see install criteria checklist. On Android, use Chrome and visit your local IP (ensure same network).
What icon sizes are actually required?
Minimum: 192x192 (Android home screen) and 512x512 (Chrome install dialog, splash screen, Play Store). For best quality, also provide 72x72, 96x96, 128x128, 144x144, 152x152, 192x192 (duh), 384x384, 512x512. Use purpose: 'any maskable' for adaptive icons. Icons must be PNG, JPG, or WebP (SVG works but less reliable).
How is the PWA score calculated?
Starts at 100. Manifest errors (missing required fields) deduct 15 each; missing icons deduct 10–15; manifest warnings (suboptimal values) deduct 5 each. Service worker errors deduct 10; warnings deduct 3. Installability failure deducts 25. No offline support deducts 15. No cache versioning deducts 10. Grade: A (90+), B (75–89), C (60–74), D (40–59), F (<40).
Can I use this tool for CI/CD validation?
Yes. Use the API endpoint POST /api/tools/pwa-audit with manifestJson and serviceWorkerJs as JSON. Integrate into GitHub Actions, GitLab CI, or Jenkins to fail builds if PWA score drops below a threshold. Example: curl -X POST https://wtool.dev/api/tools/pwa-audit -d '{"manifestJson":{...},"serviceWorkerJs":"..."}'.
My manifest looks valid but the browser says 'No service worker found'?
The service worker must be registered AND activated. Common pitfalls: (1) service worker JS file not served at the specified scope (check path), (2) Not calling self.skipWaiting() during development (browser uses old SW), (3) Page loaded before SW activated (refresh after install), (4) Scope mismatch — SW only controls pages under its scope path. Check DevTools → Application → Service Workers for registration status and errors.
Should I use 'start_url' with query parameters?
Avoid query parameters in start_url. Use clean paths like '/' or '/home'. Query params can break scope calculation and cause duplicate entries in browser history. If you need to pass initial state, use sessionStorage or IndexedDB after the app loads, not via start_url.

Related Developer Tools

  • HTTP Headers AnalyzerAnalyze HTTP response headers for security, caching, and compliance issues.
  • CSP Builder & ValidatorBuild and validate Content Security Policy headers with security scoring.
  • Accessibility CheckerScan HTML for WCAG accessibility issues with AI-powered fix suggestions.
  • Responsive Design TesterPreview web pages across multiple device viewports instantly.