Solvedgutenberg Improve behaviour when saving content while offline

Issue Overview

As Gutenberg is a JavaScript driven application that doesn't rely on traditional form submission like the current editor does, there's an opportunity to improve the end user experience when the client experiences connectivity problems or goes offline completely.

For example, if the saving action fails in any way, Gutenberg displays an error message that states Updating failed. It would be great if Gutenberg could inspect the navigator.online property at this point (or earlier), and if it returns false then display a more appropriate error message to the user, for example You do not have an internet connection. Saving and previewing is not available offline.

A further enhancement would be to fully save the post content in the browser in the same way that the current editor does, to avoid data loss in case the user decides to close their browser window. This happens in the current editor, but not in Gutenberg. I'm not sure if there's an existing ticket for that.

20 Answers

✔️Accepted Answer

It would indeed be a great improvement to show a warning when offline and to store the changes in localStorage to restore later.

In addition to this, I think we also now have the opportunity to go much father than having parity with the classic editor. With service workers we could provide an entirely offline authoring experience:

  • The service worker can cache the assets required by the editor (i.e. the old Turbo mode: GoogleChromeLabs/pwa-wp#34) as well as the HTML required to render the edit post screen (minus legacy metaboxes).
  • The service worker can cache the REST API responses for any number of posts and media to allow them to be accessible for editing when offline. To access the list of offline-editable posts, there would probably need to be an REST API-driven post list table to which could leverage what @rmccue prototyped in new-list-tables.
  • If a user goes offline while editing and they attempt to save, the saved post can be scheduled for a background sync to automatically send back to the server when the user re-connects, even if they don't go back to the post edit screen they were on. The Workbox has a background sync API that looks well suited for this.

With this in place, if the user hits “Save Draft” when offline then a notice could appear as:

You do not have an internet connection. Your changes will be synced once back online. Previewing and some editing is not available when offline.

Enabling offline editing in Gutenberg is one of the key use cases we've identified for service workers in core for the PWA feature plugin. It would be great to identify what Gutenberg would need from service workers to enable offline usage so that the feature plugin can be built to facilitate it.

More Issues: