Web Push Notifications

With v3.1.0-beta push notifications are supported with service worker implementation.

Preparation Steps

• Create a project on the Firebase Developer Console.
• Go to Project settings (The cog near the top left corner), click the ' Cloud Messaging' tab.
• Note that Server Key and Sender ID.
• Create a copy of manifest.json.template called manifest.json at root folder
• Replace <your-sender-id> in your new manifest.json with your own Sender ID from the Firebase Developer Console project.
• Create a copy of service-worker.js.template called service-worker.js at root folder
• Link your manifest <link rel="manifest" href="../manifest.json">

Now half of the job is done.

Let's create a Noty.Push instance

const NotyPush = Noty.Push('/service-worker.js')
  .on('onPermissionGranted', function () {
    console.log('Perm: granted')
  })
  .on('onPermissionDenied', function () {
    console.log('Perm: denied')
  })
  .on('onSubscriptionSuccess', function (subData) {
    console.log('Subscription:', subData)
    // (YOU NEED TO STORE THIS VALUES FOR LATER USE)
  })
  .on('onSubscriptionCancel', function (subData) {
    console.log('Subscription: canceled')
  })
  .on('onWorkerSuccess', function () {
    console.log('Worker: installed')
  })
  .on('onWorkerError', function (err) {
    console.log('Worker: failed', err)
  })
  .on('onWorkerNotSupported', function (err) {
    console.log('Worker: not supported', err)
  })

Let's Ask User's Permission

NotyPush.requestSubscription()

Now the browser will ask permission. And if the user allows it, the service worker will be registered.

You have to store subData onSubscriptionSuccess callback for later use.

Sending push notifications from backend (Node.js)

Now that we have subscription information, we can send notifications with web-push library.

Let's install web-push first.

$ npm install web-push

Create a JavaScript file called sendPushExample.js

const webpush = require('web-push')

const vapidKeys = webpush.generateVAPIDKeys()

webpush.setGCMAPIKey('YOUR-SERVER-KEY-FROM-FIREBASE-CONSOLE')

webpush.setVapidDetails(
  'mailto:your@email.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
)

// Use your previously saved subscription information
const pushSubscription = {
  endpoint: '',
  keys: {
    auth: '',
    p256dh: ''
  }
}

// image & actions are optional
webpush.sendNotification(pushSubscription, JSON.stringify({
  title: 'Noty title',
  body: 'Noty body',
  icon: 'https://your-icon0-url.png',
  image: 'https://your-image-url.png',
  url: 'http://ned.im/noty/?ref=webPushTest',
  actions: [
    {action: 'actionYes', 'title': 'Yes', 'icon': 'https://your-icon1-url.png'},
    {action: 'actionNo', 'title': 'No', 'icon': 'https://your-icon2-url.png'}
  ]
}))

After that we can run

$ node sendPushExample.js

Notification should look like this for Chrome

Checking user's current permission

NotyPush.getPermissionStatus() === 'granted'
NotyPush.getPermissionStatus() === 'default'
NotyPush.getPermissionStatus() === 'denied'

// In some cases, you may need to check
// whether your service worker is running.
NotyPush.isSWRegistered() === true

// You may ask again for permission,
// If user's permission granted
// but service worker unregistered or not working.