Skip to content
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.

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

feat: Added offline availability with service workers #405

Merged
merged 3 commits into from
Aug 31, 2024

Conversation

Resaki1
Copy link
Contributor

@Resaki1 Resaki1 commented Aug 31, 2024

Closing issues:

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.

  • I´e created all necessary migrations?
  • The format is correct (pnpm format:check, if invalid pnpm format:fix)
  • No build errors (pnpm build)
  • I´ve tested the implemented function by my own
  • 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:

  1. All requests regarding the queue are set to NetworkOnly. This means, they are never served from cache, as that would create bugs.
  2. 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.

CocktailManagerOffline.mov

Copy link
Owner

@jo-gross jo-gross left a comment

Choose a reason for hiding this comment

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

Looks really great and improves the usability a lot. Even though in firefox its not working as great as in chrome, it makes a huge upgrade. I´m greatful for any more contribution, that helps a lot!

In the long term future it would be awesome to make the "queue" and "track" fuctionality also offline available and push the results when reconnecting.

@jo-gross jo-gross merged commit 43798b3 into jo-gross:main Aug 31, 2024
4 checks passed
jg-semantic-release-bot bot pushed a commit that referenced this pull request Sep 11, 2024
# [1.9.0](v1.8.2...v1.9.0) (2024-09-11)

### Bug Fixes

* Form validation and error message handling ([cdda452](cdda452))
* Routing when updating an cocktail from the search view ([a5abba8](a5abba8))

### Features

* added cocktail ratings ([#415](#415)) ([850646a](850646a))
* added image crop option when selecting images (cocktail, ingredient, glass and garnish) ([#413](#413)) ([d5ec542](d5ec542))
* Added name similarity check at ingredient-, cocktail-, garnish- and glassform ([#403](#403)) ([0183a0a](0183a0a))
* Added notes to cocktails, redesigned the cocktail info popup field, general popup behavior improved ([#402](#402)) ([a57aeee](a57aeee))
* Added offline availability with service workers ([#405](#405)) by [@Resaki1](https://github.com/resaki1) ([43798b3](43798b3))
* Added option to make cocktail ingredients and steps optional ([#404](#404)) ([83e7f8c](83e7f8c))
@jg-semantic-release-bot
Copy link

🎉 This PR is included in version 1.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: Offline availability
2 participants