Applications Web progressives (PWA) – Le guide complet

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.

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.

Let me introduce you to this module and explain what we'll cover throughout it.

In order to use the native device features of this section, we need to prepare our project code. Only a couple of adjustments are required, let's quickly do them.

In order to display a live-picture of the camera, we need to secure DOM access. Let's set this up in this lecture.

The camera feature is available in a lot of browser, but some implement it differently. Let's create a custom polyfill to be able to use it in as many browser as possible.

With camera access now available in many browsers. let's get that video image and output it in our page.

With the video stream running, the next goal is to take that picture. For that, let's listen to the capture button and act accordingly.

Taking a picture of course is nice but only worth something if we can also store the image on some server. Let's implement the code to do so.

Sending an image via Http is only one half - we also need to accept incoming images on our backend. Time to adjust the code there!

Due to some breaking changes to Firebase Cloud Functions, we need to adjust our function code to again work correctly.

Time to test our image-taking feature and post our pictures to our backend service. Let's fix any error we may encounter.

What if we have a device without a camera? Or permission to access the camera was denied? We need a fallback! So let's implement one in this lecture.

Of course, we also want to get that user position - learn how to use Geolocation to do just that.

Unfortunately, our app has some tiny bugs - time to fix them in this lecture to make sure that everything works as it should.

We did it! We added a lot of new features, so let's now take a real device to test everything and see how it works!

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

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

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

What's the idea behind a tool like Workbox, which problem does it try to solve? I'll answer this question in this lecture.

Please read this article to find out which version you want to use and which adjustments are required.

In order to use Workbox, we need to install it first. Let's do that in this lecture.

Workbox does precaching for us, but it's setup might not fulfil all our requirements. Let's configure it to our needs in this lecture then.

We have a service worker which gets generated by Workbox. That's nice but can also be an issue: What if we want to customize Workbox's solution? We can do that - learn more about it in this lecture.

Dynamic caching can be challenging, especially if you want to use different strategies and caches for different URLs/ assets. It's easy with Workbox though! Let's take a closer look.

Let's add more dynamic caching routes to the Workbox setup, to ensure that we really cache everything we want to cache.

The cool thing about Workbox and its strategies is that you can configure a lot about it. Let's dive into how that works.

There's no IndexedDB strategy integrated into Workbox - we can only work with the Cache API. How do we then use our code for caching/ fetching posts? Learn how to create your own handlers, in this module.

What if we want to load some resource that just isn't cached? We can use a fallback page for that as you learned. In this module, you'll now learn how to implement one with Workbox.

Thus far, we still don't have background sync and push notifications integrated into the Workbox service worker. Time to change that, in this lecture.

Workbox offers more features than are covered in this course. Unfortunately, the docs can be confusing - let's explore them in this lecture.

We can do more than just use Workbox to optimize/ improve our project. Let's dive into another important enhancement in this lecture.

We're nearing the end! Let's now test our application on a real web server.

We added many features, we optimized our service workers and we truly built a progressive web app. At least, that's what we think. Let's audit our app with Google's Lighthouse.

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

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

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

React is probably the most popular framework for SPAs - learn how to turn your React app into a PWA (when using create-react-app).

Here's one general note about SPAs and PWAs that's super important to understand!

Of course you might want to turn your Angular app into a PWA. Learn how that would work in this lecture.

Last but not least: Vue.js. It's extremely popular and turning a Vue app into a PWA is easy as this lecture shows!

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

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

Amazing job, you made it through the course and learned a lot about progressive web apps! Let me summarize this course and outline some possible next steps.