Introduction to Progressive Web App

Slide 1

Slide 1 text

#pwadevsummit GDG YANGON Progressive Web App Li Jia Li @EyeOfDragonLi Introduction to

Slide 2

Slide 2 text

#pwadevsummit GDG YANGON Native Apps Pros - Easily accessible from home screen - instant loading - Work offline - smooth interactions and animations. - push notifications Cons - installation & update ( time & data usage ) - not easily sharable - dealing with low memory phones - distributing native apps is pain.

Slide 3

Slide 3 text

#pwadevsummit GDG YANGON Web Apps Pros - Cross platform - easily shareable with links - always can accessible to most updated app without any pain of updating the app Cons - Do not work offline - not on your homescreen - can’t do push notifications to your phone

Slide 4

Slide 4 text

#pwadevsummit GDG YANGON Progressive Web App ? - Installable & Sharable via url - work online, offline, or on intermittent, slow connections - instant loading ( with splash screen ) - push notifications - safe : served via HTTPS - smooth animation under 60fps

Slide 5

Slide 5 text

#pwadevsummit GDG YANGON Real Life PWAs https://pwa.rocks/

Slide 6

Slide 6 text

#pwadevsummit GDG YANGON Overview of Progressive Web App

Slide 7

Slide 7 text

#pwadevsummit GDG YANGON App Shell

Slide 8

Slide 8 text

#pwadevsummit GDG YANGON

Slide 9

Slide 9 text

#pwadevsummit GDG YANGON Service Workers

Slide 10

Slide 10 text

#pwadevsummit GDG YANGON

Slide 11

Slide 11 text

#pwadevsummit GDG YANGON

Slide 12

Slide 12 text

#pwadevsummit GDG YANGON Installability and App Manifest

Slide 13

Slide 13 text

#pwadevsummit GDG YANGON manifest.json

Slide 14

Slide 14 text

#pwadevsummit GDG YANGON

Slide 15

Slide 15 text

#pwadevsummit GDG YANGON Push Notifications

Slide 16

Slide 16 text

#pwadevsummit GDG YANGON https://www.youtube.com/watch?v=Z_K8QPQe6oM

Slide 17

Slide 17 text

#pwadevsummit GDG YANGON Learn more about Push Notifications Your first push notifications web app https://codelabs.developers.google.com/codelabs/push-notifications

Slide 18

Slide 18 text

#pwadevsummit GDG YANGON The Future of PWA - Knowing who the user is ( User Authentication ) - Enabling Payments - Connecting with hardware

Slide 19

Slide 19 text

#pwadevsummit GDG YANGON Today Codelabs Your first Progressive Web App https://codelabs.developers.google.com/codelabs/your-first-pwapp Build a Progressive Web App with Firebase, Polymerfire and Polymer Components Codelab https://codelabs.developers.google.com/codelabs/polymer-firebase-pwa