How to create a
Progressive Web App

in 20 minutes

Attila Olah

Service Workers

Background Workers

Offline Enabled

App Manifest

Push Notifications

Building Blocks of PWAs

Add to Home Screen

App Manifest

for installable web apps

{
  "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"
  }]
}

App Manifest

  Describe how the app 

  launch screen should look like 

  behave in standalone mode

Add to Home Screen

proactive install prompt

 Regular add to home screen flow is manually initiated

 • This feature is Chrome only currently

 • You need to pass a few requirements ​

 • Valid app manifest file

 • Page served over https

 • Have at least one service worker registered

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

Add to Home Screen

Service Workers

programmable cache

not Web Workers...

Main purpose: catch & handle network requests

  It doesn't run continuously

 • It responds to events

 • It has its own lifecycle hook

Installing

Error

Activated

Idle

Running

Stopped

 • It has 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

Notifications:

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

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

 • Use cases

 • BackgroundSync task is finished

 • New data arrived and the page is not active

Push Notifications:

 • First implementations appeared (Chrome, Firefox)

 • show the recieved data with the Notification API

 • still in progress, but you can start using it

Background Sync

staying up-to-date

 Keeping cache up-to-date
• Ensure network operations are finished

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

 • With BackroundSync you 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

Background Sync

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

Wait!

Sadly, its not ready, yet...

but it is called progressive!

So start to use these features now...

but have fallbacks as well!

Thanks!

Oláh Attila

dev @ Budacode

Twitter: @magyarsrac

How to create a Progressive Web App in 20 minutes

By magyarsrac

How to create a Progressive Web App in 20 minutes

  • 162

More from magyarsrac