Spotted a bug? Have a great idea? Help us make google.dev great!

Develop progressive web apps

Learn to develop progressive web apps so that you can provide users with app-like experiences in browsers.

 

Intro and Setup

Video Optional

Welcome to the Progressive Web Apps Training course! This video provides a short introduction to the course, giving an overview of what topics and API’s are covered. The format of this course is simple: we show you something, you build stuff, and repeat!

Welcome

Codelab Optional

Get started with Progressive Web Apps by preparing your tools, downloading sample code, and choosing your lessons.

When should you use a PWA?

Video Optional

When should you choose a PWA and when should you take a different path?

Your development cycle

Video Optional

We recommend a specific development cycle when starting work on a PWA.

Make a static site work offline (by hand)

Video Optional

Take your first step in building a PWA by converting a simple site to work offline. You'll also get your first introduction to Lighthouse, a web performance tool created by Google.

Offline Quickstart

Codelab Optional

This walks you through building your first PWA by converting a simple site to work offline.

Install a PWA on the home screen

Video Optional

Adding the PWA's icon to the home screen is one of the easiest features to implement.

How the Service Worker Works

Video Optional

Take a look inside the service worker and discover how it can make an app work offline.

Scripting the Service Worker

Codelab Optional

Most of a PWA's magic comes from a new browser feature called the service worker. You'll learn how to control service workers using Javascript.

Intro to Promises

Video Optional

Web features that use the network or disk run asynchronously: your code starts an operation and is notified when it finishes. But using callbacks and events becomes complicated and hard to debug. Promises solve this problem by wrapping asynchronous code in an easy to use form. The service worker depends on promises, as do other new features such as user notifications.

Promises

Codelab Optional

A hands-on introduction to Promises. Promises wrap asynchronous code in an easy to use form.

Using the Fetch API

Video Optional

How do you make an HTTP call across the web? The old way is XMLHttpRequest—event and callback-based, and not the easiest thing to use. The new way is the 'Fetch' API, which wraps network calls in a promise and has a nice, clean interface. Fetch is also another key tool used by the service worker when intercepting and rewriting network requests.

Fetch API

Codelab Optional

This codelab introduces you to the 'Fetch' API (which wraps network calls in a promise and has a nice, clean interface.)

Advanced Promises

Video Optional

Once you start using Fetch, you may want to do more sophisticated things with promises such as run multiple fetch calls at once.

Debugging Service Workers in Chrome

Video Optional

See how to debug PWAs using the Chrome Developer Tools.

Debugging Service Workers in Firefox

Video Optional

See how to debug PWAs using the Firefox Debugger.

Debugging Service Workers in Safari

Video Optional

See how to debug PWAs in Safari.

Tools for building Progressive Web Apps: Workbox

Video Optional

By now, you've written a service worker and intercepted calls to the network. Let's be honest—it's a lot of boilerplate. With Workbox, you can specify a few options and let it build the service worker control file.

Workbox

Codelab Optional

A hands-on introduction to Workbox. Let it write your service worker automatically!

Gulp Setup

Video Optional

If you use Gulp to manage your build process, you can plug Workbox into Gulp's workflow to update the service worker code automatically.

Gulp setup

Codelab Optional

This walks you through integrating integrate Workbox into Gulp's workflow.

Using Workbox to Manage Your Caches

Video Optional

How to set restrictions on caches in Workbox

Using Workbox with build systems

Video Optional

Workbox works with many build systems, not just Gulp.

When and how to update the cache

Video Optional

You've learned how to intercept file requests in the service worker, and how to store them in a file cache. But by now you're probably wondering how long to hold on to files and when to update them. We'll give you the inside story on how to separate and manage your files according to their expected lifetime.

Caching files with the service worker

Codelab Optional

Practice setting up multiple caches to manage storage efficiently.

Caching strategies

Video Optional

When should you use the cache vs. trying the network first?

Caching user content (social sites)

Video Optional

The special rules for caching user-generated content.

Caching server-generated content (publishing/news sites)

Video Optional

The special rules for caching server-rendered content.

Client-side data for Progressive Web Apps: How to use Cloud Firestore

Video Optional

Progressive Web Apps don't just store files, they also store data. We'll show you how to work with data stored on the client.

Cloud Firestore

Codelab Optional

Practice using Firebase's Cloud Firestore to capture data offline and have it sync when you're online.

Working with live data in the service worker

Video Optional

Sometimes you want a PWA to create or receive live data.

Indexing your PWA (Discoverability & SEO)

Video Optional

A PWA starts with a web page. See how you can make that page appear properly in Google search.

Installing Google Analytics

Video Optional

Google Analytics isn't just for web pages -- can capture and display usage data for web apps, even offline apps. Learn how to make analytics work online and offline.

Incorporating Google Analytics into web applications

Video Optional

How you can Install Google Analytics into a PWA.

Integrating Google Analytics

Codelab Optional

Practice installing Google Analytics and make it work in a PWA.

Authentication for Progressive Web Apps

Video Optional

Using passwords for authentication creates challenges for users and puts app security at risk. We'll show you some useful alternatives.

Implementing OAuth 2 in PWAs

Video Optional

OAuth is the engine behind 'Sign in With Google'. Learn how to use this with PWAs and help your users to log in securely and easily.

Introduction to Web Push & Notifications

Video Optional

Learn how to show notifications, including push messages, inside a Progressive Web App.

Integrating web push

Codelab Optional

Practice showing notifications and push messages.

Display notifications

Video Optional

The notification system has many options. We'll show you how to use them.

Send and receive push messages

Video Optional

A look at the the process of sending and receiving push notifications.

Use VAPID to secure push messages

Video Optional

How to secure push messages across the web.

Implementing the Web Payments API

Video Optional

Accept payments from your PWA

Responsive Design

Codelab Optional

In this bonus module, you'll learn how to build user interfaces that adapt to different screen sizes and usage patterns.

Responsive Images

Codelab Optional

Limiting your PWA data usage is important for mobile users. In this bonus module, you'll learn how to select images automatically based on the screen size and browser capabilities.

IndexedDB API

Codelab Optional

While we recommend Cloud Firestore for new projects, you may want to use the preexisting database in the browser: IndexedDB. In this bonus module, you'll learn how to save and retrieve data from IndexedDB and make it available to the service worker.