Introduction to Progressive Web App

Progressive web apps radically is better web experience. Why better web experience?

because:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

In this presentation, I would like to show how to make a progressive web apps using Service worker to handle offline situation.

Transcript

1. Introduction to Progressive Web Apps Gunawan 16 Jun 2017
2. Our Agenda PWA Introduction Service Worker Introduction How to Q & A Demo
3. Progressive Web Apps: Radically better web experiences / Reliable Fast Engaging
4. PWA Characteristics Progressive enhancement used throughout Progressive Easily discovered by search engines Discoverable It’s the web, linkable by definition Linkable UI fits device’s form factor and screen size Responsive Looks & interacts like a native app App-like
5. PWA Characteristics Offline-first & cache support via service workers Connectivity Independent Engage users through push notifications Re-engageable Install to device’s home screen, run in fullscreen Installable Always get newest data from server Fresh Always served over HTTPS Secure
6. PWA Characteristics Zero steps barrier, Just Use It! Low Friction Uses web technologies, HTML, JavaScript, and CSS Just Web Smooth navigations keep the experience silky smooth Fast With service workers at the heart Instant Loading Many PWA features still in labs, yet to come Shiny Future
7. Service Worker: At the core of Progressive Web Apps comes Service Workers
8. What’s a Service Worker A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future service workers will support other things like periodic sync or geofencing. The core features discussed here is the ability to intercept and handle network requests, including programmatically managing a cache of responses.
9. Service Worker Lifecycle Events: Install, Activate, Fetch
10. Service Worker Lifecycle Service Worker Install Event
11. Service Worker Lifecycle Service Worker Active Event
12. Service Worker Lifecycle Service Worker Request Interception
13. How to: Install, activate, cached, offline handling and push notification
14. Register service worker Service Worker Register service worker
15. Install and cached Notes: Once the cache is open, we can then call cache.addAll(), which takes a list of URLs, then fetches them from the server and adds the response to the cache. Unfortunately, cache.addAll() is atomic, if any of the files fail, the entire cache step fails! Service Worker Install and cached
16. Remove old cached file and activate new service worker Service Worker Remove old cached file and activate new service worker
17. Retrieve from the cache (offline strategy) Service Worker serve the response from the cache
18. Register ‘PushManager’ Service Worker push notification
19. Push the notification Service Worker push notification
20. Demo Pomodoro timer https://mypomodoro-7f011.firebaseapp.com/
21. Thank You