Feature: Don't trigger requests while offline

[daun]

Describe the problem 🧐

Currently, swup will trigger a request whether the device is online or not. This will lead to a timeout, forcing a redirect and a generic browser error. There was also a recent discussion mentioning this scenario.

Describe the propsed solution 😎

Only fetch new pages while online, and trigger a hook fetch:offline if offline. The consumers can then create their own notification or UI around an offline warning, e.g. with a Retry button or timer. We can use navigator.onLine for the check which is widely available and falls back to the previous behavior.

What about cached pages? — I'd argue that the request should go through if the new page is already cached. If it was cached, chances are any other assets on that page are already cached by the browser as well. Then again, preloaded pages end up in the cache as well, without ever having visited them.

What about proper PWAs? — Some sites may have implemented offline capabilities on their own using a service worker, in which case we'd be undoing all their work by refusing to make requests. We can make this optional by merely wrapping the fetch in a hook so users can replace it and implement their own behavior only if it makes sense.

Alternatives considered 🤔

This is currently impossible to implement in user land as we decided against making visits abortable.

How important is this feature to you? 🧭

Nice to have

Checked all these? 📚

• [X] I have read and searched the official docs
• [X] I have checked discussions and existing issues for related problems
• [X] I agree to follow this project's Code of Conduct
• [X] I have provided all necessary information to the best of my knowledge

[hirasso]

How about doing the onLine detection after a little delay? I imagine a service worker in a pwa would respond immediately, so we wouldn't undo their work.

[daun]

This might actually make a neat plugin, e.g. Offline Plugin or PWA Plugin. I haven't delved too much into making MPAs available offline, but this could be a fun little exercise to tinker with service workers and browser caches 🤖 There's also Workbox and especially the workbox routing module that we could wrap and integrate with swup's cache and preloading capabilities.

[hirasso]

Great idea to create a plugin for that! I have exactly the same level of experience with PWAs/offline (none) and would also like the chance to learn more about it.

[daun]

I've created a repo and started some very early exploratory work over at swup/offline-plugin.