Wednesday, September 4, 2019

Back and forward navigation

Handling browser back and forward navigation has historically been difficult for web applications. [1] What should they do when the user activates the back and forward buttons?

With plain old static web pages, the answer is easy: just show the page which is back or forward in the browser’s navigation history, and that’s it. The browser will do the work for you, in fact, and retrieve the content from cache or again from the server.

But with pages that have some dynamic behavior, or even more so with full-fledged web applications, the answer is more complicated.

One philosophy which is consistent with what happens with static web pages consists in showing the app as it was when you left it. [2] Certainly, you don’t want to see a page or form which is completely out of date and missing the data you just captured, for example. And unfortunately, that latter behavior is still the default with most web browsers.

To be fair, web browsers have started making things easier to web applications when the circumstances are right, under the name “bfcache” (for “back/forward cache”). Firefox and Safari have had this feature for a while, and soon Chrome will have it too. This is great for users and works in many cases, but there are still situations where the browser won’t be able to restore the application (for example if the state has been removed from cache to save memory).

Until that kind of feature is available perfectly everywhere, your application has to do some work to behave as the user would expect it. Specifically, the web application must realize that the user just landed on it with back or forward navigation, and restore its content as needed. In the case of Orbeon Forms, this means making a call to the server to retrieve some state that allow the form to update itself. And Orbeon Forms has done this work since the very beginning, even before browsers had APIs to help with that. [3]

Now, with Orbeon Forms 2019.1, we have made improvements to the reliability of this feature by using the web browser's history API. Orbeon Forms stores some small state associated with the page, and upon back/forward, performs that call to the server to restore everything as it was before navigating away. This is made possible since Orbeon Forms’s UI software is based on computing differences to apply to the user interface when changes happen, such as changing field values, adding repetitions to a grid, and or hiding a section.

The bottom line is that with Orbeon Forms, you can expect that if you use the back and forward buttons, the data you just entered is not lost. And we have just made that more reliable.

  1. In fact, many modern web apps still don’t handle browser navigation in a reasonable way, and that’s if they care at all to address the question.  ↩

  2. Possibly with some refresh of data for applications where it makes sense.  ↩

  3. Orbeon Forms used hidden form fields for that purpose until version 2018.2.  ↩

No comments:

Post a Comment