#02 - Deconstructing Progressive Web Apps
Tags: pwa, pwabuilder, webdev, beginners
Published: 2022-02-16 03:23:32

---
title: #02 - Deconstructing Progressive Web Apps
published: true
description: What are the building blocks of a Progressive Web App? Let's continue our #30DaysOfPWA journey! https://aka.ms/learn-pwa/30days-blog
tags: pwa, pwabuilder, webdev, beginners
canonical_url: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/02
series: Learn Progressive Web Apps with 30DaysOfPWA
cover_image: https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/day-02.jpg
---

Welcome to Day 2 of #30DaysOfPWA! New to the series? Three things you can do to catch up:

 * Read the kickoff post below for context.
 * Watch the [GitHub Repository](https://github.com/microsoft/win-student-devs) for updates.
 * Bookmark [#30DaysOfPWA Blog](https://aka.ms/learn-pwa/30Days-blog) for resources.

{% link https://dev.to/azure/welcome-to-30daysofpwa-2e54 %}

This is a shortened version of [this canonical post](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/02) for the #30DaysOfPWA. 

---

## What We'll Cover Today

Today we'll deconstruct a PWA and look at the open web technologies that power it, and understand:

 * What are the building blocks of a PWA?
 * How does each contribute desired PWA behaviors?
 * How can I check if my PWA models good practices?

We'll end each day with an exercise that you can do on your own, to help solidify what you learned. Ready? Let's go!

---


## What are the Building Blocks of a PWA?

In our last post, we talked about how _progressive enhancement_ was the key to scalable PWA experiences, and how _open web technologies_ were the key to developing good PWA.

Today, let's dive into those technologies, starting with the three core building blocks for PWA development: 

 * [HTTPS](https://aka.ms/learn-PWA/30Days-1.2/developer.mozilla.org/en-US/docs/Glossary/https) - makes your PWA secure.
 * [Service Workers](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/service-workers) - makes your PWA reliable and network-independent.
 * [Web App Manifest](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/web-app-manifests) - makes your PWA installable.

Before we jump into details, let's do a couple of activities to set the stage. In our last exercise, we picked a sample PWA to use as a reference when exploring concepts. Open that in your browser now and have it ready. I'm using [DevTools Tips](https://aka.ms/learn-PWA/30Days-1.2/devtoolstips.org) as my sample PWA.

---

## Task 1: Inspect your PWA!

Open the  PWA in a browser and  _inspect_ it using your browser's Developer Tools - e.g., [here is the guide for Microsoft Edge](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/inspect). Here's what I see when I inspect the **DevTools Tips** homepage:

![DevTools Tips - Inspected](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-inspect.png)

This is a _runtime dashboard_ for your PWA, with debugging and profiling tools you'll learn more in Week 3 when we discuss Developer Tools.

For now, familiarize yourself with these sidebar elements and keep this tab open in your browser:

 * **Application** - with Manifest, Service Workers and Storage
 * **Storage** - options including Local Storage, Session Storage, Indexed DB
 * **Cache** - representing Cache Storage in browser
 * **Background Services** - profiling panel to view/debug these activities.

---

## Task 2: Audit your PWA!

Visit the [PWABuilder](https://aka.ms/learn-PWA/30Days-1.2/www.pwabuilder.com) site. Look for the _Enter the URL to your PWA_ prompt, type in your PWA's URL (e.g., _[https://devtoolstips.org](https://aka.ms/learn-PWA/30Days-1.2/devtoolstips.org)_) and hit **Start**. In a few minutes, it should generate a report card that looks something like this:


![DevTools Tips - Report Card](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-reportcard.png)

This is an **audit report** for your PWA. It tells you how well your PWA meets "desirable characteristics" with a checklist of _required_ (must-have), _recommended_ (nice-to-have) and _optional_ features. Our PWA has an excellent score!! We'll revisit this in Week 3 as well - for now, keep the tab open and let's move on.

Time to learn about: _HTTPS, Service Workers and Web App Manifest!_

---

## 1. HTTPS

[HTTPS](https://aka.ms/learn-PWA/30Days-1.2/developer.mozilla.org/en-US/docs/Glossary/https) or _HyperText Transfer Protocol Secure_ is a secure version of the HTTP protocol, encrypting end-to-end communications between client and server endpoints in your web app by default.

Progressive Web Apps **must** be served from an HTTPS endpoint to ensure secure communications, provide user privacy safeguards and guarantee content authenticity. HTTPS is mandatory for **Service Workers** - the core PWA technology required for reliable, offline-friendly operation.

_Want to audit your PWA for security? Look at the _Security tab on the PWABuilder report. Here's what that looks like for the sample PWA:_

![DevTools Tips - Report Card](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-security.png)

Getting a good Security score is the simplest requirement to meet. Just **publish your PWA to an HTTPS-enabled endpoint**. You have two options:
 * Use a hosting service that supports HTTPS by default. Cloud Providers like [Azure](https://aka.ms/learn-PWA/30Days-1.2/azure.microsoft.com) offer options like [Azure App Service](https://aka.ms/learn-PWA/30Days-1.2/azure.microsoft.com/services/app-service/web) that can help. 
 * Use your own hosting provider and create the required certificates using free services like [Let's Encrypt](https://aka.ms/learn-PWA/30Days-1.2/letsencrypt.org/docs).

Note that browsers, such as Microsoft Edge, will let you use _http://localhost_ (non-HTTPS) to preview and test your PWA locally _for debugging purposes only_.

---

## 2. Service Workers

[Service Workers](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/service-workers) are a special type of [Web Worker](https://aka.ms/learn-PWA/30Days-1.2/www.w3schools.com/js/js_api_web_workers.asp), a JavaScript task that can run in the background (for asynchronous or long-running operations) without impacting the performance of the page. 

Service Workers make your PWA _reliable_ and _network-independent_, ensuring that it provides a usable experience under flaky network conditions or when device is offline (ex: _Flight Mode_). It achieves this with two key capabilities:
 * **Fetch API**. Service Workers can intercept, modify and respond to all network requests from the application dynamically. They can listen for events indicating network changes, adapting their fetch responses based on the runtime conditions and app context.
 * **Cache API**. Service Workers can access client-side Cache as well as asynchronous storage options (like IndexedDB) to proactively store resources for offline access or performance efficiency.

### Let's see Service Workers in action with our sample PWA

Take a look at the _Inspect_ tab that we opened in Task 1 - and click on the Service Workers tab. 
 * Check the _Offline_ button, taking the browser offline.  
 * Revisit the [DevTools Tips](https://aka.ms/learn-PWA/30Days-1.2/devtoolstips.org) home page. _You should be able to view it even though you are offline_.
 * Click an article. What happens? _You may get the "You Are Offline" message if you have not visited it before_. 
 * Uncheck the _Offline_ button. Revisit the article (it loads) then check _Offline_ again. _You should be able to move between Home and Article pages and see them both offline_.

That's the power of Fetch (interception) and Cache (storage) delivering a native-like experience (works offline) for the PWA!

_Want to audit your PWA for Service Worker support? Look for the tab in the PWA Builder report. Here's what that looks like for DevTools Tips._

![DevTools Tips - Report Card](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-sw.png)

We see it meets the basic requirements (_has a service worker_) and implements some recommended and optional behaviors (_works offline_, _uses periodic sync_, _uses background sync_) for a better PWA experience.

We'll talk about Service Worker operations (scope, lifecycle) and caching strategies (for offline and performance needs) in a later post. 

---

## 3. Web App Manifest

So we've made the PWA secure and ensured reliable, network-independent operation. But how do we make it _installable_ like a native app? 

That's where the [Web Application Manifest](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/web-app-manifests) comes in. It's a [W3C Specification](https://aka.ms/learn-PWA/30Days-1.2/www.w3.org/TR/appmanifest) defining **a JSON-based file format** that provides developers with a **centralized place to put metadata** associated with apps.

From a PWA developer perspective, it's a 2-step process:
 * Create your _manifest.json_ file and associate it with your PWA by referencing it in the `head` of your HTML page (see below). 
 * Populate the file with _required_ properties (for minimal PWA) and other _recommended or optional_ properties (for a best-in class PWA experience). 

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

### Let's see this in action with our sample PWA

Go back to the _Inspect_ tab we opened in Task 1.
 * Scan the `Elements` tab - do you see the link in `<head>`?
 * Scan the `Applications` or `Network` tab - do you see the `manifest.json` file?

Here's what that looks like for DevTools Tips. Note that the dashboard also shows you currently populated Manifest properties grouped into categories (Identity, Presentation, Icons etc.) for convenience. We'll dive into the details in a future post. 

![DevTools Tips - Report Card](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-manifest.png)


_Want to audit your PWA for Manifest support?_

Look at your PWABuilder report from Task 2. Here's what that looks like for DevTools Tips:

![DevTools Tips - Report Card](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/dtt-manifest-report.png)

The tool groups properties into _Required_, _Recommended_ and _Optional_ categories. Use it to prioritize and fix missing properties interactively to generate an updated _manifest.json_. Watch for [Week 3: DevTools](../dev-tools/) for more insights into this tool.

_How does Web App Manifest support Installability?_

It governs how the PWA looks and behaves when installed on your target device platform. It is used by the browser to determine that a website is an installable PWA - and to provide the relevant [install experience](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/ux#installing-a-pwa) to users. It also supports direct installs from app stores when you [publish your PWA](https://aka.ms/learn-PWA/30Days-1.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store).

## Summary

![Summary Day 2 - Deconstructing PWA.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/core-concepts/_media/deconstruct-pwa.png)

That was a lot to cover, but here are the core takeaways:
 - PWAs use open web technologies to implement progressive-enhancement techniques in a cross-brower compatible way.
 - Use HTTPS to ensure secure PWA operation. It is also mandatory for using Service Workers that provide reliable, offline experiences.
 - Use Service Workers to intercept fetch requests and manage local cache and storage resources, enabling reliable PWA usage even when offline.
 - Use Web App Manifest to describe relevant PWA properties for installability, enabling PWA to look and feel like native apps on devices.
 - Use Developer Tools (e.g., Inspect) to explore runtime operation of a PWA and see how these technologies are used.
 - Use Auditing Tools (e.g., PWABuilder) to validate PWA characteristics, and get actionable recommendations to make relevant fixes.

In our next post, we'll unpack the details of the Web App Manifest - but for now, try this exercise. 

## Exercise: Inspect & Audit your PWA

In the previous exercise, you selected a sample PWA and installed it in your local device (desktop or mobile). Today you'll open the app in a browser instead (I am using Microsoft Edge) and do the following tasks:

 * **Inspect your PWA** - e.g., using Microsoft Edge DevTools. 
    - Review the various Application tabs and sidebar sections.
    - Interact with the app while inspecting it - what changes?
 * **Audit your PWA** - e.g., using PWA Builder. 
    - Review the report and recommendations.
    - What differences did you see in this PWA's score & features?
    - What incremental fix can you make to improve that score?
 * **Reflect on your PWA**
    - What unique experiences does _this_ app unlock by being a PWA?
    - How does installed PWA experience differ from in-browser one? 

---

Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to:

{% org azure %}