WebTools

307 Useful Tools & Utilities to make life easier.

PWA Compatibility Checker

Audit your website for Progressive Web App features.

What makes a PWA?

Security

HTTPS: A secure connection is required for Service Workers and installability.

Manifest

Web App Manifest: A JSON file that tells the browser how your app should behave when installed.

Capabilities

Service Worker: JavaScript that runs in the background for offline support and push notifications.

Mobile

Mobile Meta Tags: Essential tags that control scaling and appearance on mobile devices.

PWA Compatibility Check – Is Your Site a True Progressive Web App?

You’ve added a manifest file. You’ve registered a service worker. You’ve turned on HTTPS. That should be enough to make your website a Progressive Web App, right? Not necessarily. The gap between “ticking the boxes” and delivering a genuinely installable, offline‑capable, native‑like experience can be frustratingly wide. The PWA Compatibility Check on BlogsLight closes that gap. It runs a comprehensive battery of tests against any live URL, simulating exactly what Chrome, Edge, and other browsers look for before they offer the “Add to Home Screen” prompt. In under ten seconds, you get a clear, prioritized scorecard that tells you what’s working perfectly, what’s missing, and exactly how to fix it. No command‑line tools, no reading through Lighthouse documentation, no second‑guessing whether your manifest icons are the right size. Just a direct, actionable audit that turns a “maybe” PWA into a confident, installable one.

Why a Simple Checklist Isn’t Enough

A PWA is more than the sum of its parts. A valid manifest.json is essential, but if it’s missing a 512x512 icon, the install prompt won’t fire on high‑resolution Android devices. A registered service worker with a fetch handler is required, but if it doesn’t return a 200‑OK response for offline navigation, your app won’t actually work when the network drops. Mixed content—loading even one image over HTTP on an HTTPS page—can block the install prompt entirely. The PWA Compatibility Check tests all these interdependencies. It doesn’t just look at each requirement in isolation; it verifies that they work together in a live browser context, just as a real user would experience.

What the Tool Actually Tests (and Why Each Matters)

  • HTTPS enforcement: The checker verifies that the page itself is served over HTTPS and that all sub‑resources (scripts, stylesheets, images, fonts) are also secure. Mixed content warnings, even passive ones, are flagged because they break the secure context requirement for service workers and installability.
  • Web App Manifest detection and validation: The tool fetches the manifest.json file linked from your <link rel="manifest"> tag and parses it. It checks for required properties—name or short_name, start_url, display, and at least one icon of 192x192 and 512x512 pixels. It also validates the format of start_url (must be same‑origin), the scope, and the icons array. If the manifest is missing a maskable icon or the purpose field, it notes that as a recommendation.
  • Service worker registration and functionality: The checker opens your page in a headless browsing environment, detects the active service worker, and evaluates its scope. It then simulates an offline request to confirm that the service worker serves a cached response. A service worker that registers but doesn’t handle fetch events is flagged as insufficient.
  • Installability criteria: Using the same heuristics as Chrome, the tool determines whether the “Add to Home Screen” prompt would trigger. It checks that the manifest has no prefer_related_applications set to true (which would suppress the prompt), that the user has a valid engagement history (simulated), and that the service worker and HTTPS requirements are met. It gives a clear yes/no on installability and explains why if it’s a “no.”
  • Splash screen and theme readiness: For a polished launch experience, the checker verifies that the manifest includes background_color and theme_color, and that these values are valid CSS colours. It also confirms that the icons are large enough to produce a crisp splash screen.
  • Apple touch icon and meta tags: While not strictly PWA requirements for Android, the tool checks for the presence of <link rel="apple-touch-icon"> and common iOS meta tags (apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style), so your PWA also feels native on iPhones and iPads.
  • Offline fallback and caching strategy: The tool attempts to load the page after disconnecting from the network. It reports whether a cached version is served and whether the page displays meaningful content or just a generic error. This test reveals whether your caching strategy actually works in the real world.

Step‑by‑Step: Run a Complete PWA Audit

  1. Enter your live URL. The tool works best with a production HTTPS URL; localhost won’t be reachable for some tests.
  2. Click “Check Compatibility.” The audit runs in multiple stages—you’ll see a progress indicator for each test. The entire process takes under ten seconds for most sites.
  3. Review the overall score. A large percentage badge (e.g., “82%”) gives you an at‑a‑glance health reading. Below it, tests are grouped into Passed (green), Recommendations (amber), and Failures (red).
  4. Expand each failed test. Click any red or amber item to read a detailed explanation. For example, “Manifest missing 512x512 icon: Add an icon with sizes: "512x512" to enable the install prompt on high‑DPI Android devices. The tool will even suggest the exact JSON snippet to add.”
  5. Fix the issues on your site. Start with the red failures—these are blockers to installability. Then address the amber recommendations to improve user experience.
  6. Re‑test. Use the “Force Re‑scan” button to bypass any caching and get an updated score. Your goal is a clean green dashboard with an installability “Yes.”

Common Gaps the Checker Uncovers

  • The 512x512 icon is missing. Many developers generate a manifest with a 192x192 icon and stop there. The tool flags this immediately.
  • Service worker scope is too narrow. A service worker registered at /app/ won’t control the root /, which may leave the start URL uncovered. The checker maps the scope and highlights mismatches.
  • Mixed content from old image URLs. Even one http:// image link in your CSS or content can kill installability. The checker’s mixed content scanner finds these hidden landmines.
  • Offline fallback is missing or empty. A service worker that caches nothing still passes basic registration checks but fails the offline test. The tool shows you the exact response code returned offline.
  • display: "browser" is set. That tells the browser not to open the app in a standalone window, effectively disabling the native‑app feel.

How the PWA Compatibility Check Fits Your Whole Toolkit

Once you’ve diagnosed your PWA’s weak spots, the PWA Manifest Generator helps you rebuild a flawless manifest with all the right icons. To ensure your pages themselves are fast and SEO‑friendly, run an SEO Analyzer audit—it will check for missing meta tags, broken links, and performance issues that affect both SEO and PWA quality. Crawl your entire site with the Site Crawler to verify that the manifest link and service worker registration are present on every page, not just the homepage. Pick the exact theme_color and background_color using the Wheel Color Picker to make your splash screen perfectly on‑brand. Make sure your PWA pages are shareable and look great when tweeted by using the SEO Tags Generator and the Twitter Card Generator to craft rich social previews. Speed is non‑negotiable, so confirm your server compresses assets with the Gzip Test. Finally, keep your PWA pages discoverable and indexed by including them in a clean Sitemap. Together, these tools turn a checklist into a genuine, high‑performance Progressive Web App that users will want to install and come back to every day.


Contact

Missing something?

Feel free to request missing tools or give some feedback using our contact form.

Contact Us