Live version of slide deck

https://slides.com/capouch/pwa/live

Progressive Web 

Applications

Brian Capouch

brianc@palaver.net

Danilo Zekovic

danilozeka93@gmail.com

Warning:

This is experimental technology

Game Plan:

• Overview of basic concepts
• A look at critical components
• Hands-on demonstrations 

What is a PWA?

• A website with "special sauce"
• Goal is more "appy" user experience
  • Proxy-like capability
  • Installs to device homescreen
  • Servers can "push" notifications

The special sauce

• It is called a service worker
• Installs itself into the browser
• Maintains a local resource cache
• Intercepts web fetch requests
• Receives push notifications

Service Worker

• A module of JavaScript code
• Cannot access the DOM!!
• Runs independently of the page that installed it.
• Responds to a variety of events

PWA Requirements

• Must run over HTTPS
• A manifest file is required
• Service workers follow "lifecycle" rules
  • Activate on second visit to site

Caching

• Service workers have dedicated, named caches
• Caches never expire
• They implement the three basic functions
  • Store
  • Retrieve
  • Remove

Push Notifications

• Complex in conception and execution
• User must explicitly allow notifications
• Client can subscribe/unsubscribe at will
• Client must possess VAPID key
• Subscription is to browser, not server

Notifications, con't

• Client must send subscription to server
• Server does not send notification!!
  • Messaging server handles actual push
  • Messaging server "belongs" to browser
• Subscriptions technically never expire

Push-NotifyEvent flow:

1. User chooses to allow notifications
2. Client, using VAPID key, requests subscription
3. Client informs server of subscription details
4. Site administrator invokes push-notify function
5. Suscription, key pair, payload sent to messaging server
6. Messaging server delivers notification to service worker
7. Service worker logic notifies user of notification

Resource Links

• Demo Repo on github
• Service Works Resource Page
• Service Workers 101 - excellent graphics!
• Google PWA training course
• Google Web Apps Gitbook

Live Demo Time!!

https://github.com/danilo-zekovic/pwa

We will show:

• Service worker "proxy caching"
• Generating VAPID and SSL
• Subscribing 
• Let's try a push notification

Service worker code to implement proxy cache - ~/public/sw.js:21

self.addEventListener('fetch', function(event) {
  console.log('SW Intercepting: ' + event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // Cache hit - return response
      //return response || fetch(event.request);
      if (response){
        console.log("Returning cached value for: " + event.request.url);
        return response;
      }
      // No hit; fetch resource
      return fetch(event.request);
    })
  );
});

~/app/components/views/Subscribe.js:113

// Service routines to handle subscription activities
function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');
    updateSubscriptionOnServer(subscription);
    isSubscribed = true;
  })
  .catch(function(err) {
    console.log('Failed to subscribe the user: ', err);
  });
}

Routine to send push notification: ~/server/routes.js:25

const pushOptions = {
        vapidDetails: {
          subject: 'mailto:' + vapidKeys.EMAIL,
          publicKey: vapidKeys.PUBLIC_KEY,
          privateKey: vapidKeys.PRIVATE_KEY
        },
      }

      webPush.sendNotification(
        subscription,
        payload,
        pushOptions
      )

Show the user the notification message - ~/public/sw.js:38

// Copied from https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/good-notification
self.addEventListener('push', event => {
  let thisMessage = event.data.text()
    console.log("We got this message: " + thisMessage)
    console.log('[Service Worker] Push Received.');
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

    const title = 'PWA';
    const options = {
      body: thisMessage,
      // We didn't implement these pieces
      icon: 'images/icon.png',
      badge: 'images/badge.png'
    };

    event.waitUntil(self.registration.showNotification(title, options));
  })

https://www.oscon-pwa.net