Progressive Web Apps (PWAs) are applications that you build by using web technologies, and that can be installed and can run on all devices, from one codebase.
This guide is targeted at web developers who want to learn to build PWAs. To learn more about installing and running PWAs, see Installing a PWA in Use PWAs in Microsoft Edge.
In this guide, you first learn how PWAs work, then create your first simple PWA, which will be a temperature converter app, and then learn more about how to make great PWAs.
Install Node.js to use it as your local web server.
Working knowledge of HTML, CSS, and JavaScript is also a plus.
The architecture of a PWA
Progressive Web Apps are written using the programming languages of the web: HTML, CSS, and JavaScript, and are distributed to your users by using web servers.
To make your app available to users, you deploy it on a web server that's accessible via HTTPS. Your server contains:
Back-end code: the endpoints needed by your app, when connected to the internet, to retrieve dynamic content that may be stored in a database on your server.
Front-end code: the resources needed for the app to be installed on the user's device, such as HTML, CSS, and JavaScript code.
Your back-end code can use the server-side languages of your choice such as ASP.NET, Java, Node.js, or PHP. Note, however, that server-side endpoints may not even be required depending on the app your're building. The PWA that you create in this tutorial doesn't have any server-side code, because the app exclusively runs on the device it's installed on, and doesn't need any server-side data.
Your front-end code uses HTML, CSS, JavaScript, and a JSON manifest only.
You use HTML to describe the content in your app, such as the text, images, text fields, or buttons that appear in the user interface. You then use CSS to organize the HTML content in a layout, and provide styles to elements. You use JavaScript to add user interactions to your user interface. And finally, you use a JSON manifest file that describes your application to the host operating system.
Although your front-end code runs by using the device's web browser, the browser user interface might not be visible, because your app can choose to run in a standalone window.
On top of the user interface code, you can also use JavaScript to make your application faster, more reliable, and network-independent by using a service worker file. Finally, your front-end code also contains a JSON manifest file that describes your application to the host operating system.
The following diagram shows the high-level architecture of a PWA. The web server is on one side of the PWA, and the device is on the other side. The device contains the front-end code, including HTML, CSS, JavaScript, the service worker, and the manifest:
Step 1 - Start a web server
PWAs are distributed to users by using web servers. Once your app is ready, deploy it to the web by using a web hosting provider. You can then update your app simply by deploying the new version to your web server again.
To start developing your PWA, you can use a local web server instead. To start a local server:
Create a new folder on your computer where the web server will run.
You can do this by opening a command prompt and typing:
shell
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
Start the server by using the http-server Node.js library:
shell
npx http-server
You now have a simple local web server running at http://localhost:8080.
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 use HTTPS by default, but if your host doesn't offer HTTPS, Let's Encrypt offers a free alternative for creating the necessary certificates.
You can also host your website on GitHub Pages which supports HTTPS too.
For debugging purposes, Microsoft Edge also permits a localhost web server to use the PWA APIs without HTTPS.
Step 2 - Create your app start page
So far, there is no content available on your web server. Start by creating the first page that users will see when they access your temperature converter app.
Open Visual Studio Code, select File > Open Folder and then select the MySamplePWA directory you created in the previous step.
Create a new file in the project by pressing Ctrl+N, add the following content, and save the file as index.html:
The app runs in the browser for now, and can't be installed. To make the app installable, the app needs a web app manifest.
Step 3 - Create a web app manifest
A web app manifest is a JSON file containing metadata about your app, such as its name, description, icons, and the various operating system features it uses.
See:
The web app manifest in Making PWAs installable at MDN > References > Progressive web apps > Guides.
Open the index.html file again and add the following code after the closing </form> tag, to load the JavaScript file:
HTML
<scriptsrc="converter.js"></script>
Now add some CSS style to the app, to make it more visually appealing. Create a new file called converter.css in your project and add the following code to it:
Open index.html again and reference the new CSS file in it by adding the following code inside the <head> tag:
HTML
<linkrel="stylesheet"href="converter.css">
Your Visual Studio Code project should now look something like this:
Go to http://localhost:8080 to view your app:
Your app does something useful now, and it can be installed as a standalone app by users. Before installing the app, create a service worker to make the app work offline.
Step 5 - Add a service worker
Service workers are a key technology that help make PWAs fast and independent of network conditions.
A service worker is a specialized web worker that can intercept network requests from your PWA, and enables scenarios such as:
Offline support, including intermittent connections.
Advanced caching.
Running background tasks such as receiving PUSH messages, adding badges to the app icon, or fetching data from a server.
A PWA doesn't need to have a service worker for Microsoft Edge to be able to install the app. However, we recommend adding a service worker to your PWA to make it faster, and to make your PWA more reliable, such as when your device has an intermittent network connection or is offline.
A service worker is defined in a JavaScript file that's loaded by your app. To add a service worker to your project:
In Visual Studio Code, create a new file (Ctrl+N), add the following content, and save the file as sw.js:
JavaScript
const CACHE_NAME = `temperature-converter-v1`;
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
cache.addAll([
'/',
'/converter.js',
'/converter.css'
]);
})());
});
self.addEventListener('fetch', event => {
event.respondWith((async () => {
const cache = await caches.open(CACHE_NAME);
// Get the resource from the cache.const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
} else {
try {
// If the resource was not in the cache, try the network.const fetchResponse = await fetch(event.request);
// Save the resource in the cache and return it.
cache.put(event.request, fetchResponse.clone());
return fetchResponse;
} catch (e) {
// The network failed.
}
}
})());
});
The sw.js file will act as your PWA's service worker. The code above listens to the install event, which is triggered when the user installs your app, and uses it to cache the resources that your app needs to function offline, such as the initial HTML page, the converter JavaScript file, and the converter CSS file.
The code also intercepts fetch events, which happen every time your app sends a request to the server, and applies a cache-first strategy. The service worker returns cached resources so your app can work offline, and if that fails attempts to download from the server.
Open index.html and add the following code at the end of the <body> tag to register your service worker:
To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.
Open the Application tool, then click Service workers. If the service worker isn't displayed, refresh the page.
View the service worker cache by expanding Cache Storage and selecting temperature-converter-v1. 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, and the initial page.
Try your PWA as an offline app. In DevTools, open the Network tool, and change the Throttling value to Offline.
Refresh your app. It should still appear correctly in the browser, using cached resources served by the service worker.
Step 6 - Install the app
Now that your app has a web app manifest, supporting browsers can install your app as a PWA.
In Microsoft Edge, once you refresh your app, the App available button appears in the address bar. Clicking the App available button prompts you to install the app locally.
Click Install to install the app locally. After the installation completes, your app is displayed in its own window, and its own application icon in the Taskbar.
The temperature converter PWA that you built so far is only a small sample of what PWAs can do. The previous steps are important prerequisites for any PWA, but there are important best practices that will make your PWA feel like a real app when installed.
When users install applications, they have certain expectations of what these applications can do; for example:
Users expect apps to work offline.
Users expect apps to integrate within the operating system, such as by handling files.
Users expect apps to perform non-trivial computing tasks.
Learn to test and publish Progressive Web Apps (PWAs) on various devices and platforms, ensuring seamless user experiences. Acquire test packages, test on different browsers and devices, and comply with guidelines. Utilize PWABuilder to package and submit PWAs to the Microsoft Store, reserve app names, and navigate the Microsoft Partner Center for successful publication. Enhance PWA development skills and boost app performance and reach with this informative guide.