0

Web サイトのユーザー向けに Chrome プッシュ通知を実装しています。私は成功することができます。質問が 2 つあります。

1) ブラウザ設定からの通知をブロックするたびに以前のサブスクリプション ID を取得する方法。バックエンド サーバーからサブスクリプション ID を削除する必要があります

2) Web サイトをリロードするたびに、API が同じサブスクリプション ID で毎回ヒットするため、サーバーにサブスクリプション ID を送信するたびに pushManager.subscribe メソッドが実行されます

push.js

'use strict';

if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('service_worker.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
    reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) {
      console.log('endpoint:',JSON.stringify(sub.endpoint));
       console.log(sub.endpoint.substring('https://android.googleapis.com/gcm/send/'.length));
    });
  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}

service-worker.js

'use strict';
var myurl;
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', event);

      event.waitUntil(  
      fetch('/notify.json').then(function(response) { 
            return response.json().then(function(data) { 
            console.log(JSON.stringify(data));
                var title = data.title;  
                var body = data.body;  
                myurl=data.myurl;     

                return self.registration.showNotification(title, {  
                  body: body,  
                  icon: 'profile.png',  
                  tag: 'notificationTag'  
                }); 

            });  
      }).catch(function(err) {  
          console.error('Unable to retrieve data', err);

          var title = 'An error occurred';
          var body = 'We were unable to get the information for this push message';  

          return self.registration.showNotification(title, {  
              body: body,  
              icon: 'profile.png',  
              tag: 'notificationTag'  
            });  
        })  
      );   
});

  // var title = 'Vcona';
  // event.waitUntil(
  //   self.registration.showNotification(title, {
  //     'body': 'School Management',
  //     'icon': 'profile.png'
  //   }));



self.addEventListener('notificationclick', function(event) {
  console.log('Notification click: tag', event.notification.tag);
  // Android doesn't close the notification when you click it
  // See http://crbug.com/463146
  event.notification.close();
  var url = 'https://demo.innotical.com';
  // Check if there's already a tab open with this URL.
  // If yes: focus on the tab.
  // If no: open a tab with the URL.
  event.waitUntil(
    clients.matchAll({
      type: 'window'
    })
    .then(function(windowClients) {
      console.log('WindowClients', windowClients);
      for (var i = 0; i < windowClients.length; i++) {
        var client = windowClients[i];
        console.log('WindowClient', client);
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      if (clients.openWindow) {
        return clients.openWindow(myurl);
      }
    })
  );
});
4

2 に答える 2

1

私ができる最高のアドバイス：

  1. サブスクリプション (特にサーバーに送信するもの) を indexDB で追跡します。なぜ IndexDB なのか?
    1. ウィンドウと Serviceworker で indexDB を更新できます。ウィンドウで最初に を取得するため、これは重要ですがPushSubscription、Serviceworker はリッスンする必要があるイベントをディスパッチし、可能であればpushsubscriptionchange新しい を取得しようとします。PushSubscription
  2. ページが読み込まれたら、古いサブスクリプションの indexDB を確認し、存在する場合はそれと比較しgetSubscription()ます (つまり、現在のサブスクリプション)。このチェックには、サーバー側で必要な値が含まれている必要があります。たとえば、ブラウザーがペイロードをサポートしていない状態からサポートするようになったとき、キーを持たない状態から突然キーを持てるようになったときなどです。そのため、サーバーにこれらのキーがあるかどうかを確認する必要があります。 .
  3. GCM 用の API は使用しないでください。これは、他のブラウザー (Firefox、Opera、Samsung ブラウザー、および将来的にはその他のブラウザー) では機能せず、必要ありません。
于 2016-08-22T22:27:59.317 に答える
0

1) 以前の登録 ID を取得できません。方法があります：

  1. 通知をサブスクライブするたびに、それをローカル chrome db (indexdb など) に保存できます。別のときにサブスクライブするときは、この db から以前の reg id を復元するだけです。
  2. GCM に通知を送信すると、正規 ID と reg ID の正確性に関する別の情報が返されるため、無効なものを削除できます。

2) サブスクリプション ID が既に存在するかどうかを最初に確認し、存在しない場合はサブスクライブする必要があります。

if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('service_worker.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
    reg.pushManager.getSubscription().then(function(subscription) {
        if(!subscription) {
            reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) {
                console.log('endpoint:',JSON.stringify(sub.endpoint));
                console.log(sub.endpoint.substring('https://android.googleapis.com/gcm/send    /'.length));
                //send new subscription id to server
                return;
            });
        }
    });

  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}
于 2016-05-30T16:23:25.023 に答える