Get started with Progressive Web Apps

Progressive Web Apps (PWAs) are web apps that are progressively enhanced. The progressive enhancements include app-like features, such as installation, offline support, and push notifications.

You can also package your PWA for app stores, such as Microsoft Store, Google Play, and Mac App Store. The Microsoft Store is the commercial app store that's built into Windows 10 and later.

In this overview of PWA basics, you create a simple web app and extend it as a PWA. The finished project works across modern browsers.

Tip

You can use PWABuilder to create a new PWA, enhance your existing PWA, or package your PWA for app stores.

Prerequisites

Creating a basic web app

To create an empty web app, follow the steps in Node Express App Generator, and name your app MySamplePwa.

In the prompt, run the following commands, which create an empty web app and install any dependencies:

npx express-generator --no-view
npm install

You now have a simple, functional web app. To start your web app, run the following command:

npm start

Now browse to http://localhost:3000 to view your new web app.

Running your new PWA on localhost.

Getting started building a PWA

Now that you have a simple web app, extend it as a Progressive Web App (PWA) by adding the three requirements for PWAs:

Step 1 - Use HTTPS

Key parts of the Progressive Web Apps platform, such as Service Workers, require using HTTPS. When your PWA goes live, you must publish it to an HTTPS URL. Many hosts now offer HTTPS by default, but if your host doesn't, Let's Encrypt offers a free alternative for creating the necessary certificates.

For debugging purposes, Microsoft Edge also permits http://localhost to use the PWA APIs. In this tutorial, you use http://localhost to build your PWA.

Publish your web app as a live site, but make sure your server is configured for HTTPS. For example, you can create an Azure free account. If you host your app site on the Microsoft Azure App Service, it's served over HTTPS by default.

Step 2 - Create a Web App Manifest

A Web App Manifest is a JSON file containing metadata about your app, such as name, description, icons, and more.

To add an app manifest to the web app:

  1. In Visual Studio Code, select File > Open Folder and then select the MySamplePwa directory that you created earlier.

  2. Press Ctrl+N to create a new file.

  3. Copy and paste the following code into the new file:

    {
        "lang": "en-us",
        "name": "My Sample PWA",
        "short_name": "SamplePWA",
        "description": "A sample PWA for testing purposes",
        "start_url": "/",
        "background_color": "#2f3d58",
        "theme_color": "#2f3d58",
        "orientation": "any",
        "display": "standalone",
        "icons": [
            {
                "src": "/icon512.png",
                "sizes": "512x512"
            }
        ]
    }
    
  4. Save the file as /MySamplePwa/public/manifest.json.

  5. Add a 512x512 app icon image named icon512.png to /MySamplePwa/public/images. You can use the sample image for testing purposes.

  6. In Visual Studio Code, open /public/index.html, and add the following code inside the <head> tag.

    <link rel="manifest" href="/manifest.json">
    

Step 3 - Add a Service Worker

Service workers are the key technology behind PWAs. Service workers enable scenarios that were previously limited to native apps, including:

  • Offline support.
  • Advanced caching.
  • Running background tasks.

Service workers are specialized Web Workers that intercept network requests from your web app. Service workers can run tasks even when your PWA isn't running, including:

  • Serving requested resources from a cache.
  • Sending push notifications.
  • Running background fetch tasks.
  • Badging icons.

Service workers are defined in a special JavaScript file, described in Using Service Workers and Service Worker API.

To build a service worker in your project, use the Cache-first network Service Worker recipe from PWA Builder, as follows.

  1. Copy the source files pwabuilder-sw-register.js and pwabuilder-sw.js to the public folder in your web app project.

  2. In Visual Studio Code, open /public/index.html.

  3. Inside the <head> tag, add the following code.

    <script type="module" src="/pwabuilder-sw-register.js"></script>
    

Your web app now has a service worker that uses the cache-first strategy. The new service worker fetches resources from the cache first, and from the network only as needed. Cached resources include images, JavaScript, CSS, and HTML.

Confirm that your service worker runs, as follows:

  1. Go to your web app at http://localhost:3000. If your web app isn't available, run the following command:

    npm start
    
  2. In Microsoft Edge, select F12 to open DevTools. Select Application, then Service Workers to view the service workers. If the service worker isn't displayed, refresh the page.

    DevTools Service Worker overview.

  3. View the service worker cache by expanding Cache Storage and select pwabuilder-precache. All of the resources cached by the service worker should be displayed. The resources cached by the service worker include the app icon, app manifest, CSS, and JavaScript files.

    Service Worker cache in DevTools.

  4. Try your PWA as an offline app, as follows. In DevTools, select Network, and then change the status from Online to Offline.

    Setting the app to offline mode in DevTools.

  5. Refresh your app. It should display the offline mechanism for serving the resources of your app from the cache.

    A PWA running offline.

The app can now be installed.

Best practices and next steps

To build a robust, real-world PWA, consider the following best practices for web app development.

Cross-browser compatibility

Test your app for cross-browser compatibility. Make sure your PWA works, by testing it in different browsers and environments. See Tools at Microsoft Edge Developer.

Responsive design

Use fluid layouts and flexible images. Responsive design includes the following elements that adapt your UX to your user's device:

To test your app locally, use device emulation tools from your browser. To test your app directly on a target device, create a remote debugging session on Windows or Android.

Support deep linking

Support Deep linking. Route each page of your site to a unique URL so existing users can help you engage an even broader audience through social media sharing.

Provide a rich offline experience

Provide a rich Offline experience. Make the app work even if the user's device is offline. Provide a custom offline page rather than using the browser's default offline page.

Use validation and testing practices

Use software validation and testing practices. Use code quality tools such as the Webhint linter to optimize the efficiency, robustness, safety, and accessibility of your app.

See also