Skip to content

feat: add PWA web manifest (without service worker) #1181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
userquin wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

feat: add PWA web manifest (without service worker) #1181

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
37dcddb
feat: add PWA web manifest (without service worker)
userquin Feb 7, 2026
abe9cea
chore: add service worker
userquin Feb 8, 2026
2b9ac50
chore: store also api calls to cache readme
userquin Feb 8, 2026
03daa2d
chore: add build local pwa with sw source and logs
userquin Feb 8, 2026
f9cee47
chore: add service-worker to knip entry
userquin Feb 8, 2026
b73b57d
chore: add workbox-build to knip ignore deps
userquin Feb 8, 2026
ba1f96c
Merge branch 'main' into feat-enable-pwa-manifest
userquin Feb 8, 2026
d7e9e78
chore: update denylist and runtime caching
userquin Feb 8, 2026
4d02840
chore: disable install prompt
userquin Feb 8, 2026
54ad77b
chore: don't intercept search?
userquin Feb 8, 2026
b6f5ade
chore: escape ?
userquin Feb 8, 2026
68f2597
resolve conflicts with main
alexdln Mar 18, 2026
0d1ae52
Merge branch 'main' into feat-enable-pwa-manifest
alexdln Mar 18, 2026
d86780d
chore: restore service worker entry in knip
alexdln Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions nuxt.config.ts
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@okineadev okineadev Feb 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Screenshot_20260208_222757_Lawnchair.png

Copy link
Copy Markdown
Member Author

@userquin userquin Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

@alexdln alexdln Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need some specific designs - let me know

Copy link
Copy Markdown
Member Author

@userquin userquin Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member Author

@userquin userquin Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

@alexdln alexdln Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

Copy link
Copy Markdown
Member Author

@userquin userquin Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,13 @@ export default defineNuxtConfig({
'/_v/view': { proxy: 'https://npmx.dev/_vercel/insights/view' },
'/_v/event': { proxy: 'https://npmx.dev/_vercel/insights/event' },
'/_v/session': { proxy: 'https://npmx.dev/_vercel/insights/session' },
// PWA manifest
'/manifest.webmanifest': {
headers: {
'Content-Type': 'application/manifest+json',
'Cache-Control': 'public, max-age=0, must-revalidate',
Comment thread
shuuji3 marked this conversation as resolved.
},
},
},

experimental: {
Expand Down Expand Up @@ -193,10 +200,13 @@ export default defineNuxtConfig({
},

pwa: {
// Disable service worker
disable: true,
pwaAssets: {
config: false,
injectRegister: false,
client: {
// Disable service worker
registerPlugin: false,
},
devOptions: {
enabled: true,
},
manifest: {
name: 'npmx',
Expand Down
1 change: 1 addition & 0 deletions server/middleware/canonical-redirects.global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const pages = [
'/privacy',
'/search',
'/settings',
'/manifest.webmanifest',
]

const cacheControl = 's-maxage=3600, stale-while-revalidate=36000'
Expand Down
Loading