Google

Mobile Hackathon

17th March, 2017 - Ho Chi Minh city

Wifi connection

Text

slides.com/phattran/ghack17

Network: Google Vietnam Mobile Day 2

Password: 1234567899

 

Network: Google Vietnam Mobile Day

Password: 1234567890

 

Network: Meridien Guess

Username: gev1 - Password: 6433

Share of web traffic

Tricky URLs

😆 oh my telex 😆

Speed and devices

Progressive Web Apps (PWA)

modern web capabilities

to deliver an app-like experience to users

Features

Web app manifest

  • Enables a more native-like presence on the homescreen.
  • Allows the app to be launched in full-screen mode (without a URL bar being present).

Service Worker 

  • Script that runs in the background, separate from your web page.
  • Responds to events, including network requests made from pages it serves.

Service Worker 

  • Powerful for offline caching, also offer significant performance wins in the form of instant load.
  • Needs HTTPS

Push notifications

  • Allow customized, engaging updates, even outside of a tab.
  • Requires both service worker and a Web App manifest

Architecture

How PWA

solves the problems?

Web app manifest

{
  "short_name": "Amazing App",
  "name": "Your Full Amazing App Name",
  "icons": [
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "browser",
  "theme_color": "#123456"
}

manifest.json

<link rel="manifest" href="/manifest.json">

index.html

Service Worker

Register SW

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function() {
    // Success
  }).catch(function() {
    // Fail :(
  });
}

Populate data from cache

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw/',
        '/sw/index.html',
        '/sw/style.css',
        '/sw/app.js',
        '/sw/image-list.js',
        '/sw/logo.jpg',
        ...
      ]);
    })
  );
});

bit.ly/sw-cache-api

Custom response to API

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      return resp || fetch(event.request).then(function(response) {
        caches.open('v1').then(function(cache) {
          cache.put(event.request, response.clone());
        });
        return response;
      });
    }).catch(function() {
      return caches.match('/sw/gallery/your-image.jpg');
    })
  );
});

sw-precache

{
  "staticFileGlobs": [
    "app/css/**.css",
    "app/**.html",
    "app/images/**.*",
    "app/js/**.js"
  ],
  "stripPrefix": "app/",
  "runtimeCaching": [{
    "urlPattern": "/express/style/path/(.*)",
    "handler": "networkFirst"
  }]
}

bit.ly/sw-precache

Website optimization

  • Fewer HTTP calls (combine js & css, use image sprite)
  • Use world-wide CDN providers (Google, Amazon, Cloudflare)
  • Gzip everything
  • CSS on top, JS at bottom
  • Optimize backend response time

Case study

hopamchuan.com

No address bar

Service Worker

Offline cache

PWA Business Impact

  • +50% mobile session increase
  • +60% Average session duration increase
  • +30% increase pages / session

hopamchuan.com

Missions

  • Get to know about Progressive Web Apps technologies.

  • By using Progressive Web Apps technologies within this Hackathon time, enhance mobile user-experience of your web application.

  • Raise website standard in Vietnam and encourage a sharing community among web developers.

Tools : Chrome & Lighthouse

bit.ly/chrome-lighthouse

Rules

  • Local development environment only.
  • 10:00 AM: Collect initial scores.
  • 10:00 AM - 06:30 PM: Hacking time.
  • 06:30 PM: Collect final scores, pick the top 10 teams.
    • 05 teams having the highest scores.
    • 05 teams having the biggest improvements.
  • 07:00 PM: 3-minute team presentation
    (slides if possible).
  • 08:00 PM: Winners announcement:
    • 70% lighthouse score
    • 30% presentation vote

🏆 Prizes 🏆

A 2-day trip to visit Google office for all members of winning teams and meet Google developers in Singapore.

🤔 Q & A 🤔

Resources: 

- Progressive Web Apps: bit.ly/google-pwa

- Website optimization: bit.ly/web-optimize

- Getting started: bit.ly/pwa-getting-started

- Service worker libraries: bit.ly/sw-libs

​- PWA reading list: bit.ly/pwa-reading-list

This slide:

slides.com/phattran/ghack17

👋 Let's start hacking! 👋

Ho Chi Minh city - March 17th, 2016

Google Mobile Hackathon

Quick Recap

Service Worker

vs

App Manifest

Live Website

vs

Local Website

Themes

sw-precache

3-min presentation

Final score collect at: 6:30 pm

10 selected teams have 10 mins to prepare 

Votes

Final score =

70% Lighthouse Score + 30% vote

Google Mobile Hackathon - March 2017

By Phat Tran

Made with Slides.com

Google Mobile Hackathon - March 2017

Opening talk for Vietnam Mobile Day 2017, introducing concepts & implementation instruction of Progressive Web Apps technologies to the community

  • 888

More from Phat Tran