Is it possible to use service worker cache with unpoly or htmx?

Question

I'm a quite frustrated programmer for the usage of single page applications and I'm trying to find equally good alternatives using less technologies.

One could be unpoly.

Unpoly has a very efficient caching system but it has no possibility to persist that cache in the browser. So when I reopen the site after having browsed even just a few seconds before, I have no data in the cache and I have to wait (again) for the backend with its latencies and hope that the internet doesn't go away in those situations.

Example:

1. the user navigates with the mobile phone, opens modals, makes changes and the item lists are updated, good

2. the user leaves work and takes the ferry to go home

3. while waiting to arrive, he reopens the website/app and looks for the data he had seen a minute before and - since there is no internet on the ferry (or under the tunnel or in the countryside) (and there won't be for the next few minutes) he does not see nothing because that cache is not persisted in the browser he used a few minutes before

4. the user is angry

So I was thinking about integrating in this workflow the service worker cache but maybe something is not clear in my mind.

Do you think the following steps will work?

And could they also work using htmx?

1. ONLINE: GET /list (v1)

2. SW CACHE EMPTY: /list cached (v1)

3. UNPOLY gets /list (v1)

4. CLOSE BROWSER

5. Someone updates /list (to v2)

6. ONLINE: GET /list (v1)

7. SW CACHE FULLFILLED FROM BEFORE gives unpoly /list (v1)

8. UNPOLY gets /list (v1) from SW immediately fullfilling it's cache

9. UNPOLY ask server (through SW) for updates on /list (v1)

10. SW cache /list (v2)

11. UNPOLY re-render for /list (v2)

12. CLOSE BROWSER

13. OFFLINE: GET /list (v2) comes from SW cache (maybe with some indicator that is stale content)

What do you think?

Answer 1

Using a service worker to implement an offline cache is certainly possible. (See, for example, MDN's Making PWAs work offline with Service workers.) Please note that Unpoly/htmx rely on standard web interfaces like HTML/HTTP, so this is not specific to these frameworks.

If you want to be able to automatically update the page for changed data, the service worker must be able to notify the web page, and the web page must listen to these notifications. (Unpoly supports polling, htmx also supports SSE.)

The service worker essentially implements your server API (or a read-only subset of the API, if you're only doing caching). So it would make sense (and be useful) for the actual web server to implement the same notification mechanism.