Instant Answers and the back button
The DDG community has been hard at work building some awesome Instant Answers. It's been great to see things like People in Space
and Bitcoin Address lookup
. As we were using more of these Instant Answers, it became clear we had an annoying problem: the back button.
The back button problem was this: you would open an Instant Answer, click through to open one of the items and navigate to it on a third-party site. Then you would click the back button to return to the search results. When clicked back to DuckDuckGo, you may have gotten an inconsistent experience. A different Instant Answer might have opened. The grid of images might have gone from expanded to collapsed. The carousel of tiles would be in a different spot. It was incredibly frustrating!
We needed a way to restore the state of the page when you leave to go to another site then come back. We couldn't do anything involving sessions or server-side state because that would involve tracking. We wanted something that could happen totally in the browser. Ultimately we settled on implementing a scheme of URL querystring parameters. These parameters can be modified by the browser so that they always describe the current state of the Instant Answer area. Things like which Instant Answer is open, which item in the Instant Answer is selected, etc. When the page loads and it sees these new parameters the correct state can be restored immediately.
To illustrate how it works, try a search for 'more cowbell':
By default it will show you the About answer with information from Wikipedia. But if you click on Videos, you will see 'ia=videos' is added to the URL. And if you refresh the page it will open the Video answer by default:
From there if you click the grid icon in the upper right of the Videos answer, it will expand into grid view and add 'iax=1' to the URL:
Finally if you click one of the specific videos, it will add 'iai=<id>', like this:
Because the state of the page can be controlled by URL parameters you can also more easily share specific items within an Instant Answer. So you can send that Will Ferrell video to your friends without forcing them to go to YouTube!
For the technically curious, we implemented this using HTML5 history.replaceState() functionality.
1. Because we're using newer HTML5 functionality to achieve this, it currently isn't supported in IE8/IE9.
2. If you have the DDG POST setting enabled, then this functionality is disabled (since adding URL parameters would defeat the purpose of that setting).
Hopefully you've found the back button less annoying lately and if you have any questions or feedback, please let us know!