Progressive Web Apps (PWA) - The Complete Guide

Let's start with the most important question first: What are progressive web apps? This lecture takes a closer look!

Why would you build a progressive web app if you can just build a native mobile app? There are many reasons, let's dive into the important ones in this lecture.

Time to see a progressive web app in action! In this lecture, we'll have a look at a real PWA and at the final course project.

Now that we saw a finished progressive web app, let's build our own one. At least a very simple one!

You already learned quite a bit about progressive web apps but you also heard a lot of buzzwords. Let me summarize which core building blocks make up a progressive web app in this lecture.

Sometimes, PWAs and SPAs get mixed up. What is the difference? In this lecture, you'll learn how both concepts are related to each other - or how they are not.

What does the "progressive" in "progressive web app" actually mean? Let's explore this question and have a look at "progressive enhancement" in this lecture.

We had a look at a lot of the core concepts of PWAs, now it's time to also dive into the question what this course has to offer to you. Let's explore the course outline.

In this course, we're going to learn and apply everything directly on a course project. For that, we of course need one, so let's set it up!

My #1 goal is to make sure that YOU get the most out of this course. Let me share some tipps & tricks about how that works out.

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!

Are you a manifest.json expert? Do you know how a good manifest.json file looks like? Check your knowledge!

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.

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.

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.