Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/386.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Web推送通知单击不';行不通_Javascript_Laravel 5_Push Notification_Web Push - Fatal编程技术网

Javascript Web推送通知单击不';行不通

Javascript Web推送通知单击不';行不通,javascript,laravel-5,push-notification,web-push,Javascript,Laravel 5,Push Notification,Web Push,我试图做网页推送通知,是可点击的,当用户点击它,他应该重定向到一些网址 我正在将Laravel 5.4与软件包一起使用: 下面是一些代码: app.blade.php <script> var _registration = null; function registerServiceWorker() { return navigator.serviceWorker.register('{{ asset('assets/js/service-worker.js')

我试图做网页推送通知,是可点击的,当用户点击它,他应该重定向到一些网址

我正在将Laravel 5.4与软件包一起使用:

下面是一些代码:

app.blade.php

 <script>
  var _registration = null;
  function registerServiceWorker() {
    return navigator.serviceWorker.register('{{ asset('assets/js/service-worker.js') }}')
        .then(function(registration) {
          console.log('Service worker successfully registered.');
          _registration = registration;
          return registration;
        })
        .catch(function(err) {
          console.error('Unable to register service worker.', err);
        });
  }
  function askPermission() {
    return new Promise(function(resolve, reject) {
      const permissionResult = Notification.requestPermission(function(result) {
        resolve(result);
      });
      if (permissionResult) {
        permissionResult.then(resolve, reject);
      }
    })
        .then(function(permissionResult) {
          if (permissionResult !== 'granted') {
            throw new Error('We weren\'t granted permission.');
          }
          else{
            subscribeUserToPush();
          }
        });
  }
  function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
  function getSWRegistration(){
    var promise = new Promise(function(resolve, reject) {
      // do a thing, possibly async, then…
      if (_registration != null) {
        resolve(_registration);
      }
      else {
        reject(Error("It broke"));
      }
    });
    return promise;
  }
  function subscribeUserToPush() {
    getSWRegistration()
        .then(function(registration) {
          console.log(registration);
          const subscribeOptions = {
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(
                "{{env('VAPID_PUBLIC_KEY')}}"
            )
          };
          return registration.pushManager.subscribe(subscribeOptions);
        })
        .then(function(pushSubscription) {
          console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
          sendSubscriptionToBackEnd(pushSubscription);
          return pushSubscription;
        });
  }
  function sendSubscriptionToBackEnd(subscription) {
    return fetch('/api/save-subscription/{{Auth::user()->id}}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(subscription)
    })
        .then(function(response) {
          if (!response.ok) {
            throw new Error('Bad status code from server.');
          }
          return response.json();
        })
        .then(function(responseData) {
          if (!(responseData.data && responseData.data.success)) {
            throw new Error('Bad response from server.');
          }
        });
  }
  function enableNotifications(){
    //register service worker
    //check permission for notification/ask
    askPermission();
  }
  registerServiceWorker();
</script>

通常它会显示通知,但当我尝试单击它时,我希望被重定向到它,但什么也没有发生。你知道如何修复它吗?

将Google Chrome设置重置为默认设置后,问题已经解决

    self.addEventListener('push', function(event) {
    if (event.data) {
        var data = event.data.json();

        self.registration.showNotification(data.title, {
            body: data.body,
            icon: data.icon
        });

        console.log('This push event has data: ', event.data.text());
    } else {
        console.log('This push event has no data.');
    }
   });

self.addEventListener('notificationclick', function(event) {
  console.log('Notification click: tag ', event.notification.tag);
  event.notification.close();
  var url = 'https://google.com';
  console.log('kliknieto');
  event.waitUntil(
    clients.matchAll({
        type: 'window'
    })
    .then(function(windowClients) {
        for (var i = 0; i < windowClients.length; i++) {
            var client = windowClients[i];
            if (client.url === url && 'focus' in client) {
                return client.focus();
            }
        }
        if (clients.openWindow) {
            return clients.openWindow(url);
        }
    })
);
});
public function toWebPush($notifiable, $notification)
{
    return (new WebPushMessage)
        ->title('Some title')
        ->icon(asset("img/img.jpg"))
        ->body('Some body')
        ->action('View action', 'view_action')
        ->data(['id' => $notification->id, 'link' => $this->link]);
}