Progress thru Web with Android

Andrei Zvonimir Crnkovic

✨ JavaScript Emojineer ✨ @ Infinum

What makes an app progressive?


play nice on all devices (mobile, tablet, and desktop)

Offline first

take care that user can access the bulk of the app without a constant connection

App like

make it feel like an app (material UI components, browser customization)


users can have your app as an icon on their
home screen

How do we do it?

Primary ingredients

Service Worker API

Web app manifest

What can we do?

Push and normal notifications

// request premissions

// register the subscription to push notifications
    .subscribe((subscription) => /* send to server */);

Offline content

self.addEventListener('install', function(event) {
  event.waitUntil('cache-example').then(function(cache) {
      return cache.addAll([
        // etc

Take care and handle:

  • adding new files to cache
  • removing old files from the cache
  • updating files in the cache


const sensorReading = AmbientLightLevel.reading;

if (sensorReading.illuminance > 0) {
    /* switch to light theme */
} else {
    /* switch to dark theme */


const options = {
  filters: [
    {services: ['heart_rate']},
    {services: [0x1802, 0x1803]},
    {services: ['c48e6067-5295-48d3-8d5c-0395f61792b1']},
    {name: 'ExampleName'},
    {namePrefix: 'Prefix'}
  optionalServices: ['battery_service']

navigator.bluetooth.requestDevice(options).then(function(device) {
  // Do something with the device.

Web App Install Banners

You need:


  • full and compliant
    manifest.json file
  • have a service worker
    (event an empty one)
  • be served over HTTPS
  • have a user visit your
    page at least twice



Webpack plugins and loaders

  • NekR/offline-plugin

    will do all of your cache things automagically
    (Webpack will handle fingerprinting files)
  • bringking/manifest-loader

    will handle fingerprinted icons and output a file to
    a correct location
  • Code splitting -

Material UI

Remote debugging


Creating a new PWA

Where do PWA fit in?

Increased number of users (104%)


74% longer stay on the page

23% increase in mobile search users who return within 7 days


88% improvement in load time for AMP content versus traditional mobile web

65% increase in pages per session


75% increase in Tweets sent


20% decrease in bounce rate

But they will never replace native apps

More links and interesting stuff to read and try


Andrei Zvonimir Crnkovic


JavaScript Emojineer @ Infinum

Organizer @ Infinum JavaScript Talks


Hit me up on Twitter - @andreicek.

Progress thru Web with Android

By Andrei Zvonimir Crnković

Progress thru Web with Android

A quick overview of what PWAs can do and how do they fit in the current app ecosystem.

  • 166
Loading comments...

More from Andrei Zvonimir Crnković