Introducing pwa-check: An Automated PWA Health Check Tool

The modern web, tested and explained in plain English

Photo by John on Unsplash

Modern Web Weekly #76

Is your web app actually ready to be installed, work offline, and behave like a real PWA?

Let pwa-check answer that for you.

I created pwa-check to help you make sure your PWA looks, feels, and behaves like a real app.

You provide it the URL of the PWA you want to test and pwa-check scans the HTML, manifest, scripts, and service worker, then points straight at the gaps that will hurt installability or offline behavior.

Install it:

npm i @pwa-today/pwa-check

then run it using npx:

npx pwa-check https://whatpwacando.today

or, if you install it globally, directly:

pwa-check https://whatpwacando.today

It then does a thorough audit of your PWA to make sure it:

• meets the installability criteria

• provides icons in all recommended sizes

• provides screenshots with correct configuration and sizes for the enhanced installation dialog

• provides other recommended members in its manifest, like share_target, file_handlers, orientation, handle_links and others

• has a correct viewport meta tag

• registers a service worker that caches assets and has the required event handlers

• provides iOS and iPadOS startup images

• follows other best practices

You can use pwa-check as a standalone CLI tool or as part of your CI/CD pipeline. It returns a non-zero exit code on any failures, or you can make it fail on any warning by passing the —-fail-on-warn flag:

pwa-check https://whatpwacando.today --fail-on-warn

Use —-json for JSON output and —-timeout <ms> to put a timeout on each network request (like fetching icons and screenshots):

pwa-check https://whatpwacando.today --json --timeout 500

I intend to add more checks in the future so give it a spin and let me know what you think or if it’s still missing something.

Check the pwa-check repo on GitHub.

---

Safari Tech Preview 247 now ships an MCP server

If you’re using AI in your coding workflow (and who doesn’t these days?), you can now ask your agent to run and debug web apps in Safari using the Safari MCP server.

The server is available in Safari Tech Preview 247 and can be enabled through Develop > Developer Settings > Allow remote automation and external agents.

If you use Codex, you can use the following command to add the Safari MCP server:

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

For Claude, use:

claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

For other agents, add the following to mcp.json or config.json:

"safari-mcp-stp": {
  "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
  "args": ["--mcp"] 
}

After this, you can prompt your agent to run your web app in Safari. For a list of currently available commands, check the WebKit Blog article.

---

New PWA installation dialog in Chrome 152

Chrome 152 ships with some interesting changes to the web app installation dialog.

The first dialog now shows a “Learn More” button that links to a Google support page that explains PWAs and a “Next” button:

When you click the “Next” button, a second dialog is shown that illustrates where the web app will be installed (Chrome Canary Apps in this case), which is more aligned with the dialog that is shown when a native app is installed on macOS:

After the app is installed, a success dialog is displayed that contains an “Open tab in app” button to directly open the currently open browser tab in the installed PWA:

Oh, and there’s more good stuff in Chrome 152…

---

PWA notification attribution on macOS

If you have tested push notifications in an installed PWA on macOS, you probably noticed that the notifications contained a Chrome logo instead of the logo of the PWA:

Push notification on macOS, attributed to Chrome Canary instead of PWA

Starting in Chrome 152 on macOS, push notifications will be attributed to the PWA itself instead of Chrome. This means that if you include an icon in the push notification options, this will be shown instead of the Chrome logo:

Push notification on macOS, attributed to PWA

To set an icon, pass it in the icon key in the options for showNotification() in the push event handler:

self.addEventListener('push', e => {
  e.waitUntil((async () => {
    const options = {
      body: 'Hi, this is a notification',
      icon: '/src/img/icons/icon-512x512.png',
      
      // other options
    };

    await self.registration.showNotification(title, options);

  })());
});

This does introduce two behavioral changes on macOS for installed PWAs:

• the requireInteraction option for showNotification will no longer be supported, as on macOS, this is a per-app setting controlled by the user rather than a per-notification setting controlled by the app

• the Badging API will now require separate permission

For Chrome 152, you will need to use Chrome Canary at the time of writing, and you need to enable the Mac PWA notification attribution flag at chrome://flags/#enable-mac-pwas-notification-attribution

When Chrome 152 is released, this will be enabled by default.

---

---

Do you need help with your web app?

Book a 1-on-1 call with me and I will do my absolute best to answer all your questions and solve your problems.

€100 for one hour, money-back guarantee if you’re not satisfied.

---