How do you deal with legacy or incompatible browsers that do not support Ext JS history?

1 What is Ext JS history?

Ext JS history is a feature that allows you to track and manipulate the application state using the browser history and the URL hash. It works by creating a hidden iframe that stores the hash value and triggers a change event when it changes. This way, you can register listeners for the Ext.History singleton and respond to the state changes in your application logic. You can also use the Ext.History.add method to push new states to the history stack and update the URL hash accordingly.

2 Why is it important?

Ext JS history is important for several reasons. First, it improves the usability and accessibility of your application, as users can use the browser buttons or the URL hash to navigate through the application state. Second, it enhances the SEO and bookmarking of your application, as each state has a unique URL that can be indexed and shared. Third, it enables deep linking and state restoration, as users can directly access a specific state of your application or resume from where they left off.

3 What are the challenges?

The main challenge of Ext JS history is that it depends on the browser support for the hashchange event and the iframe trick. Unfortunately, not all browsers support these features, especially older ones like IE6 and IE7, or incompatible ones like Opera Mini. In these browsers, Ext JS history will not work as expected, and users will not be able to use the back and forward buttons or the URL hash to navigate through the application state. This can result in a frustrating and confusing user experience, as well as a loss of functionality and data.

4 How to detect support?

One way to deal with legacy or incompatible browsers that do not support Ext JS history is to detect their support and provide alternative solutions. You can use the Ext.History.hasListeners property to check if the browser supports the hashchange event and the iframe trick. If this property is false, it means that Ext JS history is not supported and you need to implement a fallback mechanism. For example, you can use cookies, local storage, or server-side sessions to store and retrieve the application state.

5 How to provide feedback?

Another way to deal with legacy or incompatible browsers that do not support Ext JS history is to provide feedback and guidance to the users. You can use the Ext.History.ready property to check if the Ext.History singleton is initialized and ready to use. If this property is false, it means that Ext JS history is not ready and you need to inform the users. For example, you can display a message, a warning, or a modal dialog that explains the limitations of their browser and suggests them to upgrade or switch to a compatible one.

6 How to test and debug?

The last way to deal with legacy or incompatible browsers that do not support Ext JS history is to test and debug your application in different browsers and scenarios. You can use tools like BrowserStack, Sauce Labs, or LambdaTest to run your application in various browsers and devices and check its behavior and performance. You can also use tools like Firebug, Chrome DevTools, or IE Developer Tools to inspect and modify the URL hash, the iframe, and the Ext.History singleton and see how they affect your application state.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?