如何使用JavaScript的点击当用户点击触发POST

Question

...

<%= content_tag(:button, "Send", class: "webpush-button") %> 
# Previous Attempt: <%= button_to 'send', class: "webpush-button" %> 

<script> 
    $('.webpush-button').on('click', (e) => { 
    navigator.serviceWorker.ready 
    .then((serviceWorkerRegistration) => { 
     serviceWorkerRegistration.pushManager.getSubscription() 
     .then((subscription) => { 
     $.post("/post", { 
      subscription: subscription.toJSON(), 
      message: 'You clicked a button!' 
     }); 
     }); 
    }); 
    }); 
</script> 

他应该通过采取...

class PushNotificationsController < ApplicationController 
    def push 
    Webpush.payload_send(
     message: params[:message], 
     endpoint: params[:subscription][:endpoint], 
     p256dh: params[:subscription][:keys][:p256dh], 
     auth: params[:subscription][:keys][:auth], 
     vapid: { 
     subject: "mailto:sender@example.com", 
     public_key: ENV['VAPID_PUBLIC_KEY'], 
     private_key: ENV['VAPID_PRIVATE_KEY'] 
     } 
    ) 
    end 
end 

而是没有任何反应。该.webpush-button的JavaScript从来没有踢。我把它放在两个地方，它仍然没有效果...

的application.js

/ Register the serviceWorker script at /serviceworker.js from our server if supported 
if (navigator.serviceWorker) { 
    navigator.serviceWorker.register('/serviceworker.js').then(function(reg) { 
    console.log('Service worker change, registered the service worker'); 
    }); 
} 
// Otherwise, no push notifications :(
else { 
    console.error('Service worker is not supported in this browser'); 
} 

// When serviceWorker is supported, installed, and activated, 
// subscribe the pushManager property with the vapidPublicKey 
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { 
    serviceWorkerRegistration.pushManager.subscribe({ 
    userVisibleOnly: true, 
    applicationServerKey: window.vapidPublicKey 
    }); 
}); 

$('.webpush-button').on('click', (e) => { 
    navigator.serviceWorker.ready 
    .then((serviceWorkerRegistration) => { 
    serviceWorkerRegistration.pushManager.getSubscription() 
    .then((subscription) => { 
     $.post('/push', { 
     subscription: subscription.toJSON(), 
     message: 'You clicked a button!' 
     }); 
    }); 
    }); 
}); 

// Let's check if the browser supports notifications 
if (!("Notification" in window)) { 
    console.error("This browser does not support desktop notification"); 
} 

// Let's check whether notification permissions have already been granted 
else if (Notification.permission === "granted") { 
    console.log("Permission to receive notifications has been granted"); 
} 

// Otherwise, we need to ask the user for permission 
else if (Notification.permission !== 'denied') { 
    Notification.requestPermission(function (permission) { 
    // If the user accepts, let's create a notification 
    if (permission === "granted") { 
     console.log("Permission to receive notifications has been granted"); 
    } 
    }); 
} 

application.html.erb

<script> 
    window.vapidPublicKey = new Uint8Array("<%= @decodedVapidPublicKey %>"); 
</script> 

现在根据我使用的tutorial和git代码...订阅应该从serviceworker那么为什么我仍然得到一个零错误？

我使用serviceworker & webpush宝石和遵循这一VAPID tutorial。

不是重复。另一个问题集中在params上。这一个是专注于JavaScript不触发。

Answer 1

首先，你只应该把JavaScript放在一个地方。

二，添加页面后.webpush-button click方法是ready

$(document).on('ready page:load', function() { 

}); 

而在Chrome浏览器开发工具，标签Event Listeners，检查HTML元素具有Click事件。