Progressive Web Apps (PWA) - The Complete Guide

Let's get started with one of the core features: The App Manifest!

Why is it interesting to use to have an installable app? What does that actually mean? Let's find out in this lecture.

With the manifest set up, it's time to add it to our application and make sure it loads in our running app.

Which properties may we actually configure in our web app manifest? This lecture takes a closer look.

Now that we know which properties we may use, let's use them! In this lecture, we'll explore how to configure our web app manifest.

Which browser do support our web app manifest? That's of course an important question and one we'll dive into this lecture.

When working with PWAs, you definitely want to make your life easier. We'll do this with the help of the Chrome developer tools. Let's dive into them in this lecture.

We're building an app which should behave great on mobile apps. We need a mobile device! Learn how to quickly set one up with the Android simulator in this lecture.

We started a virtual device - this article explains all details about how to do that and dives into how you may prepare your virtual device for the rest of this course.

The cool thing about the web app manifest is, that it allows us to install our application on a real device. Let's do that in this lecture!

The web manifest isn't understood by all browsers. We can help Safari as this lecture shows.

Just as Safari needed some extra help, this lecture explains how you get your app to work correctly on Internet Explorer, too.

Let me wrap this module up and summarize what we learned.

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Let's enter the realm of service workers and learn how to use them!

Why do we need service workers to begin with? This lecture takes a closer look.

Service Worker support various events - let's get an overview over the most important/ relevant ones.

Service Workers follow a certain lifecycle when we register them on a page. Learn more about that cycle in this lecture.

Obviously, you need to know which Browser even support service workers before using them. This lecture explores browser support.

You know the basics about service workers, but we haven't worked with any yet. Time to change that!

Let's start using our service worker and register some events. This will also lead us to some important point we have to discuss.

What does "fetch" actually mean/ do? Let's dive into it and understand more about this key event listener in this lecture.

Thus far, we had a look at the "install" and "activate" events. Let's now also dive into other events we can listen to - namely the "fetch" event.

Don't miss this lecture!

Let's go back to that App Install Banner and see how we can get it to show up.

Learn how to use chrome to remotely debug your Android devices.

Time to see that App Install Banner in Action - on a real device!

The best thing about the app install banner is that you can fully control when it's getting displayed. At least as long as the base requirements are met. Let's dive into that in this lecture.

Let me wrap this module up and summarize what we learned thus far.

Service Workers are a vast topic - in this lecture, you'll find some FAQs about them.

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Let me introduce you to this module and what you're going to learn in it!

To understand Promises, you need to understand the problem they solve. Let's dive into that in this lecture.

Let's dive into the basics about Promises.

Promises simply promise us a response. That can also be an error! Learn how to reject promises.

We're already using Promises in our project! Let's have a look at some examples.

Now that we had a look at Promises, let's dive into Fetch, another core API we'll use in this course.

We're not limited to using Fetch for getting data - we can also use it to send data via POST request, as strange as that might sound. Learn more in this lecture!

Fetch also allows you to work with CORS responses. Learn more in this lecture.

Now that we had a closer look at Fetch, let's see how it compares to traditional Ajax requests.

Older browser don't support Promises and Fetch. That's no issue though, we can use polyfills to fix that. So let's do that!

Now that we know more about the Fetch API, let's come back how Fetch interacts with service workers.

Let me summarize this module and wrap up what we learned.

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Let me introduce you to this module and to what you'll learn in it!

Let's start with the basics: Why do we need Caching? Why would it be interesting to have our app run without an internet connection?

Now that we know why caching is interesting, let's dive into the Cache API in this lecture.

Caching is interesting but where (in which browsers) can we use it? This lecture explores your options.

Let's dive into caching with service workers! For that, we need to adjust our course project. So let's do that now!

Of course, we want to cache the right items. How do we identify them? Let's dive into this question in this lecture.

Let's start with "static caching" or "precaching". What is that and how does it work? Well, let's dive into it!

With items being stored in cache, we of course also want to retrieve them from there when the time comes. Let's explore how that works.

Thus far, we only put one item onto the cache. Time to change that in this lecture!

Adding files to the cache one-by-one is pretty time-consuming. Let's accelerate that with addAll().

