Creating an index.html in Your ASP.NET Core MVC Application to Fix Website Shortcuts on Devices

While working on an ASP.NET Core MVC PWA application, I noticed that if users created a shortcut to the application in their home screens on their devices, an /index.html was added to the application URL.

So if your application URL looks like this:

https://{YourApplicationName}.azurewebsites.net

Then if users create a shortcut to your application on their devices and add it to the home screen, it will look like this:

https://{YourApplicationName}.azurewebsites.net/index.html

The latter URL will then either return a blank page, or return a 404 Not found error.

It’s possible to fix this problem by redirecting from /index.html to the actual index of the application. In your ASP.NET Core MVC application, create an empty index.html file and add it to the root folder:

To ensure that the application will use this file, go to Startup.cs and add the following method call:

app.UseDefaultFiles();

Before calling the following method:

app.UseStaticFiles();

Now go to index.html and write the following JavaScript code which force redirects from /index.html to the actual, default application home index:

<script type="text/javascript">
    window.onload = function () {
        var url = window.location.href;
        if (url.indexOf("index.html") >= 0) {
            url = url.replace("index.html", "");
            redirectPage(url);
        } else {
            redirectPage(url);
        }
    };

    function redirectPage(baseUrl) {
        var url = baseUrl + "Home/Index";
        window.location.href = url;
    };
</script>

And that solves the problem, now users will be able to access your application from their home screen shortcuts.