如何自定義瀏覽器webpush通知正文和圖標？

Question

我們如何根據@challenge.image和@challenge.description動態定製瀏覽器通知icon和body？

我得到的通知點擊webpush-button彈出，但只有消息的title是動態變化的。我怎樣才能讓它工作body和icon呢？

挑戰/ show.html.erb

<script> 
    $('.webpush-button').on('click', (e) => { 
    navigator.serviceWorker.ready 
    .then((serviceWorkerRegistration) => { 
     serviceWorkerRegistration.pushManager.getSubscription() 
     .then((subscription) => { 
     $.post('/push', { 
      subscription: subscription.toJSON(), 
      message: "<%= @challenge.name %>", # This works dynamically for the title, but how can I get message to also dynamically send body and icon so I can use <%= @challenge.image %> for icon and <%= @challenge.description %> for body? 
     }); 
     }); 
    }); 
    }); 
</script> 

push_notifications_controller

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 

的application.js

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 
    }); 
    }); 

    // 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"); 
     } 
    }); 
    } 

serviceworker.js.erb

console.log('[Service Worker] Hello world!'); 

var CACHE_VERSION = 'v1'; 
var CACHE_NAME = CACHE_VERSION + ':sw-cache-'; 

function onInstall(event) { 
    console.log('[Serviceworker]', "Installing!", event); 
    event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) { 
     return cache.addAll([ 

     // make sure serviceworker.js is not required by application.js 
     // if you want to reference application.js from here 
     '<%#= asset_path "application.js" %>', 

     '<%= asset_path "application.css" %>', 

     '/offline.html', 

     ]); 
    }) 
); 
} 

function onActivate(event) { 
    console.log('[Serviceworker]', "Activating!", event); 
    event.waitUntil(
    caches.keys().then(function(cacheNames) { 
     return Promise.all(
     cacheNames.filter(function(cacheName) { 
      // Return true if you want to remove this cache, 
      // but remember that caches are shared across 
      // the whole origin 
      return cacheName.indexOf(CACHE_VERSION) !== 0; 
     }).map(function(cacheName) { 
      return caches.delete(cacheName); 
     }) 
    ); 
    }) 
); 
} 

// Borrowed from https://github.com/TalAter/UpUp 
function onFetch(event) { 
    event.respondWith(
    // try to return untouched request from network first 
    fetch(event.request).catch(function() { 
     // if it fails, try to return request from the cache 
     return caches.match(event.request).then(function(response) { 
     if (response) { 
      return response; 
     } 
     // if not found in cache, return default offline content for navigate requests 
     if (event.request.mode === 'navigate' || 
      (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { 
      console.log('[Serviceworker]', "Fetching offline content", event); 
      return caches.match('/offline.html'); 
     } 
     }) 
    }) 
); 
} 

self.addEventListener("push", (event) => { 
    let title = (event.data && event.data.text()) || "Yay a message"; 
    let body = "We have received a push message"; 
    let icon = '/assets/default.png'; 

    event.waitUntil(
    self.registration.showNotification(title, { title,body, icon }) 
) 
}); 

self.addEventListener('install', onInstall); 
self.addEventListener('activate', onActivate); 
self.addEventListener('fetch', onFetch); 

serviceworker-companion.js

if (navigator.serviceWorker) { 
    navigator.serviceWorker.register('/serviceworker.js', { scope: './' }) 
    .then(function(reg) { 
     console.log('[Companion]', 'Service worker registered!'); 
    }); 
} 

我經由serviceworker gem，webpush gem，VAPID tutorial實現推。

Answer 1

視圖

<%= content_tag(:button, "Foo", class: "webpush-button") %> 

<script> 
    $('.webpush-button').on('click', (e) => { 
    navigator.serviceWorker.ready 
    .then((serviceWorkerRegistration) => { 
     serviceWorkerRegistration.pushManager.getSubscription() 
     .then((subscription) => { 
     $.post('/push', { 
      subscription: subscription.toJSON(), 
      message: "<%= @challenge.name %>", 
      body: "<%= @challenge.why %>", 
      icon: "/assets/default.png" 
     }); 
     }); 
    }); 
    }); 
</script> 

控制器

class PushNotificationsController < ApplicationController 
    def push 
    Webpush.payload_send(
     message: JSON.generate({ 
     title: params[:message], 
     body: params[:body], 
     icon: params[:icon] 
     }), 
     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 

JS

self.addEventListener("push", (event) => { 
    var data = event.data.json(); 
    let title = (event.data && data.title) || "Yay a message"; 
    let body = (event.data && data.body) || "We have received a push message"; 
    let icon = (event.data && data.icon) || "/assets/blue-astronaut.png"; 

    event.waitUntil(
    self.registration.showNotification(title, { title,body, icon }) 
) 
}); 

Answer 2

中的對象self.addEventListener("push", (event)=> {...})，有一個方法json()，該方法轉換爲json的event.data值。

只有當發送的數據是正確的json格式時，這纔有效。

下面是一個例子，我如何使用網絡推：

self.addEventListener("push", function onPush(event) { 
    var data = event.data.json() 
    event.waitUntil(self.registration.showNotification(data.message.title, { 
    body: data.message.body, 
    icon: data.message.icon, 
    actions: [ 
     { action: 'Button one', title: "Button one text" }, 
     { action: 'Button two', title: "Button two text" } 
    ] 
    })); 
}); 

這裏是我的user.rb模型的方法：

def send_web_push(title: , body:) 
    # the web_push is a payload with I save to the user record, 
    # that's allow me to send web push with background worker. 
    payload = { 
     endpoint: web_push['endpoint'], 
     keys: { 
     auth: web_push['auth'], 
     p256dh: web_push['p256dh'] 
     } 
    } 
    push = WebPush.new(payload) 
    push.set_vapid_details(
     'mailto:support@awesomesupewebapp.com', 
     Rails.application.secrets.web_push_public_key, 
     Rails.application.secrets.web_push_private_key 
    ) 
    # below is a `:message` key in json format 
    push.send_notification({ 
     message: { 
     title: title,     
     body: body,     
     icon: "/this_is_my_icon.png" 
     } 
    }.to_json) 
    end 

我使用一些其他的紅寶石創業板web_push，但我認爲它很常見。從這個例子中，你應該看看身體，標題和圖標按鍵是如何改變的。