Progressive Web Apps

in 15 minutes

Attila Olah

The obligatory first slide

Hi there!

I am Attila,

I am working at Budacode as a developer,

you can contact me on Twitter via 

We are specialized in building,

 Angular 2 &

Ionic 2 applications,

for the modern web.

Progressive Web apps

Greatest step toward closing the web app gap

• Progressive

• Responsive

• App-like

• Fresh

• Safe

• Discoverable

• Re-engageable

• Installable

• Linkable

• Connectivity-independent

Lets talk about

Service Workers

Background Workers

Offline Enabled

App Mainfest

Push Notifications

Building Blocks of PWAs

Add to Home Screen

App Manifest

for installable web apps

Main purpose: allow user to add the app Home Screen

  Need to be referenced in index(.html)

<link rel="manifest" href="/manifest.json">

 • Main entries

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "./?utm_source=from_home_screen",
  "display": "fullscreen|standalone|minimal-ui|browser",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
​​  "orientation": "portrait-primary",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }]
}

Help for usage

 • Validator: https://manifestvalidator.appspot.com/

 • Icon generators

 http://realfavicongenerator.net/

 http://favicons.io/

Browser Support

Chrome & Opera has support and it is under development in Firefox. It's status in Edge is under consideration and Safari has no public signal.

Add to Home Screen

proactive install promt

Main purpose: proactivly ask the user to add the app to the Home Screen

  Regular add to home screen flow is manually initiated 

 • This feature is Chrome only currently

 • You need to pass a few requirement

 • Valid app manifest

 • Page served over https

 • Have at least one service worker registered

 Site was visited twice, w/ at least 5 min between visits

Service Workers

programmable cache

not Web Workers...

Main purpose: catch & handle network requests

  In doesn't run continuously! 

 • It responds to events

 • It has its own lifecycle hook

Installing

Error

Activated

Idle

Running

Stopped

 • It has its access to the Cache API

 • Two main benefit is Offline experience, and instant
    loading of assets on repeated site visits

 • It cannot access the DOM directly

Resources:

  Interactive in depth tutorial by Jake Archibald
    https://jakearchibald.com/2014/offline-cookbook/#on-user-interaction

 • Google's Service Worker libraies
    https://developers.google.com/web/tools/service-worker-libraries/

 • sw-toolbox is a ready to use set of userful caching
    patterns

 • sw-precache is a build-step to generate service worker
   for the app-shell architecture

(Push) Notifications

re-engage your users

Main purpose: reaching your users outside of the browser tab

showNotification(title, message, action) {

    Notification.requestPermission( permission => {
      if (permission === "granted") {
        navigator.serviceWorker.ready.then( registration => {
          let notification = registration.showNotification(title, {
            icon: '//path/image.png',
            body: message
          });

          notification.onclick = function(event) {
            event.preventDefault();
            event.srcElement.close()
            action && action();
          }
        });
      }
    });
  }

Showing a basic notification:

Usage:

 • Only via Service Workers (so it's usable anytime)

 • The new Notification(title) method is deprecated

 • Trick: you can register an empty service worker as well

 • Best way to notify the user when

 • Your Background sync fetched new data

 • Your web worker of service worker finished a task
    after the user left the page.

Push notifications are a different story

 • but still you will manage them with service workers

 • show the recieved data with the Notification API

Background Sync

staying up-to-date

Main purpose: keeping local data up-to-date, ensure
                           network operations are finished. 

 • Today, while sending data, users cant leave the page

 • With service workers they can

// Register sync in your app

navigator.serviceWorker.ready.then(function(registration) {
  registration.sync.register('sendDataLater').then(function() {
    // yay, we are good!
  }, function() {
    // Houston, we have a problem!
  });
});

// Service Worker
self.addEventListener('sync', function(event) {
  if (event.tag == 'sendDataLater') {
    event.waitUntil(sendAllTheData());
  }
});

 • Periodic sync in development

Wow! This stuff is so cool! Lets use it!

Wait!

Sadly, its not ready, yet...

but it is called progressive!

So start to use these features now...

but implement fallbacks as well!

Thats it, Questions?