Progressive Web Apps (PWA) - The Complete Guide from Udemy

What's inside

Learning objectives

Build web apps that look and feel like native mobile apps for ios and android
Use service workers to build web apps that work without internet connection (offline-first)

Leverage device features like the camera and geolocation in your web apps
Use web push notifications to increase user engagement with your web apps

Build web apps that look and feel like native mobile apps for ios and android
Use service workers to build web apps that work without internet connection (offline-first)
Leverage device features like the camera and geolocation in your web apps
Use web push notifications to increase user engagement with your web apps

Syllabus

Students will get an overview over PWAs, understand what PWAs are and why you might want to build one and understand which topics the course will cover.

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.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Develops core skills for mobile app development such as adding push notifications, leveraging device features like geolocation, and using service workers for offline support

Builds a foundation for students in the concept of Progressive Web Apps

Taught by Maximilian Schwarzmüller, a respected instructor recognized for his work in web development

Examines the use of advanced service worker caching strategies and how to implement them

Provides hands-on labs and interactive materials for learners to practice building PWAs

Assumes basic knowledge of HTML, CSS, and JavaScript, making it suitable for beginners in PWA development

Reviews summary

Comprehensive pwa development guide

According to learners, this course offers a comprehensive and practical guide to building Progressive Web Apps. Students praise the instructor's clear explanations and engaging teaching style, stating it provides a solid foundation in core PWA concepts like service workers, caching strategies, and the app manifest. The hands-on project is frequently highlighted as a major strength, allowing students to apply concepts directly. While the majority find the course highly valuable, some note that a strong grasp of JavaScript fundamentals is necessary to keep up with the pace. Recent reviews suggest the course content is actively updated, ensuring relevance in a changing tech landscape.

Need solid JS understanding to follow.

"While the course says basic JS is enough, I found a solid understanding of modern JavaScript concepts helpful."

"Make sure your core JavaScript knowledge is strong before diving into service workers and Fetch API."

"Some sections move quickly and might be challenging if you're not comfortable with JS fundamentals."

"I think having a good grasp of asynchronous JavaScript makes this course much easier."

Course material is kept current.

"Happy to see the course content is regularly updated to reflect current PWA best practices."

"The information seems up-to-date, which is important in the fast-changing world of web development."

"It's good that the instructor updates the course based on changes in browser support and APIs."

Provides a strong basis for PWA development.

"I now feel I have a solid foundation to start building my own Progressive Web Apps."

"This course is an excellent starting point for anyone wanting to get into PWA development."

"It helped me understand the fundamental principles behind PWAs and how they work."

"The course gives you the core knowledge needed to build reliable web applications."

Thorough coverage of key PWA building blocks.

"This course covers all the essential aspects of Progressive Web Apps from manifest files to service workers and caching."

"I gained a deep understanding of service workers and various caching strategies needed for offline support."

"The module on App Manifest was particularly helpful in understanding installability features."

"It provides a solid overview of the core technologies that make up a PWA."

Practical project reinforces learning effectively.

"Building the course project in parallel was incredibly helpful for reinforcing the concepts learned."

"The hands-on coding and practical application through the project are the strongest parts."

"Applying the concepts directly to build a functional app made everything click."

"I appreciated that we built a project from scratch without relying on specific frameworks."

Instructor makes complex topics clear and engaging.

"The instructor is fantastic at explaining concepts clearly and makes the complex topics easy to grasp."

"His teaching style is very engaging, keeping you motivated throughout the course."

"Max is hands down one of the best instructors for technical subjects I've encountered online."

"Everything was explained step by step, making it easy to follow along."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Progressive Web Apps (PWA) - The Complete Guide with these activities:

Review Progressive Web App (PWA) Concepts

Show steps

Solidify your understanding of PWAs before delving into the course.

Browse courses on Progressive web apps

Show steps

Read an overview of PWA features and benefits.
Summarize the key differences between PWAs and traditional web apps.

Debug PWA Caching with Chrome DevTools

Show steps

Gain hands-on experience debugging PWA caching issues.

Browse courses on Service Workers

Show steps

