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

Question

我有一个基于PHP的网站.

我已经使用service-workers,并manifest.json在网站转换成PWA.

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

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

我无法找到解决方案.

Answer 1

理论

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

实践

1)开始动画

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

一旦页面的文档对象模型(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

希望有所帮助.