如何使用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事件。