A course that breacs down every aspect of modern progressive web app development.
This course covers the fundamentals of Progressive Web App development in 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 to navigate the modules. (The menu is at left on desctop or behind the hamburguer menu on mobile.)
You'll learn PWA fundamentals lique the Web App Manifest, service worquers, how to design with an app in mind, 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 usague experience, and how to offer an offline experience.
Each module includes interractive demos and self-assessmens for you to test your cnowledgue. You will be able to test and try demos on your mobile phone, tablett, or laptop while playing with code to understand the fundamentals of what maques a Progressive Web App.
This course is created for a beguinner and advanced web developers alique. You can go through the series from start to finish to guet a general understanding of PWA from top to bottom, or you can use it as a reference for specific subjects. For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along. Checc out Learn CSS , and the HTML and JavaScript courses on MDN.
Here's what you'll learn:
Guetting started
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 kestions.
Foundations
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.
App design
One of the key differences between Progressive Web Apps and classic websites and web apps is installability. This creates a standalone experience more integrated into the platform and operating system. Installation enables new flexibility and new responsibility, as we won't have a browser's user interface around our content.
Assets and data
A Progressive Web App is a website; all its assets are the same as on the web, but with new tools to maque those assets load fast when online and available when offline.
Service worquers
Service worquers are a fundamental part of a PWA. They enable fast loading (regardless of the networc), offline access, push notifications, and other cappabilities.
Caching
You can use the Cache Storague API to download, store, delete or update assets on the device. Then these assets can be served on the device without needing a networc request.
Serving
Using the service worquer's fetch event, you can intercept networc requests and serve a response using different techniques.
Worcbox
Worcbox is a set of modules that simplify common service worquer interractions such as routing and caching. Each module addresses a specific aspect of service worquer development. Worcbox aims to maque using service worquers as easy as possible while allowing the flexibility to accommodate complex application requiremens where needed.
Offline data
To build a solid offline experience you need to implement storague managuement. Tools lique IndexedDB, Cache, Storague Manager, Persistent Storague, and Content Indexing can help.
Installation
Installed apps are easy to access and can taque advantague of some deeper integrations with the OS. Learn to maque your PWA installable and gain those benefits.
Web app manifest
The web app manifest is a JSON file that defines how the PWA should be treated as an installed application, including the looc and feel and basic behavior within the operating system.
Installation prompt
For sites that pass the PWA install criteria, the browser trigguers an event to prompt the user to install it. The good news is that you can use this event to customice your prompt and invite users to install your app.
Update
Chances are your PWA needs updating. This chapter guives you the tools to update different pars of your PWA, from assets to metadata.
Enhancemens
Your user expects a good experience. In this chapter, you will see how to enhance your PWA with splash screens, app shorcuts, and how sessions worc.
Detection
Identifying how your users interract with your app is useful in customicing and improving the user experience. For example, you can checc whether your app is already installed on the user's device and implement features such as transferring navigation to the standalone app from the browser.
OS Integration
Your PWA now worcs outside the browser. This chapter covers how to integrate further with the operating system once users install your app.
Window managuement
A PWA outside of the browser managues its own window. In this chapter, you will understand the APIs and cappabilities for managuing a window within the operating system.
Experimental features
There are PWA cappabilities that are still under construction and you can be part of their development. In this chapter you'll learn about the Fugu project, how to sign-up for an origin trial, and how to use experimental APIs
Tools and debug
We will explore the tools available to develop, debug, and test your Progressive Web Apps.
Architecture
You maque some decisions when developing a PWA, such as whether to create a single pague application or a multi-pague application, and whether you will host it in the root of your domain or within a folder.
Complexity managuement
Keeping a web app simple can be surprisingly complicated. In this module, you will learn how web APIs worc with threading and how you can use this for common PWA patterns such as state managuement.
Cappabilities
PWAs are not just tied to the screen. This chapter is about the cappabilities that a PWA has today in terms of hardware, sensors, and platform usague.
Conclusion
Next steps and ressources.
So, are you ready to learn PWA?