beforeinstallprompt 在每次加载时触发答案

【问题标题】：beforeinstallprompt triggers on every loadbeforeinstallprompt 在每次加载时触发
【发布时间】：2019-08-17 10:59:33
【问题描述】：

Beforeinstallprompt 在每次加载时触发。我在这里使用了代码：https://developers.google.com/web/fundamentals/app-install-banners/ 我没有使用通过调用e.preventDefault(); 禁用的迷你信息栏

问题是如果用户不点击addToHomeScreen，每次加载都会调用showAddToHomeScreen();。

我希望 showAddToHomeScreen(); 函数仅每月左右调用一次，方法是存储有关会话中最后一次“取消”点击或类似内容的信息。谷歌不应该自己做这个吗？

这是我在以下链接中找到的： https://developers.google.com/web/updates/2018/06/a2hs-updates

您只能在延迟事件上调用 prompt() 一次，如果用户单击对话框上的取消，则需要等到在下一页导航中触发 beforeinstallprompt 事件。与传统的权限请求不同，单击取消不会阻止将来对 prompt() 的调用，因为它必须在用户手势内调用。

window.addEventListener('beforeinstallprompt', function (e) {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;

    showAddToHomeScreen();
});

function showAddToHomeScreen() {
    var prompt = document.querySelector(".a2hs-prompt");
    prompt.style.display = "flex";
    var open = document.querySelector(".a2hsBtn");
    open.addEventListener("click", addToHomeScreen);
    var close = document.querySelector(".a2hsBtn-close");
    close.addEventListener("click", function() {
        prompt.style.display = "none";
    });
}

function addToHomeScreen() {
    var prompt = document.querySelector(".a2hs-prompt");

    // hide our user interface that shows our A2HS button
    prompt.style.display = 'none';

    if (deferredPrompt) {
        // Show the prompt
        deferredPrompt.prompt();

        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice.then(
            function (choiceResult) {
                if (choiceResult.outcome === 'accepted') {
                    show_ad2hs_success_message();
                }
                deferredPrompt = null;
        });
    }
}

【问题讨论】：

标签： javascript screen preventdefault beforeinstallprompt

【解决方案1】：

您必须定义自己的会话并添加过期日期。这对 ajax 来说很简单。我就是这样做的：

Javascript：

    $(document).ready(function() {
    $.ajax({
        url: '/update_session_addtohomescreen',
        success: function (session_expired) {
            if(session_expired=='True'){
                showAddToHomeScreen();
            }
        },
        error: function () {
             alert("it didn't work");
        }
    });
});

这是包装showAddToHomeScreen(); 函数

查看

@csrf_exempt
def update_session_addtohomescreen(request):
    if request.is_ajax():
        number_of_days_till_expire = 1
        now_in_secs = time.time()
        if not 'last_session_coockie' in request.session or now_in_secs > request.session['last_session_coockie']+60:#number_of_days_till_expire*86400:
            session_expired = True
            request.session['last_session_coockie'] = now_in_secs
        else:
            session_expired = False
        return HttpResponse(session_expired)
    return None

您应该在请求中包含 csrf 令牌，并将 url 添加到 urls.py

【讨论】：

也可以通过客户端cookies控制。根据您的应用程序，这可能是一个更好的主意。