The Future of
Mobile Web App

Trần Trọng Thanh

(about.me/trongthanh)

05/2017

Opportunities

internet usage 2009 2016 mobile vs desktop

Internet usage on mobile have surpassed desktop

top app use

73% of mobile usage time spent on 3 top apps

number of app download monthly

Half of mobile users (in US) download 0 apps monthly

Web App vs. Native App Round 1

  • Smaller download size
  • Short time to update and publish
  • More approachable and broader reach via the Web
  • Larger download size
  • Longer time to update and publish
  • Less approachable and narrower reach via app store

Suitable categories for mobile web

  • News and text publishing
  • E-commerce
  • Social network
  • Online management tool
different types of mobile web app
Screenshots from app.ft.com, m.aliexpress.com, flipboard.com

Challenges

“Our biggest mistake was betting too much on HTML5.”

- Mark Zuckerberg, circa 2012

Is it still true now?

ios benchmark 2012 2016

Smartphone's performance is getting a lot better.

*Source: browser.primatelabs.com

However...

percent time spent on mobile apps 2016

Smartphone users spend 10% of time on browser vs. 90% on apps.

Web App vs. Native App Round 2

Native vs web

Web App vs. Native App Round 2

???

  • Quick access (home icon)
  • Full screen UI
  • Access device sensors
  • Native OS sharing UI
  • Push notification
  • Work offline
  • Credentials management
  • Form filling assist
  • Native OS payment UI

Can this be future of Mobile Web App?

Native vs web

Upgrading a Mobile Web App

Vue logo

Vue Shop

Case Study

It's Vue, not V.rohto

Basic Enhancements

  • Responsive web design, mobile friendly UI
  • Mobile first CSS architecture (min-width)
  • Static assets optimization, reduced download size
  • Server side rendering (applicable for SPA)
  • Secured connection with HTTPS

Quick Access

  • W3C standard's manifest.json
  • Change browser theme color
  • Home screen icon and short name
  • Default URL when launched from icon
  • Full screen app
  • Customizable splash screen background
  • Full app name in splash screen
  • Orientation lock

Quick Access

index.html

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#00796b">
manifest.json

{
  “short_name": "Vue Shop",
  "name": "Vue Shop - Mobile Shopping",
  "icons": [
    {
      "src": "assets/logo-144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/logo.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html",
  "theme_color": "#00796b",
  "background_color": "#b2dfdb",
  "display": "standalone",
  "orientation": "portrait"
}

Access device sensors

  • New web APIs allow accessing of device's sensors and peripherals.
  • For e.g: Vue Shop access geolocation API to optimize product listing for users...

navigator.geolocation.getCurrentPosition((position) => {
    const pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
    };

    fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${pos.lat},${pos.lng}&key=${apiKey}`)
        .then(/* Get location address from the result JSON */);
});

Native OS Sharing UI

  • Web Share API* allows OS native UI sharing from web apps.

if (navigator.share) {
    navigator.share({
        title: `${this.item.title} - ${document.title}`,
        text: this.item.description,
        url: window.location.href,
    })
    .then(() => console.log('Successful share'))
    .catch(error => console.log('Error sharing:', error));
}
*Feature hidden behind the flag Experimental Web Platform

Working offline

  • Current web apps depend on different browser caching behavior to allows viewing offline which is inconsistent
  • Application cache is hard to manage and not suitable for dynamic content
  • Unstable and slow Internet connection is very bad UX
Downosaur

Introducing: Service Workers

Service worker model

Service Worker is a fresh new Web standard, and it requires HTTPS.

Working Offline With Service Worker

  • With new Cache API, web apps can be opened as quickly as native ones.
  • Web apps can be used offline reliably
  • Data can be synced in background automatically when device gets Internet.
// register service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', {scope: '/'})
  .then(function(reg) {
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    console.log('Registration failed with ' + error);
  });
}

Native Add to home screen banner

native add to home screen requirement

Web Push Notification

  • Web Push Notification requires Service Worker
  • Like other new API, Push Notificaiton require user's consent
  • Users will still notifications even when browser is quit
  • To avoid being blocked, only request push notifications with engaged users
  • Send Push Notification timely and only when needed
Push notification demo: using Firebase Cloud Messaging

Web Credential Management

  • Web Credential Management API allows quick and easy logins.
  • Combined with modern browser's credentials synchronization, users can login easily on multiple devices.

// basic credential management API
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()

Form input assist

  • HTML5 Form Autofill allows quick form completion via browser's stored form fields

<label for="frmAddressS">Address</label>
<input autocomplete="shipping street-address" name="ship-address" required
       id="frmAddressS" placeholder="123 Any Street">

<label for="frmCityS">City</label>
<input autocomplete="shipping locality" name="ship-city" required
       id="frmCityS" placeholder="New York">

<label for="frmStateS">State</label>
<input autocomplete="shipping region" name="ship-state" required
       id="frmStateS" placeholder="NY">

<label for="frmZipS">Zip</label>
<input autocomplete="shipping postal-code" name="ship-zip" required
       id="frmZipS" placeholder="10011">

<label for="frmCountryS">Country</label>
<input autocomplete="shipping country" name="ship-country" required
       id="frmCountryS" placeholder="USA">
Form auto fill

Form input assist (contd.)

  • Google Maps address auto complete API allows quick address filling with result hinting.

// Create the autocomplete object, restricting the search to geographical location types.
let autoCompleteInput = document.getElementById('search-input');
autocomplete = new google.maps.places.Autocomplete(autoCompleteInput, { types: ['geocode'] });

// When the user selects an address from the dropdown, populate the address fields in the form.
autocomplete.addListener('place_changed', () => {
  let place = autocomplete.getPlace();
  // fill in the address form...
});

Online Payment Assist

  • Web Payment Request API allows secured and reliable payment experience on browsers.
  • Web Payment Request API can be used with Android Pay to further simplify payment process
payment request model

Enter the age of

Progressive Web App

Progressive Web App?

  • Progressive enhancement
  • User-centric experience
  • Fast and reliable like native apps
  • Approachable and convenient like web apps

Mobile Web App in the near future?

  • Deeper PWA integration in Android (Google I/O ’17)
  • WebRTC - p2p data exchange and video conference
  • WebGL - 3D content rendering with HW acceleration
  • WebVR - VR support natively on browsers
  • WebAR - AR support natively on browsers (Google I/O ’17)

 

 

 

The End

Thank You