feat: add PWA web manifest (without service worker)

[userquin]

I need to resolve a permanent redirection when requesting the webmanifest on local dev server or build + preview, works in the preview.

@danielroe wants to add the service worker, we'll need to:

• review manifest options (adding categories)
• review denylist and runtime caching
• review ui logic to handle offline
• prerender search page: this page on page refresh when offline will redirect to home page with the query param search
• change PR title (I cannot change it, missing edit button)

NOTE: open pr preview in private browsing

resolves #1124

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 18, 2026 11:31am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 11:31am
npmx-lunaria	Ignored		Mar 18, 2026 11:31am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[okineadev]

There is a problem with the icon, it is square, but on other shapes of icons (for example, round ones), the edges are white, this needs to be fixed.

It would also be great to add a monochrome version of the icon to have this icon themed as well.

[userquin]

We need to change the svg icons again, will be fixed once the service worker fixed (search page)

[alexdln]

If you need some specific designs - let me know

[userquin]

I guess we only need to add some padding at pwa assets generator configuration...

[userquin]

Right now we cannot check PWA icons at devtools, we'll need to use external tools: https://issues.chromium.org/issues/492211941

[alexdln]

https://github.com/npmx-dev/npmx.dev/blob/77b9103a6b1ec172706a6438c92e7328dabfafce/public/pwa-64x64.png

How to add them and where? The icon itself looks fine. I can make it circle or just "./" with a transparent background, but I don't understand what the problem is...

[userquin]

The screenshot is the PWA icons when installed at android device, android "desktop" icon, we can use https://maskable.app/ to check the paddings.

The icon comes from the preset (will be generated when running the pwa icons script here https://github.com/npmx-dev/npmx.dev/blob/main/package.json#L31)

For example, the paddings can be added via custom preset (here the logic https://github.com/elk-zone/elk/blob/main/scripts/generate-pwa-icons.ts#L55-L80 , I added the manual preset al elk.zone then extracted to pwa assets generarator package) => we can add some padding to the svg or we can add the padding when generating the png files.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

• release

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0c9720ed-4fc6-448d-bb6f-0116a18b332b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}