在页面之间导航时显示加载程序 - PWA

我有一个基于 PHP 的网站。

我用过service-workers and manifest.json将网站转换为PWA.

现在，当我从主屏幕启动 PWA 时，它可以像应用程序一样正常工作。但是，问题在于，由于 PWA 不显示浏览器地址栏，用户无法知道页面正在重新加载或下一页正在加载。当他们单击某些内容时，下一页会被加载，但不会显示加载指示器.

所以，现在我需要在页面之间导航时添加加载动画。由于所有页面都位于不同的 URL，并且它们没有主框架。

我无法找出解决方案。

Theory

您需要做的是在页面生命周期中两次显示加载动画：启动时 and 关闭前。如果您这样做，第一页的关闭动画将把用户带到第二页的开始动画，并且用户将收到应用程序的状态通知。

Practice

1）开始动画

I think document.ready https://api.jquery.com/ready/jQuery 的事件是让用户与页面交互的好时机。因此，加载动画将在页面加载时激活/显示。一旦页面加载并准备好进行用户交互，您将结束动画。

.ready() 方法提供了一种在以下情况下立即运行 JavaScript 代码的方法： 页面的文档对象模型 (DOM) 变得可以安全操作。这 通常是执行之前所需任务的好时机 用户查看页面或与页面交互，例如添加事件 处理程序并初始化插件。

2）结束动画

为此，我使用onbeforeunload https://developer.mozilla.org/en/docs/Web/Events/beforeunload浏览器的事件。

当窗口、文档及其对象时，会触发 beforeunload 事件 资源即将被卸载。

onbeforeunload当用户单击链接或以其他方式触发导航过程时自动触发。因此，只需听一下，您就可以开始结束动画。

然后结束动画将在用户触发导航时开始，并受到下一页的开始动画的欢迎。因此，将会出现从用户单击开始到下一页加载结束的转换。就像应用程序一样。

The code

这是我通常使用的代码片段；

$(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 的小提琴 https://jsfiddle.net/umurkaragoz/dhhzs7ry/23/

希望有帮助。