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

我有一个基于PHP的网站.

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

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

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

我无法找到解决方案.

解决方法:

理论

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

实践

1)开始动画

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

The .ready() method offers a way to run JavaScript code as soon as the
page’s Document Object Model (DOM) becomes safe to manipulate. This
will often be a good time to perform tasks that are needed before the
user views or interacts with the page, for example to add event
handlers and initialize plugins.

2)结束动画

为此,我使用浏览器的onbeforeunload事件.

The beforeunload event is fired when the window, the document and its
resources are about to be unloaded.

当用户点击链接或以其他方式触发导航过程时,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

希望有所帮助.

标签：progressive-web-apps,javascript,php,service-worker
来源： https://codeday.me/bug/20190727/1552886.html