Comparing onhashchange and pushState: understanding the differences

In the process of developing an internal dashboard for my website specifically designed for users who are logged in and not meant to be indexed or crawled by search engines. This dashboard primarily functions as a single-page application and does not prioritize having aesthetically pleasing URLs. In case JavaScript is disabled, the dashboard loses its functionality without progressive enhancement.

Essentially, what I require is the capability to navigate between different states within the dashboard using the back/forward buttons, such as different modal windows being open. It's crucial that I can also provide external links directly to a specific state within the dashboard (e.g., indicating if Modal A was open), like sending links via emails to users to access the dashboard.

Given these requirements, should I opt for the traditional hash bangs (#!) method or utilize HTML5 pushState? Considering that pushState would necessitate implementing history.js for compatibility with older browsers. From an architectural standpoint, if the dashboard is accessible through the following URL:

http://example.com/dashboard

wouldn't the process of determining a particular modal state be almost identical whether utilizing pushState or onhashchange? In other terms:

http://example.com/dashboard#!modalA/state1

or

http://example.com/dashboard/modalA/state1

both scenarios would involve parsing client-side (handled by a framework) to determine how to display the current state of the dashboard. Regardless, my backend controller would still map all dashboard URLs to /dashboard/* since the client takes care of handling all state-related matters.

Is there something crucial that I may be overlooking? Although it may not have a significant impact, I am currently using CanJS, which supports both hash events and pushState functionalities.

Note: This question doesn't pertain specifically to Google's hashbang proposal but covers the general use of # signifying onhashchange events.

Answer №1

This insightful article presents a comprehensive overview of the potential challenges associated with hash/hashbang usage, offering a somewhat biased perspective against them, often supported by valid arguments.

You find yourself in a rather fortunate position for several reasons:

  1. You do not need to concern yourself with SEO implications
  2. Your application is intended solely for internal use within your organization

Considering these factors, the choice between utilizing HTML5 History API and hash becomes quite clear contingent upon whether you can mandate browser upgrades among your organization's members to ensure compatibility with HTML5. If such control is feasible, opt for the HTML5 History API. Otherwise, stick with hash. For those desiring HTML5 pushState alongside an HTML4 onhashchange fallback, this alternative option is available, albeit requiring additional effort to ensure seamless functionality for both HTML5 and HTML4 users.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

At runtime, the array inexplicably becomes null

Having recently ventured into the world of Ionic framework development, I have encountered a puzzling issue. At runtime, an array inexplicably gets nulled and I am struggling to pinpoint the root cause. export interface Days { name:string; } @Compon ...

What advantages come from specifically declaring the MIME type when sending an AJAX request?

Have you ever heard of the jQuery library's handy .overrideMimeType() function? It can be quite beneficial to use, but what exactly are the advantages of implementing it? The importance of this function seems to be mentioned often, yet a clear explana ...

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

An error was encountered stating "TypeError: Unable to call function on undefined object while attempting to utilize a JSON object

My current setup involves using D3js with MongoDB and AngularJS to showcase my data. Everything works smoothly until I decide to give my JSON array a name. Suddenly, Angular starts throwing errors at me and I'm left confused as to why. Here is the or ...

I'm noticing a significant slowdown on my webpage due to a high volume of href URLs in my HTML script. What steps can I take to resolve this issue

As a newcomer to scripting, I spent countless hours researching to find a solution but couldn't crack it. I implemented a jquery image search script that functioned smoothly with all components embedded in a single HTML code. However, things took a t ...

The Vue EventBus does not support passing object attributes

Looking for assistance with integrating two Vue single page components. The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this ...

Creating specific data types in Vue.js

Is it possible to create custom prop types with extended validation for Vue.js props? In the following example, we have a prop called background that is currently of type Object. I would like to change this to a custom prop type called Image. The Image pr ...

Is there a way to activate and change the color of a Radio Button when it is clicked?

Is there a way to change the background-color of a clicked Radio Button so it appears highlighted? For example, when the first choice is clicked, I want it to stand out visually. This is the current UI displaying the choices: https://i.stack.imgur.com/a7 ...

Troubleshooting the issue of "Mismatched transaction number*" in MongoDB and Node.js

While trying to add data, I encountered an issue with modifying two schemas using ACID transactions in MongoDB with Node.js. Upon running the program, an error was displayed: (node:171072) UnhandledPromiseRejectionWarning: MongoError: Given transaction n ...

I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

When I focus out of the asmenu class, I attempt to trigger a 'slide up' effect. However, if I select two checkboxes from the child elements within the asmenu class, the focusout event is still triggered. Ideally, I would like the 'slide up& ...

what could be causing the token creation issue in node.js when implementing CSRF protection?

Can you explain why the token is not being created in node js CSRF? I have been using this npm package to generate and verify tokens: https://www.npmjs.com/package/csrf Here is the link to the code sandbox: https://codesandbox.io/s/quizzical-resonance-3y ...

comparing jquery version 1 and jquery version 3 backward-compatible browsers

It has come to my attention that jquery 2.x does not offer support for legacy browsers. If I wish to accommodate those outdated Internet Explorer versions, I must resort to using jquery 1.x. However, I am curious about jquery 3.x. Does it provide support ...

AngularJS: ng-model with dual objects

I am currently working on achieving a double nested object structure, however, my code is generating an array inside an object instead. <div ng-if="newResultUnits()" ng-repeat="set in sets" ng-model="newexercise.sets[$index]"> & ...

Effective ways to transfer data between services and controllers

Is there a way to pass values from services to controllers effectively? Despite researching on stackoverflow, I haven't found a solution that addresses my issue. My goal is to access google spreadsheets using tabletop.js. Interestingly, when I log val ...

Node.js and MongoDB integration for implementing like and dislike buttons

I have been struggling to create a system for liking and disliking posts in my project. The issue I am facing is with the communication between the server and client side. Here is the form I am using: https://i.sstatic.net/IBRAL.png When I click on the li ...

What is the best way to organize data by both name and ranking using _.filter?

The contents of my collection are as follows: Emojis = { ':smile:' : { people: true, ranking: 1 }, ':gring:' : { people: true, ranking: 2 }, ':wink:' : { people: true, ranking: 3 }, ':smirk:' : { people: true ...

Searching for image labels and substituting the path string

Upon each page load, I am faced with the task of implementing a script that scans through the entire page to identify all image src file paths (<img src="/RayRay/thisisianimage.png">) and then add a specific string onto the file paths so they appear ...

Creating tick lines around a solid gauge in Highcharts is a simple process that can enhance the

I am currently working with Highcharts and have a lot of dependencies on it, so I cannot use other plugins. $(function () { var gaugeOptions = { 'chart': { 'type': 'solidgauge' }, &a ...

Transforming JSON in Node.js based on JSON key

I am having trouble transforming the JSON result below into a filtered format. const result = [ { id: 'e7a51e2a-384c-41ea-960c-bcd00c797629', type: 'Interstitial (320x480)', country: 'ABC', enabled: true, ...

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...