title: How to trigger the pushEvent of Push API in order to show the notification(s)?
body: <p>I'm trying to make a push notification web program that the user can subscribe it. I hope the notifications show even if the user closed the page or even the whole window, like Facebook's notification system. Below is the excerpt code I found from <a href="https://serviceworke.rs/push-subscription-management.html" rel="nofollow noreferrer">serviceworke.rs</a>:</p>
  
  <p><br>
  index.js:</p>
  
  <pre><code>function getSubscription() {
    return navigator.serviceWorker.ready
      .then(function(registration) {
        return registration.pushManager.getSubscription();
      });
  }
  
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(function() {
        console.log('service worker registered');
      });
  
    getSubscription()
      .then(function(subscription) {
        if (subscription) {
          console.log('Already subscribed', subscription.endpoint);
        }
      });
  }
  
  function subscribe() {
    navigator.serviceWorker.ready.then(function(registration) {
      return registration.pushManager.subscribe({ userVisibleOnly: true });
    }).then(function(subscription) {
      console.log('Subscribed', subscription.endpoint);
      return fetch('register', {
        method: 'post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({
          endpoint: subscription.endpoint
        })
      });
    });
  }
  
  function unsubscribe() {
    getSubscription().then(function(subscription) {
      return subscription.unsubscribe()
        .then(function() {
          console.log('Unsubscribed', subscription.endpoint);
          return fetch('unregister', {
            method: 'post',
            headers: {
              'Content-type': 'application/json'
            },
            body: JSON.stringify({
              endpoint: subscription.endpoint
            })
          });
        });
    });
  }
  </code></pre>
  
  <p><br>
  service-worker.js:</p>
  
  <pre><code>self.addEventListener('push', function(event) {
    event.waitUntil(self.registration.showNotification('ServiceWorker Cookbook', {
      body: 'Push Notification Subscription Management'
    }));
  });
  
  self.addEventListener('pushsubscriptionchange', function(event) {
    console.log('Subscription expired');
    event.waitUntil(
      self.registration.pushManager.subscribe({ userVisibleOnly: true })
      .then(function(subscription) {
        console.log('Subscribed after expiration', subscription.endpoint);
        return fetch('register', {
          method: 'post',
          headers: {
            'Content-type': 'application/json'
          },
          body: JSON.stringify({
            endpoint: subscription.endpoint
          })
        });
      })
    );
  });
  </code></pre>
  
  <p>The question is: how do the server trigger the <code>push</code> event in <code>service-worker.js</code>? And how do the notification work even if the tab or even the whole window is closed?</p>
  
  <p>Another problem is when I put this recipe (Push Subscription recipe) onto my server and ran it, the browser told me the URL 'register' and 'unregister' were not found, which are the first parameters of both fetch APIs. How should I solve this problem?</p>
  
  <p><a href="https://i.stack.imgur.com/u5mRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5mRh.png" alt=""></a>
  <a href="https://i.stack.imgur.com/TXLnK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TXLnK.png" alt=""></a></p>
  
  <p>Thanks.</p>
  
  <p><br>
  <em>P.S. I use PHP as my server-side language.</em></p>