Progress thru Web with Android

Andrei Zvonimir Crnkovic

✨ JavaScript Emojineer ✨ @ Infinum

What makes an app progressive?

Responsive

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)

Installable

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
Notification.requestPermission();

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

Offline content

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('cache-example').then(function(cache) {
      return cache.addAll([
        '/style.css',
        '/logo.png',
        '/css/fonts/whatever-v8.woff',
        '/app.js'
        // etc
      ]);
    })
  );
});

https://goo.gl/Aau8rY

Take care and handle:

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

AmbientLightSensor

const sensorReading = AmbientLightLevel.reading;

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

Bluetooth

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

Tools

Webpack

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 - https://goo.gl/b5Z2rT

Material UI

Remote debugging

Lighthouse

https://goo.gl/CyfvSR

Creating a new PWA

https://goo.gl/dZLfhq

https://github.com/developit/preact-cli

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

  • https://pwa.rocks/
  • https://developers.google.com/web/showcase/
  • https://events.withgoogle.com/progressive-web-app-dev-summit/
  • https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb
  • https://github.com/GoogleChrome/airhorn
  • https://developer.android.com/topic/instant-apps/index.html

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.

  • 83
Loading comments...

More from Andrei Zvonimir Crnković