Maxim Salnikov

@webmaxru

Is a New

Cross-Platform Development

Era Coming?

 

Is there a chance for the web to become a truly universal app platform?

I want to believe

Maxim Salnikov

@webmaxru

  • Google Dev Expert, Microsoft MVP

  • PWA Oslo / PWA London meetups, PWA slack organizer

  • Mobile Era / ngVikings conferences organizer

Products from the future

UI Engineer at ForgeRock

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

After all, what is PWA?

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.

Cross-platform?

Browser

Desktop

Mobile

Flagged

OS

#YearOfPWA

UX advantages?

Smart networking + Offline

Proper app experience

Staying notified

Other cool things

}

Service Worker

API

Web App Manifest

Predictable caching

Postpone networking while offline

Receiving and showing notifications

Service Worker API

Is there anything REALLY new?

Adding payment methods JIT

Full-scale offline mode

Networking optimizations

install, activate, fetch, backgroundfetchsuccess, backgroundfetchfail, backgroundfetchclick
sync
push, notificationclick
paymentrequest

Audience VS Loyalty

For the developers

  • Expressive language

  • Powerful tooling

  • Huge community

Stack Overflow Developer Survey 2018

69,8%

JS-to-Native frameworks

... will not be needed

Frameworks

  • sw-precache / sw-toolbox

  • Workbox

  • offline-plugin for Webpack

  • PWABuilder.com

  • create-react-app

  • preact-cli

  • polymer-cli

  • vue-cli

  • angular-cli

Builders

  • Lighthouse

  • Webhint

Audit / Linting

App shell

Runtime caching

Offline GA

Replay failed requests

Broadcast updates

Build integrations

Possibility to extend your own service worker instead of using generated one

Manifest checker & generator

Service worker builder

Manifest icons generator

Generating the projects you need to build native apps for the stores

npm install -g hint

hint https://airhorner.com
npm install -g lighthouse

lighthouse https://airhorner.com

PWA "Store"

Challenges?

Breaking changes (minor and major)

Platforms / browsers support

Support: detailed

Web API Confluence

Lack of the roadmap

Align the PWA efforts

Success stories

  • 3% of size of Android version

  • 70% data usage reduction 

  • 65% increase in pages per session

  • 75% increase in tweets sent

Twitter Lite

  • The core app is only 50k gzipped and takes less than 3 seconds to load on 2G networks.

m.uber

  • 17% increase in conversions

  • 8% increase in conversion rates on recovered carts via Push Notifications

Lancome

  • Starbucks

  • Tinder

  • Google Maps & Search

  • AliExpress

  • Instagram

  • Pinterest

  • Forbes

  • ...

Many more...

Impressive numbers

Future

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

Background fetch

  • Fetches (requests & responses) are alive after user closes all windows & worker to the origin

  • Browser/OS shows UI to indicate the progress of the fetch, and allow the user to pause/abort

  • Dealing with poor connectivity by pausing/resuming the download/upload

  • App has an access to the fetched resources and to the status/progress of the fetch 

Just blogged!

Payment handler

  • A helper for Payment Request API specifically for the web payment apps

  • Registers some payment instruments (card payments, crypto-currency payments, bank transfers, etc)

  • On payment request user agent computes a list of candidate payment handlers, comparing the payment methods accepted by the merchant with those supported by registered payment handlers

Gartner:

PWA will have replaced 50% of general-purpose, consumer-facing mobile apps [by 2020].

Forrester:

The world will spend

$1 trillion by 2021 reinventing the web to make it mobile-first

 

Maxim:

Web application

Mobile

application

Desktop

application

Progressive

web app

  • 1800+ developers

  • Major browsers/frameworks/libs devs

Thank you!

@webmaxru

Maxim Salnikov

Questions?

Is a New Cross-Platform Development Era Coming?

By Maxim Salnikov

Is a New Cross-Platform Development Era Coming?

A single codebase for the main mobile platforms applications is a Holy Grail for developers. What could be the real unifying factor for app platforms we have now, both mobile, desktop and web-based? Right! Progressive web apps are gaining momentum. Is this a real new cross-platform silver bullet?

  • 134
Loading comments...

More from Maxim Salnikov