feat: adds pwa in production mode

[amir20]

Fixes #3688

[stasadance]

Did a pull but I don't see a <link rel="manifest" href="manifest.json" /> or similar file and it doesn't seem to act as a PWA

[amir20]

I only installed the service worker because the URLs can change. I wasn't aware of a manifest.json. Let me see if that's something I can do.

[amir20]

Ok that was a little more tricky. I added a manifest now. Wait till push is done and try again...

Although, I am pretty sure with custom base something would break because the manifest doesn't know about it.

[amir20]

@stasadance hmmmm it seems like the service worker breaks auth as the assets are cached. Do you need service worker? Can I do JUST manifest?

[stasadance]

@stasadance hmmmm it seems like the service worker breaks auth as the assets are cached. Do you need service worker? Can I do JUST manifest?

Manifest alone is fine.

[stasadance]

Manifest works pretty well on my device. Adding the website to my home screen in iOS safari now results in an app like feel where it opens Dozzle in full screen instead of in the browser.

Small thing I noticed.. The site doesn't adjust for the phone's insets in standalone display mode so it looks a bit weird. Screenshot for reference.

I think this can be fixed with 2 changes:

• Something like <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
• Using CSS safe area variables in the style for some padding on mobile. safe-area-inset-bottom

Let me know if you would like me to work on these, I'm not familiar with local dev yet but I can set it up.

[amir20]

That would be great if you can. I am not too familiar with PWA. You should be able to do make tools and finally make dev.

I think Vite PWA does a lot more than needed. Perhaps just creating a manifest is good enough. Thoughts?

Let me know if you have a hard time getting local dev to work. If you are on a Mac (which is what I have) it should be ok.

[stasadance]

That would be great if you can. I am not too familiar with PWA. You should be able to do make tools and finally make dev.

I think Vite PWA does a lot more than needed. Perhaps just creating a manifest is good enough. Thoughts?

Let me know if you have a hard time getting local dev to work. If you are on a Mac (which is what I have) it should be ok.

Manifest alone sounds good enough to me. I'll work on a duplicate PR with some CSS.

[amir20]

I pushed some changes to remove vite pwa but keep manifest.

I have never heard of safe-area-inset-bottom 😂

I'll wait to see what you cook up.

[amir20]

Going to merge this and release since there are some bugs pending.