Introduction to Progressive Web App

Introduction to Progressive Web

AppsBINHBV

Why do developers need a native app?

• Performance• Offline access• Periodic background processing • Notifications• Sensors• OS-specific features

Progressive Web App areA new way to deliver amazing user experiences on the web.

• Reliable - Load instantly and works on flaky networks .• Fast - Smooth animation, scrolling and nav.• Engaging - Feel like a natural app on the device, with an

immersive user experience.• On the home screen, no URL bar, icons, splash • Re-engaging with push notifications

First progressive web app• Run demo on new Incognito window

(Any registrations and caches created from within an Incognito window will be cleared out once that window is closed)• Run again with real device.• Chrome will prompt user Add to HomeScreen

(app Installable).

Prerequisites1. PWAs can work across browsers

2. Security – HTTPS

Service worker

Introduction about Service Woker

A service worker is like a client-side proxy, written in JavaScript and puts you in control of the cache and how to respond to resource requests.

Life cycleService worker

Features

• Offline• Push• Background Sync • ….

Service worker

Serving suggestions - responding to requests

• Cache only• Network only• Cached first• Network first• Cache then network• …

Cache only

Tools

• Lighthouse (demo use tool to check) 

Q&A

Documents

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

developers.google.com/web/fundamentals/getting-started/primers/service-workers