- Now and Future -

GDG DevFest Tokyo 2018

Takanori Oki

Self-Introduction

  • Takanori Oki / @takanorip
  • Frontend Developer
  • Nuxt.js, Polymer, React, etc...
  • Polymer Japan Translation Team
  • I love webfonts

Table of Contents

  • What are PWA?
  • Code Sample
  • Future
  • Other Notes

What are
PWA?

Progressive Web Apps

  • A web application that provides UX like a
    native application
  • Based on "Progressive Enhancement"
  • A radically improved user experience

Progressive Enhancement

A design philosophy that centers around providing a baseline of essential content and functionality to as many users as possible, while at the same time going further and delivering the best possible experience only to users of the most modern browsers that can run all the required code.

MDN

App

Old Browser

Latest Browser

Minimum

functions

Maximum
functions

Features

Reliable

Fast

Engaging

Integrated

Fast

Load Fast, feel fast.

After 3s , 53% users leave sites.

Integrated

PWA is able to behave in the same way as other apps.

For example, the Payment Request API

Reliable

Eliminate the dependence on the network

and

Work always.

Engaging

Installable,

Push notification,

Immersive full screen experience

Comparison

with native apps

PWA

  • Work Offline
  • Installable without
    an app store
  • Discoverable
  • Lightweight
  • Push Notification (limited)
  • Can use sensors (limited)
  • Safe (HTTPS)

Native Apps

  • Work Offline
  • Push Notification
  • Can use advanced sensors
  • Can do High-load processing
  • Can use OS-provided function

Who is the target of PWA?

loyalty

Native Apps

 Number of customers

Web

??

loyalty

 Number of customers

Web

PWA

Functions of PWA

Service Workers

Offline

Support

Push

Notification

Add Icon to

Home Screen

background

sync

Web App Manifest

Browser Support

Add to Home Screen
Service Workers
Push Notifications
Credential manegement API
Payment Request API

Notes

  • iOS Safari don't support Push notification, Background sync, A2HS banner
  • Attention required "PWA on iOS"

Progressive Web App is...

  • Progressive
  • Responsive
  • Connectivity independent
  • App-like
  • Fresh 
  • Safe
  • Discoverable
  • Re-engageable
  • Installable
  • Linkable

CODE
Sample

Basic

1. Register ServiceWorker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js', {
      scope: '/',
    });
  });
}

You write this code into

index.html or any External JavaScript File

2. Add sw-precache-config.js

module.exports = {
  staticFileGlobs: [
    'manifest.json',
    'src/**/*',
  ],
  runtimeCaching: [
    {
      urlPattern: /\/@webcomponents\/webcomponentsjs\//,
      handler: 'fastest'
    },
    {
      urlPattern: /^https:\/\/fonts.gstatic.com\//,
      handler: 'fastest'
    }
  ]
};

3. Add manifest.json

<link rel="manifest" href="/manifest.json">
{
  "name": "My App",
  "short_name": "My App",
  "description": "My App description",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Completed !

Progressive Web Apps Checklist

https://developers.google.com/web/progressive-web-apps/checklist

How to Build PWA

with

Web Components

PWA Starter Kit

https://github.com/Polymer/pwa-starter-kit

What's in the kit?

  • PWA

  • LitElement

  • Redux

  • PRPL

  • pwa-helpers

DEMO

pwa-helpers

  • https://github.com/Polymer/pwa-helpers

  • Small helper methods or mixins to help build a PWA

  • This contains Basic helpers, Test helpers and
    Redux helpers

  • network.js

    • Calls a callback whenever the network connectivity of the app changes.

import { installOfflineWatcher } 
    from '../node_modules/pwa-helpers/network.js';

installOfflineWatcher((offline) => {
  console.log(offline ? ' offline' : 'online');
});
import { installMediaQueryWatcher } 
    from '../node_modules/pwa-helpers/media-query.js';

installMediaQueryWatcher(`(min-width: 600px)`, (matches) => {
  console.log(matches ? 'wide screen' : 'narrow sreen');
});
  • media-query.js

    • Calls a callback whenever a media-query matches in response to the viewport size changing.

Future of
PWA

Progressive
Web Apps

Web Fundamentals

"Your app don't work offline??
And can not install??
Are you serious?"

PWA will not replace

all native apps.
They will be separated.

Native Apps

PWA

Load

Depend on Apple

Other
Notes

Push Notification

DO NOT
DEMAND PERMISSIONS FOR NOTIFICATION
ON PAGE LOAD

If blocked,
Apps can't request permission again.

We should think
the story that user allow push notifications.

Safari

iOS Safari can't share credentials between PWA and Browser.

So, sometimes, Users can't login...

Design

PWA need to be designed as
native apps.

design for...

  • When offline
  • Without browser's back button
  • Splash screen
  • and so on...

Don't use
Full-screen view
without thinking!!

Conclusion

Let's make PWA and add FIRE experiences

Thank you!

Made with Slides.com