PROGRESSIVE WEB APP (INTRODUCTION) Lai Weng Han (Johnson) - - PowerPoint PPT Presentation

▶

Aug 12, 2023 115 likes •614 views

PROGRESSIVE WEB APP (INTRODUCTION) Lai Weng Han (Johnson) https://pwa-web.wenghan.me https://pwa-web.wenghan.me https://pwa-web.wenghan.me https://pwa-web.wenghan.me UTIL https://whatsapp.surge.sh https://pwa-web.wenghan.me OPEN DOTA

SLIDE 1

PROGRESSIVE WEB APP (INTRODUCTION)

Lai Weng Han (Johnson)

https://pwa-web.wenghan.me

SLIDE 2

https://pwa-web.wenghan.me

SLIDE 3

https://pwa-web.wenghan.me

SLIDE 4

https://pwa-web.wenghan.me

SLIDE 5

UTIL

https://whatsapp.surge.sh https://pwa-web.wenghan.me

SLIDE 6

OPEN DOTA

https://opendota.com https://pwa-web.wenghan.me

SLIDE 7

https://www.wenghan.me https://pwa-web.wenghan.me

SLIDE 8

WHAT IS PROGRESSIVE WEB APP?

https://pwa-web.wenghan.me

SLIDE 9

–Wikipedia

“a term used to denote web applications that use the latest web technologies. ”

https://pwa-web.wenghan.me

SLIDE 10

–Ionic Framework

“a web app that uses modern web capabilities to deliver an app-like experience to users.”

https://pwa-web.wenghan.me

SLIDE 11

–My Definition

“a couple of modern web features that you can add to any existing web app, to further enhance UX.”

https://pwa-web.wenghan.me

SLIDE 12

PROGRESSIVE WEB APP

Progressive Responsive Work Offline App-Like Fresh Safe Discoverable Re-Engageable Durable Linkable

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

SLIDE 13

https://pwa-web.wenghan.me

SLIDE 14

Service Worker (Caching)

https://pwa-web.wenghan.me

SLIDE 15

SERVICE WORKER

https://pwa-web.wenghan.me

SLIDE 16

INSTALLING

Mainly to do Caching related
Static Caching

https://pwa-web.wenghan.me

SLIDE 17

ACTIVATING

After Installing
Delete Old Cache

https://pwa-web.wenghan.me

SLIDE 18

FETCH EVENT

Fetch is replacement of AJAX Fetching Data in JSON / Images / Fonts / CSS

https://pwa-web.wenghan.me

SLIDE 19

Caching Strategy

THE OFFLINE COOKBOOK

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ https://pwa-web.wenghan.me

SLIDE 20

INSTALL EVENT

On install

as a dependency
CSS, Images, fonts,

JS Templates

Cache Service Worker ACTIVATION EVENT https://pwa-web.wenghan.me

SLIDE 21

INSTALL EVENT

On install

not as a dependency

Cache Service Worker ACTIVATION EVENT https://pwa-web.wenghan.me

SLIDE 22

INSTALL EVENT

On Activate

as a dependency
CSS, Images, fonts,

JS Templates

Cache Service Worker ACTIVATION EVENT Old Cache v1.1 v1.0 https://pwa-web.wenghan.me

SLIDE 23

CLICK EVENT Cache

On User Interaction

https://pwa-web.wenghan.me

SLIDE 24

MY STRATEGY

Static Caching Image / Video Dynamic Caching Fonts and Framework Fetch for Dynamic Data (JSON)

INSTALL EVENT Cache Service Worker ACTIVATION EVENT v1.1 Old Cache v1.0 FETCH EVENT Cache v1.1 https://pwa-web.wenghan.me

SLIDE 25

DEMO Caching

https://pwa-web.wenghan.me https://pwa-web.wenghan.me

SLIDE 26

BACKGROUND SYNC

https://pwa-web.wenghan.me

SLIDE 27

https://pwa-web.wenghan.me

SLIDE 28

S

https://pwa-web.wenghan.me

SLIDE 29

ADD TO HOMESCREEN

https://pwa-web.wenghan.me

SLIDE 30

https://pwa-web.wenghan.me

SLIDE 31

REQUIREMENT

Service Worker Registered Serve over HTTPS manifest.json Minimum Benchmark

https://pwa-web.wenghan.me

SLIDE 32

manifest.json

Meta Tag for Website Declare how the app look like as icon

Orientation. Start url and more!

MANIFEST

https://pwa-web.wenghan.me

SLIDE 33

index.html or any html https://pwa-web.wenghan.me

SLIDE 34

Minimum Benchmark “based on time and number of visits”

https://developers.google.com/web/fundamentals/app-install-banners/ https://pwa-web.wenghan.me

SLIDE 35

JUST IN CASE

https://barcamp.surge.sh https://barcamp1.surge.sh https://barcamp2.surge.sh https://barcamp3.surge.sh

https://pwa-web.wenghan.me https://pwa-web.wenghan.me

SLIDE 36

DEMO ADD TO HOMESCREEN

https://pwa-web.wenghan.me

SLIDE 37

https://pwa-web.wenghan.me

SLIDE 38

https://pwa-web.wenghan.me

SLIDE 39

Push notification

https://pwa-web.wenghan.me

SLIDE 40

User have to accept to make Push Notification works. https://pwa-web.wenghan.me

SLIDE 41

SEND TO BACKEND

VAPID KEY

https://pwa-web.wenghan.me

SLIDE 42

Push notification

https://pwa-web.wenghan.me

SLIDE 43

https://pwa-web.wenghan.me

SLIDE 44

DEMO PUSH NOTIFICATION

https://barcamp.surge.sh https://pwa-web.wenghan.me

SLIDE 45

DEMO OTHER COOL STUFF

https://barcamp.surge.sh https://pwa-web.wenghan.me

SLIDE 46

https://developers.google.com/web/fundamentals/payments/ https://pwa-web.wenghan.me

PAYMENT REQUEST API

SLIDE 47

https://www.pwastats.com https://pwa-web.wenghan.me

SLIDE 48

https://pwa-web.wenghan.me