server: fix blurry PWA icon #465
Conversation
|
Thanks for this fix, this has been bugging me for a while. I see that chrome is complaining that a png, svg, or webp icons isn't specified in the manifest on my server's version (0.63.3). I'm not super familiar with this project, but I made the same changes as this commit on my instance and it worked correctly. |
There was a problem hiding this comment.
Testing these changes locally and they work as expected. Not 100% sure if this is the implementation the maintainers would want to go with. I could see an argument around setting up a more generic express route that handles any files put into the public folder, rather than an route specific to icon.png
| @@ -47,6 +47,7 @@ app.use(cookieParser()); | |||
| app.use(express.static(path.join(scriptDir, 'public/root'))); | |||
| app.use(`/manifest.webmanifest`, express.static(path.join(scriptDir, 'public/manifest.webmanifest'))); | |||
| app.use(`/robots.txt`, express.static(path.join(scriptDir, 'public/robots.txt'))); | |||
| app.use(`/icon.png`, express.static(path.join(scriptDir, 'public/icon.png'))); | |||
There was a problem hiding this comment.
You should probably use the png that already exists in the images folder instead of replicating the image in the public folder. https://github.com/TriliumNext/Notes/blob/develop/images/app-icons/png/512x512.png
There was a problem hiding this comment.
Good find. I did a quick find and didn't see it, so I generated my own. But this is so much better.
There was a problem hiding this comment.
Ah I see, this file is only on the develop branch and not the last release or master branch.
There was a problem hiding this comment.
Testing these changes locally and they work as expected. Not 100% sure if this is the implementation the maintainers would want to go with. I could see an argument around setting up a more generic express route that handles any files put into the public folder, rather than an route specific to
icon.png
Yeah, I'll let the maintainers decide what the best way to serve that asset is. For now, I'll just get rid of the separate file.
| @@ -47,6 +47,7 @@ app.use(cookieParser()); | |||
| app.use(express.static(path.join(scriptDir, 'public/root'))); | |||
| app.use(`/manifest.webmanifest`, express.static(path.join(scriptDir, 'public/manifest.webmanifest'))); | |||
| app.use(`/robots.txt`, express.static(path.join(scriptDir, 'public/robots.txt'))); | |||
| app.use(`/icon.png`, express.static(path.join(scriptDir, 'public/icon.png'))); | |||
There was a problem hiding this comment.
Good find. I did a quick find and didn't see it, so I generated my own. But this is so much better.
I tried creating the server version as a PWA with Chrome on Android, but the icon is very blurry. My solution is to create a PNG of the icon and make the
manifest.webmanifestuse that instead offavicon.ico, which seems to have fixed the problem.