Learn PWA  |  web.dev (2024)

Sign in
  • Learn

Thanks for tuning in to Google I/O! Watch content on-demand.

  • web.dev
  • Learn
  • PWA
Stay organized with collections Save and categorize content based on your preferences.

A course that breaks down every aspect of modern progressive web app development.

check_circle

Welcome to Learn Progressive Web Apps!

subject Article

A course that breaks down every aspect of modern progressive web app development.

Read article

check_circle

Progressive Web Apps

subject Article

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.

Read article

check_circle

Getting started

subject Article

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.

Read article

check_circle

Foundations

subject Article

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.

Read article

subject Article

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.

Read article

check_circle

Assets and data

subject Article

A Progressive Web App is a website; all its assets are the same as on the web, but with new tools to make those assets load fast when online andavailable when offline.

Read article

check_circle

Service workers

subject Article

Service workers are a fundamental part of a PWA. They enable fast loading (regardless of the network), offline access, push notifications, and other capabilities.

Read article

check_circle

Caching

subject Article

You can use the Cache Storage API to download, store, delete or update assets on the device. Then these assets can be served on the device without needing a network request.

Read article

check_circle

Serving

subject Article

Using the service worker's fetch event, you can intercept network requests and serve a response using different techniques.

Read article

check_circle

Workbox

subject Article

Workbox is a set of modules that simplify common service worker interactions such as routing and caching. Each module addresses a specific aspect of service worker development. Workbox aims to make using service workers as easy as possible while allowing the flexibility to accommodate complex application requirements where needed.

Read article

check_circle

Offline data

subject Article

To build a solid offline experience you need to implement storage management. Tools like IndexedDB, Cache, Storage Manager, Persistent Storage, and Content Indexing can help.

Read article

subject Article

Installed apps are easy to access and can take advantage of some deeper integrations with the OS. Learn to make your PWA installable and gain those benefits.

Read article

check_circle

Web app manifest

subject Article

The web app manifest is a JSON file that defines how the PWA should be treated as an installed application, including the look and feel and basic behavior within the operating system.

Read article

check_circle

Installation prompt

subject Article

For sites that pass the PWA install criteria, the browser triggers an event to prompt the user to install it. The good news is that you can use this event to customize your prompt and invite users to install your app.

Read article

check_circle

Update

subject Article

Chances are your PWA needs updating. This chapter gives you the tools to update different parts of your PWA, from assets to metadata.

Read article

check_circle

Enhancements

subject Article

Your user expects a good experience. In this chapter, you will see how to enhance your PWA with splash screens, app shortcuts, and how sessions work.

Read article

check_circle

Detection

subject Article

Identifying how your users interact with your app is useful in customizing and improving the user experience. For example, you can check 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.

Read article

check_circle

OS Integration

subject Article

Your PWA now works outside the browser. This chapter covers how to integrate further with the operating system once users install your app.

Read article

check_circle

Window management

subject Article

A PWA outside of the browser manages its own window. In this chapter, you will understand the APIs and capabilities for managing a window within the operating system.

Read article

check_circle

Experimental features

subject Article

There are PWA capabilities 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

Read article

check_circle

Tools and debug

subject Article

We will explore the tools available to develop, debug, and test your Progressive Web Apps.

Read article

check_circle

Architecture

subject Article

You make some decisions when developing a PWA, such as whether to create a single page application or a multi-page application, and whether you will host it in the root of your domain or within a folder.

Read article

check_circle

Complexity management

subject Article

Keeping a web app simple can be surprisingly complicated. In this module, you will learn how web APIs work with threading and how you can use this for common PWA patterns such as state management.

Read article

check_circle

Capabilities

subject Article

PWAs are not just tied to the screen. This chapter is about the capabilities that a PWA has today in terms of hardware, sensors, and platform usage.

Read article

check_circle

Conclusion

subject Article

Next steps and resources.

Read article

Learn PWA  |  web.dev (2024)

References

Top Articles
Latest Posts
Article information

Author: Rob Wisoky

Last Updated:

Views: 5819

Rating: 4.8 / 5 (48 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Rob Wisoky

Birthday: 1994-09-30

Address: 5789 Michel Vista, West Domenic, OR 80464-9452

Phone: +97313824072371

Job: Education Orchestrator

Hobby: Lockpicking, Crocheting, Baton twirling, Video gaming, Jogging, Whittling, Model building

Introduction: My name is Rob Wisoky, I am a smiling, helpful, encouraging, zealous, energetic, faithful, fantastic person who loves writing and wants to share my knowledge and understanding with you.