Отображение загрузчика при навигации между страницами - PWA

Question

У меня есть сайт на PHP.

Я использовал service-workers и manifest.json для преобразования веб-сайта в PWA.

Теперь, когда я запускаю PWA с моего Homescreen, он работает нормально, как APP. Но проблема в том, что, поскольку PWA не отображает адресную строку браузера, пользователь не знает, что страница перезагружается или загружается следующая страница. Когда они нажимают на что-то, загружается следующая страница, но индикатор загрузки не отображается.

Итак, теперь мне нужно добавить анимацию загрузки при навигации между страницами. Поскольку все страницы имеют разные URL-адреса, а их не является основным.

Я не могу найти решение.

Answer 1

Теория

Что вам нужно сделать, это показать загрузочную анимацию в два раза на странице жизненного цикла: при запуске и перед закрытием вниз. Если вы это сделаете, анимация первой страницы запустит пользователя на стартовую анимацию второй страницы, и пользователь будет проинформирован о состоянии приложения.

Практика

1) Запуск анимации

Я думаю document.ready событие JQuery это хорошее время, чтобы позволить пользователю взаимодействовать со страницей. Таким образом, анимация загрузки будет активна/показана при загрузке страницы. И вы закончите анимацию, как только страница будет загружена и готова для взаимодействия с пользователем.

Метод .ready() предлагает способ запуска кода JavaScript, как только страницы Document Object Model (DOM) становится безопасным для манипулирования. Это часто будет подходящим временем для выполнения задач, которые необходимы до того, как пользователь просматривает или взаимодействует со страницей, например, для добавления обработчиков событий и инициализации плагинов.

2) Завершение анимации

Для этого я использую onbeforeunload событие браузера.

Событие beforeunload запускается, когда окно, документ и его ресурсы будут выгружены.

onbeforeunload срабатывает автоматически, когда пользователь нажимает на ссылку или иным образом вызывает процесс навигации. Поэтому, просто слушая это, вы можете начать свою конечную анимацию.

После этого анимация завершается, когда пользователь запускает навигацию и будет приветствоваться стартовой анимацией следующей страницы. Таким образом, произойдет переход, начинающийся с щелчка пользователя и заканчивающегося загрузкой следующей страницы. Так же, как и приложения.

Код

Вот отрывок из кода я обычно использую;

$(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

Надежда, что помогает.