Showing loader while navigating between pages - PWA

Question

I have a PHP based website.

I have used service-workers and manifest.json to convert the website into a PWA.

Now when I launch the PWA from my Homescreen, it works normally like an APP. But, the problem is that since PWAs does not show browser address bar, user has no way of knowing that the page is being reloaded or the next page is being loaded. When they click something next page gets loaded but no loading indicator is shown.

So, now i need to add loading animation while navigating between pages. As all pages are at different URL and their is no master frame.

I'm not able to figure out some solution.

Answer 1

Theory

What you need to do is to show a loading animation at two times in a page's life cycle: at startup and before closing down. If you do that, first page's closing animation will take user to second page's starting animation, and user will be informed by the state of the app.

Practice

1) Starting animation

I think document.ready event of jQuery is a good time to let the user to interact with the page. So the loading animation will be active/shown when the page is loaded. And you will end the animation once the page is loaded and ready for user interaction.

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.

2) Ending animation

For this, I use onbeforeunload event of the browser.

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.

onbeforeunload fires automatically when user clicks to a link or otherwise triggers a navigation process. So just by listening to that, you can start your ending animation.

Then ending animation will start as the user triggers a navigation, and will be welcomed by the starting animation of the next page. So there will be transition starting with a user click and ending with next page loading. Just like apps do.

The code

Here's a snippet from the code I normally use;

$(function () {
    // page is loaded, it is safe to hide loading animation
    $('#loading-bg').hide();
    $('#loading-image').hide();

    $(window).on('beforeunload', function () {
        // user has triggered a navigation, show the loading animation
        $('#loading-bg').show();
        $('#loading-image').show();
    });
});

Here's a fiddle also with complete styles and HTML

Hope that helps.