Where to check for browser compatibility and render error page if browser is not supported?

1

Hey,

I’m writing a small experimental app that uses WebRTC and Web Speech API (https://webrtc-translate.herokuapp.com) and I was wondering where’s the best place to check for browser compatibility (unfortunately currently only desktop Chrome is supported) and show some custom template with error message without changing the URL.

I tried adding custom renderTemplate method to the route that requires all these APIs to check if everything is supported and rendering custom template if it’s not (this.render('unsupported')), but it still instantiates this route’s controller, which assumes these APIs are available. Is there a way to avoid doing the check twice in the route and its controller?

2

I just read up on error substates and now I check for condition in route’s beforeModel method, reject a promise if browser doesn’t support all required APIs and Ember automatically renders provided error template in such case.

Another issue was that I’ve got a service that’s instantiating window.SpeechRecognition object in its init method and Ember CLI automatically generated an initializer that injected this service into all routes, thus instantiating it at the app start, which was causing errors in browsers that do not support this API and was not necessary, as I need it only in a single controller.