Skip to content

Conversation

@addyosmani
Copy link
Collaborator

Video demo: https://www.youtube.com/watch?v=-HwAqwH2qq4

What is this?

Offline Mode introduces a new option to the Settings pane that provides full, reliable caching support for content flowing through the React HN app. It uses the Service Worker Cache API as a backing store and conditionally switches to the Firebase REST API if offline is enabled, otherwise uses the real-time API as we normally do today. When this mode is enabled, we also switch to local storage over session storage to persist 'sessions' loaded from the user's homescreen.

How does it work?

Previous efforts to add offline caching for our content have assumed we would be working against the full, real-time Firebase API (which, for HN means updates flowing in every few seconds). This was complex to manage and quite susceptible to slowness, IDB thrashing (even from a Web Worker) and didn't give us what we needed on mobile.

Instead, I've introduced HNServiceRest. This special-cases Offline Mode so that it switches to using the Firebase REST API (which just gives you a bunch of .json URLs for content entries). This is trivial for us to now cache at runtime using sw-toolbox (which we've already been including).

What browsers has this been tested in?

Offline Mode has been tested as working in both Chrome, Opera and Firefox. In browsers without support for Service Worker (e.g Safari stable), it will still work the same way as it does today. I had considered hiding the Offline Mode option if SW wasn't supported, but might think about doing this as a follow-up.

Does this negatively impact the default experience in any way?

As Offline Mode needs to be manually switched on, the default experience for all users will still be real-time data from the Firebase HN endpoint. As long as I've got the casing right, this feature should be considered an enhancement.

cc @insin @NekR

@addyosmani
Copy link
Collaborator Author

Landing this mode. I'm going to work through comments on #35 next and will need to do some rebasing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants