Question

我正在尝试在我的MVC Web应用程序中使用chrome实现浏览器推送通知。我关注了developers.google.com

这是我的manifest.json文件

{
"name": "Push Demo",
"short_name": "Push Demo",
"display": "standalone",
"gcm_sender_id": "10XXXXXXXXXXX",
"gcm_user_visible_only": "true"
}

这是我的sw.js文件

    console.log('Started', self);
self.addEventListener('install', function (event) {
    self.skipWaiting();
    console.log('Installed', event);
});
self.addEventListener('activate', function (event) {
    console.log('Activated', event);
});
self.addEventListener('push', function (event) {
    console.log('Push message received', event);
    // TODO
});

这是我的index.cshtml文件

<!DOCTYPE html>
<html>
<head>
    <title>Push Notification codelab</title>
    <link rel="manifest" href="~/manifest.json">

</head>
<body>
    <h1>Push Notification codelab</h1>
    <p>This page must be accessed using HTTPS or via localhost.</p>
    <button id="subscribeButton">Subscribe</button>        
</body>
</html>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(document).ready(function () { 
    var reg;
    var sub;
    var isSubscribed = false;        
    if ('serviceWorker' in navigator) {
        console.log('Service Worker is supported');
        navigator.serviceWorker.register('/sw.js').then(function () {
            return navigator.serviceWorker.ready;
        }).then(function (serviceWorkerRegistration) {
            reg = serviceWorkerRegistration;
            subscribeButton.disabled = false;
            console.log('Service Worker is ready :^)', reg);
            //alert(reg);
        }).catch(function (error) {
            console.log('Service Worker Error :^(', error);
        });
    }


    $('#subscribeButton').click(function () {
        if (isSubscribed) {
                    unsubscribe();
                } else {
                    subscribe();
                }
    });



    function subscribe() {
        var gcm_sender_id = '';
        var gcm_user_visible_only = true;
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/manifest.json",
            success: function (data) {                
                gcm_sender_id = data.gcm_sender_id;
            }
        });


        reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (pushSubscription)
        {
            //alert(pushSubscription);
            sub = pushSubscription;
            console.log('Subscribed! Endpoint:', sub.endpoint);
            subscribeButton.textContent = 'Unsubscribe';
            isSubscribed = true;
        }).catch(function (error) {
            console.log('Subscription Error :^(', error);
        });
    }
    function unsubscribe() {
        sub.unsubscribe().then(function (event) {
            subscribeButton.textContent = 'Subscribe';
            console.log('Unsubscribed!', event);
            isSubscribed = false;
        }).catch(function (error) {
            console.log('Error unsubscribing', error);
            subscribeButton.textContent = 'Subscribe';
        });
    }

    });
</script>

我收到错误

( DOMException: Registration failed - manifest empty or missing)

但我可以从链接localhost:6345/manifest.json

查看我的manifest.json文件

如果我遗漏任何事情或做错任何步骤，请帮助我。请提供一些答案或其他方式向用户发送浏览器推送通知。谢谢＆amp;此致

适用于Web应用程序MVC的Chrome浏览器推送通知

0 个答案: