Don't start Aurelia on older browser

Help Requests
1

I’m looking for some suggestions about how to skip starting Aurelia if using an older browser.

For example, if the user tries to open my application on a browser with no support for the Fetch API - such as Internet Explorer - then I want to show a message saying: “This browser is too old. Get a new one.”

So I don’t want to incur the hit of loading Aurelia, et al for this.

2

Conditionally create the script tag.

<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<script>
if (typeof fetch === 'undefined') {
  document.body.textContent = 'Get a real browser';
} else {
  var script = document.createElement('script');
  script.src = "your_entry.js";
  // if you use cli+requirejs
  // create data attribute data-main="aurelia-bootstrapper"
  script.dataset.main = "aurelia-bootstrapper";
  document.body.append(script);
}
</script>
</body>
</html>
3

Good idea. I’m using Webpack as the bundler which appears to insert the script tag for me. Do you happen to know how it does that? If so, can this approach work?

4

I don’t use webpack, it’s too much for my primitive brain…

If HtmlWebpackPlugin is not flexibile enough for you to generate the index.html, the last thing you can still do is to modify aurelia_project/tasks/build.js. After webpack finished its job, read dist/index.html, parse it, rewrite it.

HtmlWebpackPlugin is the one compiles index.ejs into dist/index.html.

5

OK, will attempt that tomorrow, unless any other ideas are suggested in the meanwhile. I would have thought this would be a common request, as there isn’t any point loading up Aurelia just to let a user know they can’t use the application.

6

For anyone that comes across this in the future, I added this script in the :

<script>
    if (typeof fetch === 'undefined') {
    window.location.replace('/unsupported.html')
    }
</script>

and in the body added:

  <!-- Only call for scripts, if browser supports Fetch API -->
  <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script>
      if (typeof fetch !== 'undefined') {
        var element = document.createElement("script");
        element.src = "<%= htmlWebpackPlugin.files.chunks[chunk].entry %>";
        document.body.appendChild(element);
      }
    </script>
  <% } %>

And also changed webpack.config.js to not automatically inject chunk references:

new HtmlWebpackPlugin({
      inject: false,
      template: 'index.ejs',

NOTE: This does have the downside of not loading the js until after the html has downloaded, been parsed, and the local script executes - so miss out a little bit on loading performance.

I then added a HtmlWebpackPlugin to generate the unsupported.html file from a template. I could have just as easily had a static html file, but wanted to inject some values in my case (e.g. favicon.ico)

1 Like
7

Aurelia runs really well and fast on IE11. Just use a fetch polyfill like https://github.com/github/fetch

2 Likes