Implementing Web Push Notifications

Alexander Zlatkov from SessionStack on how to implement Web Push Notifications:

There are three general steps to implementing a push:

  1. The UI — adding the necessary client-side logic to subscribe a user to a push. This is the JavaScript logic that your web app UI needs in order to enable the user to register himself to push messages.
  2. Sending the push message — implementing the API call on your server that triggers a push message to the user’s device.
  3. Receiving the push message — handling the push message once it arrives in the browser.

How JavaScript works: the mechanics of Web Push Notifications →

PngPong Image Manipulation Library

For the recent UK Elections the folks The Guardian wanted to show big images along with their push notifications. Being bandwidth-aware they wanted a solution in which they could use a template image (which could then be cached) and then draw some stuff onto it. Only problem: Service Workers don’t have access to the Canvas API.

Enter PngPong, an basic image manipulation library, they’ve created:

PngPong is a very, very basic replacement for the Canvas API in environments that do not support it – primarily, service workers. Instead, it manually manipulates the bytes of a PNG file to copy the contents of another image, or draw basic shapes (currently only rectangles).

Their code to handle push notifications looked something like this:

self.addEventListener('push', (e) => {
    e.waitUntil(
        caches.match('/notification_template.png')
        .then((res) => res.arrayBuffer())
        .then((arrayBuffer) => {
            addResultsToTemplate(arrayBuffer, e.data);
            return blobToDataURL(new Blob([arrayBuffer]))
        })
        .then((imageURL) => {
            return self.registration.showNotification("Title", {
                image: imageURL
            })
        })
    )
})

Inside addResultsToTemplate they heavy lifting would be done by PngPong, drawing some small rectangles onto the template pictured below, yielding a push notification as pictured at the top of this post.


The template used

Example PngPong usage:

import {
  PngPong,
  PngPongShapeTransformer,
  PngPongImageCopyTransformer
} from 'png-pong';

// Create new PngPong instance
const pngPong = new PngPong(imageArrayBuffer);

// Draw a 30px red square 10px from the top and 10px from the left
const shape = new PngPongShapeTransformer(pngPong);
shape.drawRect(10, 10, 30, 30, [255, 0, 0])

// Copy a 50x50 image 10px from the top left of the source image,
// and draw it 30px into our target image. 
const toCopyFrom = new ArrayBuffer();
const imageCopy = new PngPongImageCopyTransformer(toCopyFrom, pngPong);
imageCopy.copy(10, 10, 50, 50, 30, 30);

// Run the transforms
pngPong.run();

PngPong (GitHub) →
PngPong Use Case: Generating Images in JavaScript Without Using the Canvas API →

Push Notifications for the Web

push-message-b27d1cc8a4b125907d658982bbe5be2d

self.addEventListener('push', function(event) {  
  // Since there is no payload data with the first version  
  // of push messages, we'll grab some data from  
  // an API and use it to populate a notification  
  event.waitUntil(  
    fetch(SOME_API_ENDPOINT).then(function(response) {  
      if (response.status !== 200) {  
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the   
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
      throw new Error();  
      }

      // Examine the text in the response  
      return response.json().then(function(data) {  
        if (data.error || !data.notification) {  
          console.error('The API returned an error.', data.error);  
          throw new Error();  
        }  
          
        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
      });  
    }).catch(function(err) {  
      console.error('Unable to retrieve data', err);

      var title = 'An error occured';
      var message = 'We were unable to get the information for this push message';  
      var icon = URL_TO_DEFAULT_ICON;  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    })  
  );  
});

If you ask a room of developers what mobile device features are missing from the web, push notifications are always high on the list. As of Chrome version 42, the Push API and Notification API are available to developers.

Be sure to read up on ServiceWorkers first, as push notifications rely on them.

Also: looks complicated. A tad too complicated.

Push Notifications on the Open Web →

Fixing the “Connect to iTunes to use Push Notifications” alert in iOS 7.0.3

connect-to-itunes-error

Ever since updating to iOS 7.0.3, my iPhone kept telling me to “Connect to iTunes to use Push Notifications”. Connecting to iTunes did just nothing: the notice kept popping up. Additionally iMessage and FaceTime didn’t work anymore, really annoying.

Above that the notice forced some apps in a loop as an app would lose and regain focus with that dialog showing (Dropbox with a passcode for example would get stuck in such a loop). Not that handy.

To fix this, follow these steps (on your iDevice):

  1. Go to “Settings” → “iTunes & App Store” and log out of your account.
  2. Restart your iDevice.
  3. Go to “Settings” → “iTunes & App Store” and login again.

That should do it (at least it did for me).

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Pushover — Simple mobile notifications for iOS and Android

Little app that is built only to receive notifications on your smartphone. Notifications can be sent from any (non-smartphone) app you build by doing a simple HTTP request. Also works with IFTTT

curl -s \
  -F "token=abc123" \
  -F "user=user123" \
  -F "message=hello world" \
  https://api.pushover.net/1/messages.json

Pushover →