JavaScript — отображение загрузчика при переходе между страницами — PWA

Question

JavaScript — отображение загрузчика при переходе между страницами — PWA

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

я использовал service-workers а также manifest.json превратить сайт в PWA,

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

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

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

3

javascript php progressive-web-apps service-worker

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

теория

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

практика

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

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

Метод .ready () предлагает способ запуска кода JavaScript, как только
Объектная модель документа (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();
});
});

Вот скрипка также с полными стилями и HTML

Надеюсь, это поможет.

6