Maxim Salnikov

@webmaxru

Building and deploying a

My App

Mobile platform

2,5B advantages

  • At least two development teams required

  • Existing solutions for cross-platform development are a kind of trade-off

  • App stores started to ban the applications built with templates and constructors

Native apps

}

Expensive to develop

  • About 60% of the applications were never installed (Google Play)

  • 65.5% of the users install 0 (zero) applications per month (USA)

  • Less than 1% of  participants share more than 94% of the revenue on this market (USA, AppStore)

App stores

}

Expensive to acquire new users

What if we try web tech?

Chris Anderson, Wired, 2010

As much as we love the open, unfettered Web, we're abandoning it for simpler, sleeker services [native apps] that just work

The biggest mistake we’ve made as a company is betting on HTML5 over native.

Mark Zuckerberg, 2012

Today's web

  • Constantly improving performance of JavaScript engines

  • Access to devices hardware

  • APIs for authentication & payments

  • Deep integration with operating systems

  • Going beyond online and out of the browsers

}

The state of the web

whatwebcando.today

What is PWA at all?

Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications.

These apps work everywhere and provide several features that give them the same user experience advantages as native apps.

UX advantages?

Smart networking + Offline

Proper app experience

Staying notified

Other cool things

}

Service Worker API

Web App Manifest

works everywhere*

* but not everything**

natively

** use progressive enhancement strategy

Platforms / browsers support

APIs actively used in PWAs

  • Service Worker API

  • Cache API

  • IndexedDB

  • Fetch

  • Clients API

  • Broadcast Channel API

  • Push API

  • Notifications API

  • Local Storage

  • Session Storage

  • XMLHttpRequest

  • DOM

Not available in service worker:

Even more capable web

  • Writable Files API

  • WebHID API

  • Scheduled Task / Notification API

  • Web Share Target API

  • Wake Lock API

  • Cookie Store API

  • User Idle Detection API

  • ...

Project Fugu

Minimum viable PWA

=

+

Application shell

Web App Manifest

Fast, responsive, mobile-first

Served via HTTPS

Let's build an App Shell

My App

  • Define the set of assets required to show the minimum viable UI

Service worker

  • install: put the assets into Cache Storage

  • activate: clear Cache Storage from the previous app version assets

  • fetch: if the asset is in Cache Storage serve it from there. Otherwise — download and serve it (and cache it)

Build time

  • Register service worker the way it does not affect the app loading performance

Website/webapp

Service Worker

Service Worker 101

Logically

Physically

-file(s)

App

Service-worker

Browser/OS

Event-driven worker

Cache

fetch
push
sync

Lifecycle

'install'

Parsed

Installing

Activating

Redundant

'activate'

Waiting

Active

Managing cache

self.addEventListener('install', (event) => {
  
    // Put app's html/js/css to cache

})
self.addEventListener('activate', (event) => {
  
    // Wipe previous version of app files from cache

})

In the real world

  • Can't add opaque responses directly

  • Redirected requests should be managed

  • Always creating a new version of cache and deleting the old one is not optimal

  • Control over cache size is required

  • Cache invalidation for runtime caching is complex

  • ...

Intercepting requests

self.addEventListener('fetch', (event) => {

  if (event.request.url.indexOf('/api') != -1) {
    event.respondWith(
      // Network-First Strategy
    )
  } else {
    event.respondWith(
      // Cache-First Strategy
    )
  }
})

In the real world

  • All kinds of fallbacks needed for the strategies

  • There are more complex strategies like Stale-While-Revalidate

  • Good to have routing

  • Good to have the possibility to provide some extra settings for different resource groups

  • ...

Tools & libraries

  • Implementing complex algorithms

  • Adopting best practices

  • Focusing on YOUR task

  • Following specifications updates

  • Handling edge cases

Tools help with

  • Application shell

  • Runtime caching

  • Replaying failed network requests

  • Offline Google Analytics

  • Broadcasting updates

  • Registration helper

Have our own service worker!

Demo time

Thank you!

Maxim Salnikov

@webmaxru

Questions?

Maxim Salnikov

@webmaxru

Building a Progressive Web Application

By Maxim Salnikov

Building a Progressive Web Application

In part one of this three-part hands-on coding series, we’ll look at why the idea of Progressive Web Apps has become so popular, which APIs are in the game, and where (browsers/platforms) PWAs work. We start by answering these questions and then dive directly into coding a minimum viable PWA to understand the foundations of Service Workers and to make sure that it’s cool to have some helper tools there. Feel free to either just watch, or code along too!

  • 3,360