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

Question

我有一个基于PHP的网站。

我已经使用service-workers和manifest.json将网站转换为PWA 。

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

因此，现在我需要在页面之间导航时添加加载动画。 由于所有页面都使用不同的URL，因此它们不是主框架。

我无法找出解决方案。

Answer 1

理论

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

实践

1）开始动画

我认为jQuery的document.ready事件是让用户与页面进行交互的好时机。 因此，在加载页面时，加载动画将处于活动状态/显示。 页面加载完毕并准备好与用户交互后，您将结束动画。

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

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的小提琴

希望能有所帮助。