How to make a static web page that suggests the right Electron build to download based on visitor's operating system?

[adrienjoly]

What I'd like to do:

• put that static landing page (html + css + js files) in my Github repo's /docs folder, so that it's published online by Github-pages (I don't want to use a server-side script for that)
• when a visitor browses that page, a piece of javascript code detects the OS from their user-agent string and displays a big button to download the corresponding Electron build from the latest Github release (e.g. https://github.com/openwhyd/openwhyd-electron/releases/tag/v0.1.0)

Do you know any template, library or any kind of existing code that I could use to do that quickly and not spend too much time fixing bugs?

[adrienjoly]

Wordpress Desktop seems to do it:

var OSName = "os-unknown";
if ( window.navigator.userAgent.indexOf( "Windows" ) != -1 ) OSName = "os-windows";
if ( window.navigator.userAgent.indexOf( "Mac") != -1 && !isMobile ) OSName = "os-osx";
if ( window.navigator.userAgent.indexOf( "Linux") != -1 ) OSName = "os-linux";
document.getElementsByTagName( 'html' )[0].className += " " + OSName;
function menu() {
  var menu = document.getElementById( 'menu-header' );
  menu.style.display = menu.style.display ? "" : "block";
}

... but does not seem to make a difference between win32 and win64.

[MarshallOfSound]

You can do this, but ensure that you have a "Need another platform?" button as well in case the detection doesn't work or people are faking their user agents.

The basic strategy is just to sniff out the OS from navigator.userAgent.

See https://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript

[adrienjoly]

Thanks @MarshallOfSound, I totally agree! And thanks for the link.

Do you think that I can safely use the navigator.platform property to decide between suggesting the win32 or win64 build?

[adrienjoly]

Thanks for sharing this!