Thus far, we only cached files statically. That means during the installation of the service worker. Let's now move on and add items dynamically.

With the basics about dynamic caching set, it's now time to use it!

Let's now dive into how we may work with errors and let's fix some whilst we're at it.

An important part of cache management is "Versioning". Why is it important and what exactly does it mean? Let's take a closer look!

Since we added versioning to our cache, we'll have to deal with outdated versions, too. Learn how to deal with such versions in this lecture.

Let's now optimize our cache management and learn which tools we may use for that.

Let me summarize this module and wrap it up!

In this lecture, you'll find some useful links as well as the source code for this module.

Let me introduce you to this module and to what we'll cover in it!

To dive into advanced caching, we'll actually start simple and add a button. No worries, it'll get more advanced, soon!

Let's dive into our first strategy - "Cache on Demand". This allows the user of our page to specify when something should get cached.

Sometimes, you don't have the right files in the cache. That doesn't mean you can't show a nice page though. Learn how to provide a generic fallback page in this lecture.

After having a look at two interesting enhancements (Cache on Demand and Offline Fallback), it's time to dive into our first "real" caching strategy. Learn more about it in this lecture.

We had a look at our first "real" strategy - time for the next one!

What's the opposite of "Cache only"? Correct! Network only. Let's learn how to implement that strategy.

Network only doesn't fit your needs? No problem at all, let's turn our heads towards "Network with Cache Fallback".

After having a look at "Network with Cache Fallback", let's dive into another popular strategy in this lecture.

We can actually "enhance" the "Cache then Network" strategy by adding dynamic caching. Learn how that works in this module.

The "Cache then Network" strategy is pretty good, but right now, it doesn't really work if we're offline. Time to improve this.

Often times, we want to apply different strategies to different types of assets. A common requirement is to differentiate by URL. Learn how to do that, in this lecture.

There is room for a "Cache only" strategy in our app! Learn how to combine it with "Routing" to enhance our app.

We can improve the way we parse our static cache URLs - let's explore how to do that in this lecture.

The current "cache only" route matching has a flaw - learn how to fix it here.

Just as we improved our static-cache parsing, we can improve the way we serve fallback files. Learn how to do that, in this lecture.

Thus far, we only worked with GET requests. What about POST requests? Let's explore them, in this lecture.

Caching everything isn't an option - your cache will get too full. Learn how to manage its size, in this lecture.

Everything's working great thus far - but did you ever consider getting rid of a service worker? How would that work? Well, let's have a look.

With a lot of caching strategies practiced and implemented, let's now prepare the project for the next steps.

Let me wrap this module up and summarize what we learned thus far.

This lecture contains some useful resources and links for this module.

Let me introduce you to this module and to what you're going to learn in it.

Let me explain the requirements for this module and what we need to change about our project.

We need some dynamic data for this module and I don't want to use some dummy endpoint. So let's use Firebase to quickly set up our own, customizable backend.

With the backend set up, let's use some dummy data there and connect our frontend (the PWA) to the backend (Firebase).

Hearing about "Dynamic Caching" and "Caching Dynamic Data" can be confusing. Time to clear up the confusion and explain what the difference actually is.

As mentioned, we'll use IndexedDB in this module. Time to take a closer look at it!

Let turn our heads towards browser support and find out where we may use IndexedDB.

We'll use IndexedDB in this section, but the default API is kind of clunky. Let's use a better package which allows us to utilize promises.

We added idb.js, let's now use it. What better way of using it than to start right away with caching incoming posts?

We already used IndexedDB, let me now show you how you may use it in the service worker and even share the relevant code between service worker and "normal" JS code.

With data being stored in IDB, it's now time to also fetch it. Otherwise, offline access will be hard.

What happens if data on our server changes and we got old data stored in our client? That's not too good, is it? Learn more about this and how to fix it, in this lecture.

So we know that clearing our database will be important, let's now implement the logic to do just that.

Of course, you don't always want to clear the entire database. Hence I'll dive into deleting single items in this lecture.

With our IndexedDB solution implemented - how does it compare to caching via the Cache API? What about caching strategies? I'll explore that question in this lecture.

Let me wrap this module up and summarize what we learned.

