diff --git a/microsoft-edge/progressive-web-apps/how-to/index-images/initial-app.png b/microsoft-edge/progressive-web-apps/how-to/index-images/initial-app.png new file mode 100644 index 0000000000..55da0401e0 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/index-images/initial-app.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/index.md b/microsoft-edge/progressive-web-apps/how-to/index.md index 4d0da308fd..6751fe79b3 100644 --- a/microsoft-edge/progressive-web-apps/how-to/index.md +++ b/microsoft-edge/progressive-web-apps/how-to/index.md @@ -1,27 +1,74 @@ --- -title: Get started with PWAs -description: Learn to build your first Progressive Web App. +title: Temperature convertor sample +description: How to obtain, install, and run the Temperature convertor Progressive Web App sample. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: pwa -ms.date: 11/24/2022 +ms.date: 06/17/2025 --- -# Get started with PWAs +# Temperature convertor sample -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. + + + +## About the sample + +This Temperature Convertor sample is a Progressive Web App (PWA). Obtain, install, and run the sample app, as follows. + +A Progressive Web App is an app that's built by using web technologies. A PWA can be installed and run on all devices, from a single codebase. To learn more about what PWAs are and their benefits, see [Overview of Progressive Web Apps (PWAs)](../index.md). -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](../ux.md#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. +This sample is for web developers who want to learn to build PWAs. To learn more about installing and running PWAs, see [Installing a PWA](../ux.md#installing-a-pwa) in _Use PWAs in Microsoft Edge_. You can find the final source code of the app you will be building in this guide on the [PWA getting started demo app repository](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started). + +## Preview the sample + +1. + + +![]() + + +See also: +* [Temperature converter](https://microsoftedge.github.io/Demos/pwa-getting-started/) - sample app hosted at github.io (rather than localhost). +* [Temperature converter - PWA getting started demo app](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started) - source code. + + + +## Clone the Demos repo + + + +## Start the localhost server + + + +## Install the sample + + + +## Run the sample + + + +## How the sample code works + + + +## SORT + + ## Prerequisites @@ -440,23 +487,26 @@ To build a great PWA, see [Best practices for PWAs](./best-practices.md). ## See also -Local: + * [Overview of Progressive Web Apps (PWAs)](../index.md) * [Use PWAs in Microsoft Edge](../ux.md) * [Installing a PWA](../ux.md#installing-a-pwa) in _Use PWAs in Microsoft Edge_. * [Best practices for PWAs](./best-practices.md) +Demos repo: +* [Temperature converter](https://microsoftedge.github.io/Demos/pwa-getting-started/) - sample app hosted at github.io (rather than localhost). +* [Temperature converter - PWA getting started demo app](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started) - source code. + MDN: * [Web app manifests](https://developer.mozilla.org/docs/Web/Manifest) at MDN. * [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) at MDN. -External Microsoft: -* [PWA getting started demo app repository](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started) +External Microsoft sites: * [Visual Studio Code](https://code.visualstudio.com) * [Azure free account](https://azure.microsoft.com/free) * [Microsoft Azure App Service](https://azure.microsoft.com/services/app-service/web) -External: +External sites: * [Getting Started with Progressive Web Apps (Workshop)](https://noti.st/aarongustafson/co3b5z/getting-started-with-progressive-web-apps-workshop). * [GitHub Pages](https://pages.github.com/) * [Node.js](https://nodejs.org) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 26242e3e98..051e9e41b8 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -1281,7 +1281,7 @@ href: ./progressive-web-apps/whats-new/pwa.md displayName: release notes, announcements - - name: Get started with PWAs + - name: Temperature convertor sample href: ./progressive-web-apps/how-to/index.md - name: Use PWAs in Microsoft Edge