The Future of
Mobile Web App

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

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

{
  “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));
}

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

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

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

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 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