Add PWA using django-pwa

[burgerga]

Fixes #43

Followed the guide at https://github.com/silviolleite/django-pwa to add PWA support to VoucherVault. I think the changes are fairly minimal:

• Created additional icons that will be used for the PWAs (see https://github.com/elegantapp/pwa-asset-generator/ and https://web.dev/articles/maskable-icon)
  • To work around partial PWA implementation by Apple, you will need to include about 50 additional splash screen images in different sizes (see https://github.com/elegantapp/pwa-asset-generator/). I choose not to do this to avoid the maintenance overhead, django-pwa is fine with this and will use the existing icons for Apple as well.
• I used the service worker template from django pwa and adapted it to the correct static assets
• Have a look at the PWA variables, I guessed some values like description and theme color, please change these to your liking.

Tested on my server, seems to work perfectly!
Some screenshots:
Desktop browser:

Android install and app switcher after install:

Hope to hear your thoughts!

[l4rm4nd]

Hi @burgerga ,

many thanks for this great PR!

The PWA installation worked great so for. Though, without caching, the PWA itself is not unlocking its full potential. Therefore, I've tinkered with offline caching and it seems to work fine so far.

May have a look and play with it. In my case, the most important data and filters are properly cached. So offline use of the PWA works fine.

Still unsure about cache invalidation. Shall we prune cached data at some time or keep it unlimited? The cache will basically bypass authentication and display the vouchers and giftcards as is. Just creation/modifying would'nt be possible when being offline.

[l4rm4nd]

Maybe a manual cache button with a maximum of 72h cache age would be better. Then the user can control when to cache and cached data is pruned automatically at one point.

[l4rm4nd]

New release v1.25.0 supports PWA with manually offline caching.

Many thanks for the PR. Smooth ride to implement the additional caching for offline use.

https://github.com/l4rm4nd/VoucherVault/wiki/04-%E2%80%90-Application-Usage#caching

[burgerga]

Woah! I was fine with an online-only PWA, but this is very cool!
I am running into some (small) issues though:

• Not PWA related: Dark mode looks good, but in light mode the items show with a dark background and are not readable anymore
• The Offline functionality works great on my Android, super smooth! Only the search query field doesn't work and using it sends me to the offline page. If this is tricky to fix, maybe show it greyed out or something so people don't get confused
• Weirdly enough on the Desktop (tried with Chrome and Safari) I do not get offline mode to work properly (I disable Wifi and reload). First I thought it was not working, but it takes 30 seconds to load the page, and then another 30 seconds to show one item. So I did some digging, I think this is because the app uses a network first cache, so it first tries the network, and if that fails (I get an ERR_NAME_NOT_RESOLVED in the Network tab) only then it uses the cache. I don't know if there is an easy fix for this (I was hoping the Network request would fail faster); you can use a cache-first strategy (see https://felixgerschau.com/how-to-make-your-react-app-a-progressive-web-app-pwa/) but that also feels a bit wrong to me... But that works, because if I in DevTools > Application set the service worker to offline (checkbox) then it immediately uses the cache and everything works.

[l4rm4nd]

Not PWA related: Dark mode looks good, but in light mode the items show with a dark background and are not readable anymore

Will have a look. Personally, I dislike the light mode and one can tell. It needs some proper rework haha.

The Offline functionality works great on my Android, super smooth! Only the search query field doesn't work and using it sends me to the offline page. If this is tricky to fix, maybe show it greyed out or something so people don't get confused

Yeah the search cannot be cached as it is a server-side search. We could disable it entirely to not confuse people

Weirdly enough on the Desktop (tried with Chrome and Safari) I do not get offline mode to work properly (I disable Wifi and reload). First I thought it was not working, but it takes 30 seconds to load the page, and then another 30 seconds to show one item. So I did some digging, I think this is because the app uses a network first cache, so it first tries the network, and if that fails (I get an ERR_NAME_NOT_RESOLVED in the Network tab) only then it uses the cache. I don't know if there is an easy fix for this

You identified it correctly. It always tries the network first and then cache. Due to this, it may be that it feels somewhat sluggish. The browser or JS needs to detect that we are offline. Sometimes faster, sometimes slower. Will tinker with it. Guess it needs some more finetuning.

[burgerga]

(but I don't think I need vouchervault on my laptop in an offline situation. The offline on my phone is quite useful (quickly caching everything before you go shopping), and there it works perfectly :) )

EDIT: And yes, I also have almost everything in Dark mode :D

[burgerga]

By the way, a potential solution for the authentication bypass with caching could be biometric authentication using webauthn which should work offline as well. Then you can just cache everything, and use longer cache times. I don't have experience with this though but came across it while thinking about caching vs authentication.

[l4rm4nd]

Not PWA related: Dark mode looks good, but in light mode the items show with a dark background and are not readable anymore

Theme switching works again. Light theme unchanged though.

No interest atm to make it better haha.

The Offline functionality works great on my Android, super smooth!

I've played around a bit and improved the logic. Now it seems to work properly. Even if you re-open the PWA being offline.

By the way, a potential solution for the authentication bypass with caching could be biometric authentication using webauthn which should work offline as well. Then you can just cache everything, and use longer cache times. I don't have experience with this though but came across it while thinking about caching vs authentication.

Passkeys / webauthn would work too but unfortunately the support for Django CMS is limited. I've already opted for the django-mozilla-oidc to support SSO and that's likely it. As offline mode and caching seems to work for now, I'll neglect this idea atm.

May upgrade to the latest release.

I recommend:

• purging old caches via the purge cache button in VoucherVault
• CTRL+SHIFT+F5 on the browser in general
• removing old installed PWAs

and then try PWA + cache creation another time :)