ContextQMD
Back to Content

Progressive web apps

files/en-us/web/progressive_web_apps/index.md

latest9.0 KB
Original Source

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.

Guides

The PWA guides provide conceptual explanations of different aspects of PWAs. They're intended to help you understand what kinds of things are possible with PWAs, and to provide enough pointers to help you understand how to achieve them.

  • What is a progressive web app?
    • : An introduction to PWAs, comparing them with traditional websites and with platform-specific apps, and outlining their main features.
  • Making PWAs installable
    • : One of the defining aspects of a PWA is that it can be installed on the device, and then appears to users as a platform-specific app, a permanent feature of their device which they can launch directly from the operating system like any other app. In this guide we'll explore what "installable" means, what a PWA needs to provide for it to be installable, and how you can customize the install experience.
  • Installing and uninstalling web apps
    • : This guide covers how users can install and uninstall PWAs on their devices.
  • Offline and background operation
    • : In this guide, we'll introduce a set of technologies that enable a PWA to provide a good user experience even when the device has intermittent network connectivity and to perform operations in the background, even when the main app is not running.
  • Caching
    • : An overview of the APIs that enable a PWA to cache resources locally, and some common strategies used by PWAs to implement offline functionality.
  • Best practices for PWAs
    • : PWAs should adapt to different browsers and devices, be accessible, have good performance, and integrate well with the operating system. This guide provides a list of best practices to help you make sure your PWA is as good as it can be.

How to

The PWA how-tos provide detailed instructions on implementing specific PWA features.

  • Create a standalone app
    • : Describes how to specify that a PWA should be launched in its own dedicated window when it is launched, rather than a browser tab.
  • Define your app icons
    • : Describes how to define your own set of icons to be used when the PWA is installed on a device.
  • Customize your app's colors
    • : Describes how to set background and theme colors for a PWA.
  • Display badges
    • : Describes how to display a badge on the PWA's icon: for example to let the user know that they have received new messages.
  • Expose common app actions as shortcuts
    • : Describes how to expose common actions for a PWA that can be launched from the operating system's app shortcut menu.
  • Share data between apps
    • : Describes how PWAs can share data with each other by using the operating system's app sharing mechanism.
  • Trigger installation from your PWA
    • : Describes how developers can provide their own UI to invite users to install their PWA.
  • Associate files with your PWA
    • : Describes how you can create an association between file types and your PWA, so that when the user clicks on the file, your PWA is launched to handle it.

Tutorials

Build a PWA from scratch using these PWA Tutorials, which walk through the steps from start to finish, explaining how the different features of the app are implemented along the way.

  • Creating your first PWA
    • : This novice-level tutorial walks through the creation of a PWA to track menstrual cycles. Lessons include a walk through of the HTML, CSS, and JavaScript required to create a fully functional web app, setting up a testing environment, and complete explanations guiding the learner through upgrading the web app into a PWA; including developing and inspecting a manifest, adding a service worker, and using the service worker to delete stale caches.
  • Deep dive into PWA
    • : This intermediate-level tutorial walks through the creation of a PWA that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. This tutorial includes all the basics for creating a PWA, with additional features, including notifications, push, and app performance.

Reference

Our PWA reference lists all features documented on MDN that you'll need to build a PWA.

Web app manifest

  • Web app manifest members
    • : Developers can use web app manifest members to describe a PWA, customize its appearance, and more deeply integrate it into the operating system.

Service Worker APIs

Communication with the app

The following APIs can be used by a service worker to communicate with its associated client PWA:

Offline operation

The following APIs can be used by a service worker to make your app work offline:

  • Cache
    • : A persistent storage mechanism for HTTP responses used to store assets that can be reused when the app is offline.
  • Clients
    • : An interface used to provide access to the documents that are controlled by the service worker.
  • FetchEvent
    • : An event, dispatched in the service worker with every HTTP request made by the client PWA. The event can be used to either send the request to the server as normal and save the response for future use, or intercept the request and immediately respond with a response cached previously.

Background operation

The following APIs can be used by a service worker to perform tasks in the background, even when your app is not running:

Other web APIs

  • IndexedDB
    • : A client-side storage API for significant amounts of structured data, including files.
  • Badging API
    • : A method of setting a badge on the application icon, providing a low-distraction notification.
  • Notifications API
    • : A way to send notifications that are displayed at the operating system level.
  • Web Share API
    • : A mechanism for sharing text, links, files, and other content to other apps selected by the user on their device.
  • Window Controls Overlay API
    • : An API for PWAs installed on desktop operating systems that enables hiding the default window title bar, enabling displaying the app over the full surface area of the app window.

See also