In this lecture, you'll find the section source code and some useful resources to dive deeper.

Let me introduce you to this module and to what you're going to learn in it.

Responsive design is a vast topic. Actually, there are very long courses out there which will only focus on that. Hence I won't dive deeply into in this course as I explain in this lecture.

We actually already have a responsive application. At least a lot of parts of it are responsive. Let's identify them in this lecture.

CSS Media Queries are a core tool in your toolbox when it comes to creating responsive web pages. Let's dive into the very basics about them in this lecture.

The posts are deliberately not that high - of course we can change that though!

We can also optimize the way we use images. We don't need to load the big high-resolution ones on small devices in the end, do we?

Animations are not really related to responsive design but still a crucial part of PWAs. We want our app to really look and behave nicely, don't we?

Let me also briefly dive into the viewport meta-tag and how to handle it correctly.

Let me wrap this module up and summarize what we learned.

Attached to this lecture, you'll find the module code, inside the lecture, you'll find some helpful resources.

Let me introduce you to this module and to what we're going to cover in it.

Let's dive into the basics about Background Sync and understand how it works behind the scenes.

Before we can start using Background Sync, we need to prepare our project. Let's do so now.

We got the app prepared, now it's time to let the service worker know about the data it should synchronize.

In order to sync our data, we also need to store it. Learn how to do that, in this lecture.

As always in our app, we have to make sure that we also have a fallback so that it also works on older browsers.

With the data stored and the sync request sent to the service worker, let's now finally add the code to successfully write queued-up data to the backend.

Thus far, we had a look at one-time sync, which is useful for sending data at a later point of time. There's also another feature coming up - periodic sync. Learn more about it, in this lecture.

The app is taking shape but we need more control over the backend now. Let's dive into a bit more Firebase here and add our own server-side code.

Unfortunately, there's an error in our Firebase backend - let's fix it in this lecture!

Let me wrap up and summarize what we covered in this module.

Attached, you find the module source code, in the lecture, you'll find some useful links to learn more.

Let me introduce you to this module and to what we're going to cover here!

Before we learn HOW to use Notifications, let's learn WHY we might be interested in doing so.

Let's understand how Push and Notifications (these are different things!) work. More about that, in this lecture.

Let's dive into Notifications and let me clarify how it works.

As always, we of course want to find out how browser support for this feature looks like. We'll do that, in this lecture.

If we want to display Notifications (and send Push Messages), we need to fetch the permissions to do so first. This lecture shows how that works.

With the permissions requested (and hopefully granted), we can now have a look at how we actually display Notifications.

We sent a Notification directly from our JavaScript code, in this lecture we'll have a look at how that works when using a Service Worker instead.

Displaying simple notifications is already great but of course not all we can do. You can actually customize a lot about these notifications. Let's learn more in this lecture.

Now that we already had a look at notification options, let's dig deeper and see what else we can configure about these notifications.

One important option is missing until now: The option to show actions on our notification. Let's implement this feature, too.

Since we can display a notification (maybe even with actions), wouldn't it be great if we could also listen to user interactions with it? We can as this lecture shows!

We're not limited to listening to clicks on the notification or an action, we can also react to the user dismissing it. Learn how that works in this lecture.

Notifications are NOT push messages, that's important! Let me explain the difference and explain how to get started with push messages in this lecture.

Now that we learned what Push Messages are, let's set up our first push subscription so that we have a possibility of sending messages to the client.

With a new subscription created, we can now also store it on a server. Actually, we should do that. Learn more about it in this lecture.

We're making good progress! The next step is to take our created subscription and store it on the server. Learn how to establish the connection in this lecture.

Everything's set up now! Let's now dive into sending push messages from a server!

Now that we're sending push messages from the server, we have to work on the client again to ensure that we're listening to these incoming messages.

We're sending push messages and listening to that - let's now explore how the whole process works and looks like on a real device.

Now that we display a notification, we also want to control what happens when the user clicks/ touches it. We can easily do that as this lecture shows.

Not much left to do, let's just improve our code a little bit and then move on.

Let me wrap this module up and summarize what we learned thus far.

Attached to this lecture, you'll find the section code, in the lecture, you'll find some useful links.