Progressive Web Applications

What is PWA?

"Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications"

-Wikipedia

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Discoverable

Re-engageable

Installable

Linkable

+

  • Service worker

  • Web manifest

  • Served over HTTPS

 "Service worker is essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages"

- Google

Webpage

Webpage

Backend

Webpage

Service worker

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Webpage

Service worker

Cache

Backend

Register

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
}

Scope

Lifecycle

Scope

Scope

Default

 

scalac.io/app/sw.js

Scope

Default

 

scalac.io/app/sw.js

./app

 

scalac.io/app

Scope

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {
    scope: '/app/'
  });
}

Lifecycle

Lifecycle

var cacheName = 'myCache';
var filesToCache = [
    '/',
    '/style.css',
];

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(filesToCache);
        })
    );
});

Lifecycle

self.addEventListener('fetch', function(e) {
    e.respondWith(
        caches.match(e.request)
            .then(function (response) {
                return response || fetch(e.request);
        })
    );
});

Browser support

Connectivity independent

Fresh

Discoverable

Re-engageable

"The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience"

- Mozilla

{
  "name": "Vue Rx Presentation",
  "short_name": "Vue Rx",
  "icons": [
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Connectivity independent

Fresh

Discoverable

Re-engageable

Installable

App-like

Service workers need to be served over HTTPS

Connectivity independent

Fresh

Discoverable

Re-engageable

Installable

App-like

Safe