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
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!
Get started with Progressive Web Apps by preparing your tools, downloading sample code, and choosing your lessons.
When should you use a PWA?
When should you choose a PWA and when should you take a different path?
Your development cycle
We recommend a specific development cycle when starting work on a PWA.
Make a static site work offline (by hand)
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.
This walks you through building your first PWA by converting a simple site to work offline.
Install a PWA on the home screen
Adding the PWA's icon to the home screen is one of the easiest features to implement.
How the Service Worker Works
Take a look inside the service worker and discover how it can make an app work offline.
Scripting the Service Worker
Intro to Promises
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.
A hands-on introduction to Promises. Promises wrap asynchronous code in an easy to use form.
Using the Fetch API
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.
This codelab introduces you to the 'Fetch' API (which wraps network calls in a promise and has a nice, clean interface.)
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
See how to debug PWAs using the Chrome Developer Tools.
Debugging Service Workers in Firefox
See how to debug PWAs using the Firefox Debugger.
Debugging Service Workers in Safari
See how to debug PWAs in Safari.
Tools for building Progressive Web Apps: Workbox
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.
A hands-on introduction to Workbox. Let it write your service worker automatically!
If you use Gulp to manage your build process, you can plug Workbox into Gulp's workflow to update the service worker code automatically.
This walks you through integrating integrate Workbox into Gulp's workflow.
Using Workbox to Manage Your Caches
How to set restrictions on caches in Workbox
Using Workbox with build systems
Workbox works with many build systems, not just Gulp.
When and how to update the cache
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
Practice setting up multiple caches to manage storage efficiently.
When should you use the cache vs. trying the network first?
Caching user content (social sites)
The special rules for caching user-generated content.
Caching server-generated content (publishing/news sites)
The special rules for caching server-rendered content.
Client-side data for Progressive Web Apps: How to use Cloud Firestore
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.
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
Sometimes you want a PWA to create or receive live data.
Indexing your PWA (Discoverability & SEO)
A PWA starts with a web page. See how you can make that page appear properly in Google search.
Installing Google Analytics
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
How you can Install Google Analytics into a PWA.
Integrating Google Analytics
Practice installing Google Analytics and make it work in a PWA.
Authentication for Progressive Web Apps
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
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
Learn how to show notifications, including push messages, inside a Progressive Web App.
Integrating web push
Practice showing notifications and push messages.
The notification system has many options. We'll show you how to use them.
Send and receive push messages
A look at the the process of sending and receiving push notifications.
Use VAPID to secure push messages
How to secure push messages across the web.
Implementing the Web Payments API
Accept payments from your PWA
In this bonus module, you'll learn how to build user interfaces that adapt to different screen sizes and usage patterns.
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.
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.