Nico Martin - Progressive Web Apps

#1about 3 minutes

Comparing the open web with native app development

Native apps offer a great user experience but create high maintenance costs for developers, which is a problem the open web can solve.

#2about 1 minute

What are Progressive Web Apps (PWAs)?

PWAs are a new generation of web applications designed to be fast, integrated, reliable, and engaging, combining the best of the web and native apps.

#3about 3 minutes

Using the Web App Manifest for native integration

The Web App Manifest is a JSON file that allows a web app to be added to the home screen and run in a standalone, full-screen mode.

#4about 2 minutes

Designing for offline-first experiences

Treat network connectivity as a progressive enhancement by separating your application into a static app shell and dynamic data for offline use.

#5about 3 minutes

Storing dynamic data with IndexedDB and the IDB library

Use the asynchronous IndexedDB API, simplified with the IDB promise-based wrapper, to store large amounts of dynamic application data in the browser.

#6about 2 minutes

How service workers operate outside the browser tab

A service worker is a special JavaScript file that runs in a separate scope, remains active even when the browser is closed, and has its own event system.

#7about 5 minutes

Implementing caching strategies with service workers and Workbox

Intercept network requests using the service worker's fetch event to serve assets from a cache, and simplify this logic using the Workbox.js library.

#8about 2 minutes

Ensuring data persistence with the Storage API

Use the Persistent Storage API to request that the browser protects your application's cached data and IndexedDB from being automatically cleared.

#9about 5 minutes

How web push notifications work with VAPID

Web push notifications rely on a push service, a service worker to receive messages, and the VAPID protocol to securely identify your application server.

#10about 2 minutes

Best practices for requesting user permissions

Avoid asking for permissions like push notifications on page load and instead provide context to the user to create a better experience.

#11about 6 minutes

Case study: Building a PWA for a refugee camp

A real-world PWA for the Moria refugee camp demonstrates the benefits of offline capability, low entry barrier, and fast release cycles for critical communication.

#12about 3 minutes