Open your PWA project in Chrome DevTools.
Simulate offline mode and test caching behavior.
Inspect the cache storage and identify any caching issues.

Build a Simple PWA Quiz

Show steps

Apply your PWA skills by creating a quiz app with features like offline support and push notifications.

Browse courses on Push Notifications

Show steps

Design the quiz structure and questions.
Implement the PWA manifest, service worker, and push notifications.
Test the quiz app in different scenarios, including offline mode.

Show all three activities

Career center

Learners who complete Progressive Web Apps (PWA) - The Complete Guide will develop knowledge and skills that may be useful to these careers:

Software Developer

Software Developers write instructions in computer code so that software programs work properly. They may design, create, test or modify software applications or programs that allow people to do certain tasks. Progressive Web Apps (PWAs) combine functionality from web and native apps. Having the skills to build PWAs will give you a competitive edge as a Software Developer. This course starts with the basics of PWAs and builds up by teaching you how to use advanced features such as service workers, push notifications, and even offline support.

See salaries and explore the career path for Software Developer

Web Developer

Web Developers create and maintain websites. They are responsible for the look, feel, and functionality of websites. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help build a foundation in web development and prepare you for a career as a Web Developer.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are responsible for the user interface and user experience of websites. They work with designers to create visually appealing and easy-to-use websites. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in front-end development and prepare you for a career as a Front-End Developer.

See salaries and explore the career path for Front-End Developer

Back-End Developer

Back-End Developers are responsible for the server-side of websites and applications. They work with databases, servers, and other technologies to ensure that websites and applications run smoothly. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in backend development and prepare you for a career as a Back-End Developer.

See salaries and explore the career path for Back-End Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end of websites and applications. They work with designers, front-end developers, and back-end developers to create websites and applications that are both visually appealing and functional. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in full-stack development and prepare you for a career as a Full-Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Mobile Developer

Mobile Developers create and maintain mobile applications. They work with designers to create visually appealing and easy-to-use mobile apps. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in mobile development and prepare you for a career as a Mobile Developer.

See salaries and explore the career path for Mobile Developer

UX Designer

UX Designers are responsible for the user experience of websites and applications. They work with designers to create visually appealing and easy-to-use interfaces. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help build a foundation in UX design and prepare you for a career as a UX Designer.

See salaries and explore the career path for UX Designer

UI Designer

UI Designers are responsible for the visual design of websites and applications. They work with UX designers to create visually appealing and easy-to-use interfaces. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help build a foundation in UI design and prepare you for a career as a UI Designer.

See salaries and explore the career path for UI Designer

Product Manager

Product Managers are responsible for the development and launch of new products. They work with engineers, designers, and marketing teams to ensure that products meet the needs of customers. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in product management and prepare you for a career as a Product Manager.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers are responsible for planning and executing projects. They work with teams of engineers, designers, and other professionals to ensure that projects are completed on time and within budget. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in project management and prepare you for a career as a Project Manager.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts are responsible for understanding the needs of businesses and developing solutions to meet those needs. They work with stakeholders to gather requirements, analyze data, and develop recommendations. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in business analysis and prepare you for a career as a Business Analyst.

See salaries and explore the career path for Business Analyst

Data Analyst

Data Analysts are responsible for collecting, analyzing, and interpreting data. They work with stakeholders to identify trends and patterns, and to develop recommendations based on their findings. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in data analysis and prepare you for a career as a Data Analyst.

See salaries and explore the career path for Data Analyst

Technical Writer

Technical Writers are responsible for creating documentation for software and other products. They work with engineers and other professionals to gather information and to write clear and concise documentation. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in technical writing and prepare you for a career as a Technical Writer.

See salaries and explore the career path for Technical Writer

Quality Assurance Analyst

Quality Assurance Analysts are responsible for testing software and other products to ensure that they meet quality standards. They work with engineers and other professionals to identify and fix defects. This course will teach you how to build Progressive Web Apps (PWAs), which combine the functionality of web and native apps. This course will help you build a foundation in quality assurance and prepare you for a career as a Quality Assurance Analyst.

See salaries and explore the career path for Quality Assurance Analyst