Closing issues:

Closes: #217

Before you mark this PR as ready, please check the following points

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

[x] I´e created all necessary migrations?
[x] The format is correct (pnpm format:check, if invalid pnpm format:fix)
[x] No build errors (pnpm build)
[x] I´ve tested the implemented function by my own
[x] Ensure the pr title fits the conventional commit standard

Describe your work, what changed

Added the next-pwa plugin, which auto generates a service worker based on a config. This service worker can cache HTTP requests, which allows the site to be responsive even with slow or no network connection (as long as the requested parts of the site have been cached).

Additionally, I had a bug where visiting the site to create a cocktail wasn't possible when I didn't have any cocktails in the database. Was a simple fix.

Affected sites (please check during review):

all

Further comments

Explanation of the runtime caching config:

All requests regarding the queue are set to NetworkOnly. This means, they are never served from cache, as that would create bugs.
All other GET requests are set to StaleWhileRevalidate. This means, the service worker will always first check the cache and serve the response from there, if available. At the same time, the service worker will check the network (if available). If the data received over the network is newer than from cache, the data will be updated on the client and in the cache. Cache is kept valid for 14 days.

Queue requests are never served from cache, because the client always needs the newest information from the server. I couldn't find other cases where GET requests should never be cached, if you can think of one please let me know.
All other request types (POST etc.) are obviously not cached. In a next step, we could disable buttons that trigger these requests while the client has no connection to the server (and maybe show some kind of 'offline' indicator)
This is the first step towards a PWA, but additional steps are required (mainly a manifest.json and some screenshots). I'd be happy to do that in another PR later.

Demo

Here is a video showing the functionality. First, some parts of the site are visited with normal network connection. These are automatically cached. Then, the network connection is turned off, and the cached parts of the site still work fine. Things like the queue or adding cocktails to the statistics obviously don't work while offline.

jo-gross / Cocktail-Manager