for wordpress? why progressive apps · why progressive apps for wordpress? dinosaur game. history...

WHY PROGRESSIVE APPS FOR WORDPRESS?

DINOSAUR GAME

History of Software distribution

Difference Engine

CARTRIDGES & CASSETTES

FLOPPY DISCS, CDS & DVDS

USAGE TREND ONMOBILE WEB VS. MOBILE APP

●●●●

HOW CAN WE GET BOTH?

●

●

WHAT ARE PROGRESSIVE WEB APPS?

EngagingReliable

Fast

●

●

How do you use your App?

Need for PWA?

NATIVE APPS VS. PWA

●

●

●

●

●

●

●

●

●

●

●

●

●

●

●

FEATURES OF PWA

BUILDING A PWA

STEP 1: Create a Web App Manifest

●

●

WHAT IS A WEB APP MANIFEST?

●●●●

WHAT IS A WEB APP MANIFEST?

Home screen, launcher etc

App install prompt

Icons used for: Home screen, App launcher,Task Switcher,Splash Screen

…

Service Workers

WHAT ARE SERVICE WORKERS?

SERVICE WORKERS

Service Worker Lifecycle

Register aService Worker

Add filesto Cache

Cache

DeletePrevious Cache

3 phases of Service Worker Lifecycle

STEP 2: REGISTER A SERVICE WORKER( register )

STEP 3: ADD FILES TO CACHE ( install )

STEP 4: Delete previous cache ( activate )

Service Worker Lifecycle

Service Worker, Manifest and Cache

Once the SW is active, itHas full control over pages.

It can now handle events such as:

1. Fetch2. Push 3. Sync

STEP 5: FETCH DATA FROM CACHE ( fetch )

Fetch event

Fetch event

STEP 6: ADD A CUSTOM ADD TO HOME SCREEN

Lighthouse Score - Performance

Lighthouse Score - Performance

PWA Plugins for WordPress

Super PWA

Browser Compatibility

Browser Compatibility

Browser Compatibility

Popular PWAs

Popular PWAs

wp-decoupled

References

Backend FrontendAPI