Welcome to Learn Progressive Web Apps! #
Welcome to Learn Progressive Web Apps!
This course covers the fundamentals of Progressive Web App development into easy-to-understand pieces. Over the following modules, you'll learn what a Progressive Web App is, how to create one or upgrade your existing web content, and how to add all the pieces for an offline, installable app. Use the menu pane by the "Learn PWA" logo to navigate the modules.
You'll learn PWA fundamentals like the Web App Manifest, Service Workers, how to design with an app in mind, what's different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you'll learn about integration with the platform and operating system, how to enhance your PWA's installation and usage experience, and how to offer an offline experience.
Each module includes interactive demos and self-assessments for you to test your knowledge. You will be able to test and try demos on your mobile phone, tablet, or laptop while playing with the code to understand the fundamentals of what makes a Progressive Web App.
The first three modules are available now, with the rest to follow soon.
Here's what you'll learn:
Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.
If you want to build a Progressive Web App, you may be wondering where to start, if it's possible to upgrade a website to a PWA without starting from scratch, or how to move from a platform-specific app to a PWA. This article will help you answer these questions.
All Progressive Web Apps are, at their core, modern websites, so it's important that your website has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance.
The first impression of your App is the look and feel. In this chapter, you will learn what's need to be done to support a user that uses your web app outside of a browser tab.
Assets and data
Your app is made of assets. You will understand how a PWA stores the assets in the client to offer a fast and offline experience.
A Service Worker is a crucial component of every PWA. In this chapter, you will learn what it is, the power behind it and how to register one in your code.
A good PWA has all the necessary assets cached in the client. You will learn how to leverage the Cache Storage API for storing these assets
Every PWA makes requests to the server. With the Service Worker, you will learn how you can capture each request and decide what to do, from serving it from a cache asset, synthesizing a response or let the request pass to the network.
Complex PWAs need lot of log in the Service Worker. In this chapter, you will learn how to use the Workbox library to enhance your PWA.
Offering an offline experience is part of the PWA requirements. In this chapter, you will learn the techniques available to store data while offline and how to sync it later with the server.
PWAs can be installed in the operating system. You will learn how to add that ability to your website or webapp and how the process works for every platform.
Web app manifest
The Web App Manifest is mandatory to every PWA. In this chapter, you will see all the meta data that can be set to define how your app will work.
After we set a Web App Manifest, your users may install the app. In this chapter, we will understand how to customize the installation experience and help the user add the icon.
No app keeps untouched forever. You will understand how to update the PWA, from the assets to the meta data and how your users will receive them.
Your user expects a good experience. In this chapter, you will see how to enhance your PWA with splash screens, app shortcuts, and how to save analytics.
Knowledge is power. In this chapter, you will learn how to know if your PWA or native app is installed to enhance the user experience, including the ability to transfer navigation to the standalone app from the browser with link capturing.
The PWA is not tied to just the screen. You will understand all the capabilities that a PWA can have today in terms of hardware, sensors and platform usage.
Our app now works outside of the browser. In this chapter, you will understand how to integrate further with the operating system.
A PWA outside of the browser manage its own window. In this chapter, you will understand important APIs and abilities on how to deal with a window within the operating system.
The Web evolves every month. You will understand what's the Capabilities Fugu project, how to sign-up for a trial, and how to use experimental APIs.
Tools and debug
A PWA is a web, but it's also an App. In this chapter, you will see which tools on top of what you know for the web are needed to debug and work with Progressive Web Apps.
The architecture is the pillar of every project. This chapter will discuss when to use Single Page Application vs. Multi Page Application, as well as other architectural decisions for PWAs.
Keep a web app simple is more complicated than saying it. In this chapter, you will understand how to leverage web APIs to work with threading and state management in the PWA world.
Next steps and resources.
So, are you ready to learn PWA?