Browser requirements / lockout support

[amcclain]

In Hoist Core we have io.xh.hoist.browser.Utils.browserSupported() to match the request userAgent against a configurable list of browser requirements. Need to determine how to translate this into hoist-react world with an independent JS client.

• Could replicate in part at the nginx proxy layer - https://nginx.org/en/docs/http/ngx_http_browser_module.html
• Could look at libraries or utills that would somehow be included on the page prior to our bundled source (which might include unsupported / not-polyfilled code) that would detect unsupported browsers and do....something...

Pretty big gap as right now a Hoist React app will fail completely and silently if e.g. opened in IE11 - we don't need to make that work, but we need some kind of basic warning in place.

[lbwexler]

tough problem. Seems like it would be nice if we could modify our index.html to just do this in the javascript.

Would need to somehow prevent the script from loading, or redirect to the lockout page.

[cnrudd]

if (!Boolean(window.chrome)) document.write('use chrome') will rewrite the document and prevent the script from loading/rendering.
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
https://developer.mozilla.org/en-US/docs/Web/API/Document/open#Notes

a little script in the index.html should do the trick.

[amcclain]

Hi - routing this over to you, Colin. Would be great to get something in place.

We should think just a bit ahead towards support for mobile access as well where we could use one approach. That might require things to be a bit more complex in terms of a list of browsers or something with the user agent, although I would still be perfectly fine with us have a hard-coded list of what we accept in hoist-react or the dev-utils and not have it be something that we plan to configure or tweak with each app.

My only other requirement would be that the warning message end up appearing reasonable / professional with just a bit of styling to keep with the rest of the framework. But clearly the point is we're not loading the JS toolkits, so I'm just talking about some kind of basic centering, sans-serif font, etc.

Let me know if you want to talk through anything on the dev-utils side as I think that's where this will likely live. I have been using yarn link when I want to test using a local dev-utils.

[cnrudd]

starting work on this.

[cnrudd]

inspiration:
https://stackoverflow.com/questions/8943219/how-to-stop-page-load-in-html-static-page#10415265
https://stackoverflow.com/questions/8943219/how-to-stop-page-load-in-html-static-page#10415265
https://github.com/burocratik/outdated-browser/blob/develop/outdatedbrowser/outdatedbrowser.js

[cnrudd]

browser lockout has been implemented by doing feature tests:
testing for support of native Promise (IE11 does not support) and of
Promise finally (EdgeHTML 16.16299 does not support).

This thread(chakra-core/ChakraCore#3520) suggests that 'finally' support will be coming to Edge soon, so we may want to retest Edge in a few months to see if there are other features we use that it does not support.