Question

我有一个基于PHP的网站。

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

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

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

我无法找到解决方法。

Answer 1

<强>理论

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

<强>实践

1）开始动画

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

.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();
    });
});

Here's a fiddle also with complete styles and HTML

希望有所帮助。

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

1 个答案: