A course that breaks 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 desktop or behind the hamburger menu on mobile.)

You'll learn PWA fundamentals like the Web App Manifest, service workers, 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 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 code to understand the fundamentals of what makes a Progressive Web App.

This course is created for a beginner and advanced web developers alike. You can go through the series from start to finish to get 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. Check out Learn CSS, and the HTML and JavaScript courses on datarist.

Here's what you'll learn:

Getting 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 questions.

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 make those assets load fast when online and available when offline.

Service workers

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

Caching

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.

Serving

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

Workbox

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.

Offline data

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.

Installation

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.

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 look and feel and basic behavior within the operating system.

Installation prompt

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.

Update

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

Enhancements

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.

Detection

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.

OS Integration

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

Window management

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.

Experimental features

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

Tools and debug

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

Architecture

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.

Complexity management

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.

Capabilities

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.

Conclusion

Next steps and resources.

So, are you ready to learn PWA?

A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it's a web app, it can reach anyone, anywhere, on any device, all with a single codebase. Once installed, a PWA looks like any other app, specifically:

• It has an icon on the home screen, app launcher, launchpad, or start menu.
• It appears when you search for apps on the device.
• It opens in a standalone window, wholly separated from a browser's user interface.
• It has access to higher levels of integration with the OS, for example, URL handling or title bar customization.
• It works offline.

The web platform

The web is an incredible platform. Its mix of universality across devices and operating systems, its user-centered security model, and the fact that no single company controls its specification or implementation make it a powerful platform for delivering software.

Combined with the web's inherent linkability, it's possible to search across it and share what you've found with anyone, anywhere. Whenever you go to a website, it's the latest version the publisher deployed, and your experience with that site can be as temporary or as permanent as you'd like.

Web applications can reach anyone, anywhere, on any device with a single codebase. For developers, the web also offers a transparent and straightforward deploying mechanism. There is no need for packaging, no extra content review, or delays on updates. Users always get the latest version when they visit your app. With new capabilities and techniques, a web app can now allow you to interact or see content even when offline, a hurdle that was impossible to overcome a few years ago.

Platform-specific apps

Platform-specific apps, on both mobile and desktop, are known for being rich and reliable. They're ever-present, on home screens, docks, and taskbars. They work regardless of network connection, and launch in their own standalone experience. They can read and write files from the local file system, access hardware connected via USB, serial, or Bluetooth, and interact with data stored on your devices, such as contacts and calendar events. In platform-specific applications, you can take pictures, play songs listed on the home screen, or control media playback while in another app. These applications feel like part of the device they run on.

A challenge for platform-specific apps is that they are not compatible with multiple platforms and devices, so it's not easy, if even possible, to move an Android app to iOS or an iOS to Windows or ChromeOS without creating a new app from scratch.

Bringing the best of both worlds

If you think about platform apps and web apps in terms of capabilities and reach, platform apps represent the best of capabilities, whereas web apps represent the best of reach. Progressive Web Apps sit at the intersection of the capabilities of platform apps and the reach of web apps. A Progressive Web App includes features from both worlds.

Adoption has its benefits

Hulu, a video streaming service in the USA, created a Progressive Web App version of their experience to replace their desktop apps which had poor user reviews and poor usage. As shared at Google I/O 2019, one developer could research and implement this experience from their existing web application in two weeks.

Within five months, 96% of their legacy app users had adopted the PWA, with a 27% increase in return visits and a 5.5% increase in engagement. Because it's in the launcher and on taskbars, PWAs are easier to return to than if they just lived in a tab.

JD.ID, an e-commerce platform in Indonesia providing delivery services for many products, wanted to expand its online presence by focusing on performance and a network-independent solid experience for their PWA. With this enhanced experience, they increased their overall mobile conversion rate by 53%, 200% for installed users, and increased their daily active users by 26%.

Clipchamp is an in-browser, desktop-class online video editor that empowers anyone to tell stories worth sharing through video. They saw 9% higher user retention with their PWA versus their standard desktop app users and have seen their PWA installations increasing at a rate of 97% each month in its first five months launched.

Corel Corporation's Gravit Designer is a powerful, desktop-class vector design tool that serves tens of thousands of daily active users demanding rich, affordable, accessible vector illustration software. Since adding a PWA as an install option for users, they've seen PWA users are 24% more active, the PWA accounts for 31% more repeat users, and PWA users are 2.5 times more likely to purchase Gravit Designer PRO, as compared to their other platforms and install options.

The streaming game changer

A great example of the power of Progressive Web Apps is the industry of streaming platforms, including cloud gaming and remote computing. Since 2021, most cloud game providers have launched Progressive Web Apps, letting you play console games from any device and just a browser or a PWA installation: iPhone, Android, iPad, laptops, Macs, or PCs. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now, and BlueStacks X offer cloud gaming solutions over the browser as PWAs. They all provide a great experience with performance close to native on all platforms thanks to web technologies such as WebRTC, WebAssembly, and GamePad APIs.

Challenges

Having covered the advantages of using the web platform to publish PWAs, it's also important to be aware of the challenges you may face.

Cross-browser compatibility

Apple is a crucial company for the multi-device world, owning iOS, iPadOS, macOS, and Safari. While Apple has never used the term PWA in public, they've been supporting the technologies to make a PWA installable and offline-capable since 2018 on Safari for iPhones and iPads.

However, Apple's implementation of the PWA specs misses many features possessed by other browsers, in particular browsers powered by the Chromium engine.

In the middle, we also have Firefox and its Gecko engine with implementations including more PWA specs on Android, and fewer installation capabilities on desktop.

Limitations include the lack of push notifications, integration APIs (such as Web Bluetooth or WebNFC), and installation promotion techniques that help users know they can install the current website to get an app experience. In addition, there are several bugs with implemented features.

As with all web development, testing your experience on every platform is mandatory when releasing your PWA, and when a major new browser or OS version is released. You should always provide fallback solutions or alternative experiences when a feature is not available.

Awareness of PWAs

As a PWA developer, you will probably encounter an awareness problem, both on the business and user sides. Some business owners won't know about PWAs or will have misconceptions about the power and challenges of Progressive Web Apps.

When you publish a PWA, your next challenge is ensuring users understand that the website is installable, leading to an installed app experience.

The installation challenge is more significant on some platforms, such as iOS and iPadOS, and sometimes UX designers include screens that explain to the user how to install the app.

Compatibility

You need to remember that a Progressive Web App is just a web app, so content and services are running on top of standard specs and protocols. Therefore, a PWA technically runs everywhere the web runs; you don't need the platform to be compatible with any "PWA spec."

However, when we are talking about PWA and compatibility, typically, we are thinking about the capabilities to cross the boundaries of the browser and online-only contexts: icon installation and offline support.

On top of the classic web platform support, let's check the support for basic app functionality, such as icon installation and offline capabilities.

97 _%

Offline-ready browsers

88 _%

Web users can install a PWA

Data sourced from StatCounter and Can I Use.

Desktop and laptops

In a world of multifactor devices, it's challenging to know what a desktop device is anymore. Still, at least from an operating system point of view, these browsers and stores are compatible with PWA installation and offline capabilities:

Windows 10 and 11

Google Chrome (from version 73), Microsoft Edge (from version 79), Microsoft Store

ChromeOS

built-in Chrome browser (from version 72), Play Store (from version 85)

macOS, Linux, and Windows 7 and 8.x

Google Chrome (from version 73), Microsoft Edge

In the following video the user installs a PWA from the browser on a desktop computer, and then accesses it like any other app with its standalone window.

Mobile devices

Talking about mobile phones and tablets, a Progressive Web App is installable with offline capabilities using the following browsers and app stores:

iOS and iPadOS

Safari (since iOS 11.3), AppStore (since iOS/iPadOS 14, with some limitations), mobile configuration for enterprise distribution.

Android

Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (from version 72 with Google Chrome installed, or browsers compatible with TWA), Galaxy Store, Managed Play iframe for enterprise distribution.

In the following video the user installs a PWA from the browser on a mobile device using the browser dialog, and also using the Add to Home screen menu.

Other devices

Some other small devices support PWAs, such as game consoles (Xbox with Microsoft Store) or XR devices (Microsoft Hololens, plans for Facebook's Oculus). However, the rest of the devices with a browser do not typically accept PWAs, including:

• Game consoles
• Smart TVs
• Smartwatches
• Cars

Your PWA will always work in the browser of all devices with their specific limitations. This ability to work in many devices, lets you create multi-device journeys, where the user can start a task in one device and complete it on another device, with data synced across them, with the exact same deployed app.

Resources

• Introduction to Progressive Web Apps on datarist
• Progressive Web Apps Compatibility list
• How Progressive Web Apps can drive business success
• Clipchamp's video editor PWA installs see a 97% monthly growth
• PWA users are 2.5x more likely to purchase Gravit Designer PRO