In my Electron app I have a webview. If I click a link (e.g. on Google) and then move back, the link turns not purple, like in normal browsers.
Can I activate this behaviour in Electron too? Or do it programmatically, if I would store the browsing history by myself?
I guess it is somehow connected that the history support in Electron is not yet the best?
Would this maybe possible with Muon fork of Electron?
As you can see from the comments at about line 16 of this file, the Electron guys/girls have created their own navigation solution. It would seem this doesn't handle a:visited properly.
Instead, we can easily create our own solution. Add the following function to all of your renderer scripts and ensure you put simuHistory(); at the start of every page:
function simuHistory() {
var localstorageSimuHistory = localStorage.getItem('simuHistory');
var simuHistory = localstorageSimuHistory ? JSON.parse(localstorageSimuHistory) : [];
var found = false;
var windowHref = window.location.href;
for(let i=0;i<simuHistory.length;i++) {
if(simuHistory[i] == windowHref) {
found = true;
break;
}
}
if(found === false) {
simuHistory[simuHistory.length] = windowHref;
localStorage.setItem('simuHistory', JSON.stringify(simuHistory));
}
var elements = document.getElementsByTagName('a');
for(let i=0;i<elements.length;i++) {
for(let h=0;h<simuHistory.length;h++) {
if(elements[i].href == simuHistory[h]) {
elements[i].className += ' visited';
}
}
}
}
And add the following CSS to your stylesheet:
.visited {
color: purple;
}
Alternatively, if you don't want to include the CSS (or want it all self-contained), you could replace this line:
elements[i].className += ' visited';
...with this line:
elements[i].style.color = 'purple';
The TL;DR is that unless you have more than around 25,000 fairly long unique URLs in your app, you don't need to worry about scalability.
The visited URLs are stored in localStorage. This is limited in size, and therefore limited in the number of URLs we can store. I believe in Electron this is limited to around 5MB. I tested performance by adding 25,000 additional URLs to the simuHistory array using the following code:
for(var i = 0; i < 25000; i++) {
simuHistory[simuHistory.length] = 'https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers' + Math.floor((Math.random() * 1000000) + 1);
}
The URL was chosen because it was fairly long. The random number on the end actually affects nothing at all; I just included it to add some extra length. Then I timed running simuHistory() on my crappy slow laptop (with no SSD):
25,000 URLs == ~210ms
1,000 URLs == ~13ms
In my opinion that's plenty fast for nearly any Electron app, but it depends on your use case as to how many URLs you might end up with.
