Service worker no longer required, for Install UI to appear

microsoft-edge/devtools-guide-chromium/service-workers/index.md

@@ -10,23 +10,23 @@ ms.date: 02/19/2021
 ---
 # Service Worker improvements
 
-This article explains improvements to developer tools for working with [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and the network requests that pass through each service worker. The **service worker improvements** are in the **Network**, **Application**, and **Sources** tools.
+The **Network**, **Application**, and **Sources** tools have been improved to help you work with [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and the network requests that pass through each service worker.
 
-The improvements to service workers simplify the following tasks:
+The improvements simplify the following tasks:
 
-* Debug based on Service Worker timelines.
+* Debug based on service worker timelines.
  * The start of a request and duration of the bootstrap.
- * Update to Service worker registration.
+ * Update to service worker registration.
  * The runtime of a request using the [fetch event](https://developer.mozilla.org/docs/Web/API/FetchEvent) handler.
  * The runtime of all fetch events for loading a client.
 * Explore the runtime details of fetch event handlers, install event handlers, and activate event handlers.
 * Step into and out of fetch event handler with [page script information](#sources).
 
-The improved experiences span three different developer tools:
+The improvements span the following tools:
 
 * The [Network](#network) tool. Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool.
 
-* The [Application](#application) tool. To debug the service workers, go to the **Service Workers** tool.
+* The [Application](#application) tool. To debug service workers, use the **Service workers** page.
 
 * The [Sources](#sources) tool. Access page script information when stepping into fetch event handlers.
 
@@ -41,14 +41,18 @@ You can access the service worker debugging features in the **Network** tool in
 * Directly in the **Network** tool.
 * Started in the **Application** tool.
 
-### Request routing
+
+<!-- ------------------------------ -->
+#### Request routing
 
 To make request routing easier to visualize, timelines now display the service worker start-up and the `respondWith` fetch events. To debug and visualize a network request that passed through a service worker:
 
 1. Select the network request that went through a service worker.
 1. Open the **Timing** tool.
 
-### Fetch events
+
+<!-- ------------------------------ -->
+#### Fetch events
 
 To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`. To find more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows.
 
@@ -58,11 +62,15 @@ To learn more about the `respondWith` fetch events, click the dropdown arrow to
 
 ![Application view](./index-images/sw-application-timeline.png)
 
-### Service worker update timeline
+
+<!-- ------------------------------ -->
+#### Service worker update timeline
 
 The Microsoft Edge DevTools team added a timeline in the **Application** tool to reflect the update lifecycle of the service worker. This timeline displays the installation and activation events. Each of the events have a corresponding dropdown arrow to give you more details.
 
-### Request routing and fetch events
+
+<!-- ------------------------------ -->
+#### Request routing and fetch events
 
 You can now access the service worker timelines through the **Network** tool in the console drawer. This feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience.
 
@@ -86,6 +94,8 @@ To find more stack information, set a break point in the fetch handler. The det
 
 When the debugger pauses inside a fetch handler, a combined stack information is displayed in the panel to the right. After that, you can move around in the stack frames.
 
-### Future work
+
+<!-- ------------------------------ -->
+#### Future work
 
 The Microsoft Edge DevTools team plans to further develop the cache detail, and are investigating more ways to improve the service worker debugging experience for [Progressive Web Application (PWA)](https://developer.mozilla.org/docs/Web/Progressive_web_apps) developers.

microsoft-edge/progressive-web-apps-chromium/how-to/background-syncs.md

@@ -10,14 +10,16 @@ ms.date: 09/14/2021
 ---
 # Synchronize and update a PWA in the background
 
-Using a service worker, a Progressive Web App (PWA) can do work in the background, even when the user isn't using the app. Service workers used to be reserved for native apps, but they are now also available to PWAs, providing a better offline experience.
+Using a service worker, a Progressive Web App (PWA) can do work in the background, even when the user isn't using the app, and provide a better offline experience.
 
 Consider the following use cases:
+
 * An email app that lets users compose messages and send them at any time, even when offline.
 * A news app that fetches new articles every day, for the user to read later when they open the app.
 * A music app that lets users download songs for listening offline.
 
 All three of these use cases are possible with PWAs, by using the following APIs:
+
 * Background Sync API
 * Periodic Background Sync API
 * Background Fetch API

microsoft-edge/progressive-web-apps-chromium/how-to/best-practices.md

@@ -116,7 +116,7 @@ See [Build PWA-driven widgets](./widgets.md).
 
 When connected to a slow or unreliable network, or even with no internet access, installed applications can usually still be opened and used. Users of installed applications expect them to continue working under these conditions. They also expect the network-dependent parts of an application to gracefully handle the lack of connection with a custom message and local caching capabilities.
 
-To improve retention, use the service worker's `Fetch` and `Cache` APIs, and local data storage access and provide a good offline experience to your users.
+To improve retention, add a service worker to your PWA. You can use the service worker's `Fetch` and `Cache` APIs, and local data storage access, to provide a good offline experience for your users.
 
 You can provide a good offline experience in several steps:
 

microsoft-edge/progressive-web-apps-chromium/how-to/debug.md

@@ -12,7 +12,7 @@ ms.date: 11/25/2022
 
 Progressive Web Apps (PWAs) are built by using web technologies. Therefore, all the tools available in Microsoft Edge DevTools are also helpful for PWAs. To learn more, refer to the [Microsoft Edge DevTools documentation](../../devtools-guide-chromium/landing/index.yml).
 
-PWAs also use service workers, web app manifests, and other specific features and APIs that require special debugging tools.
+PWAs also use web app manifests and can use service workers and other specific features and APIs that require special debugging tools.
 
 
 <!-- ====================================================================== -->

microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color.md

@@ -169,7 +169,9 @@ Your PWA can be enhanced on Windows by supplying the images with specific dimens
  * 96x96 - target size for taskbar, start menu, task manager
  * 256x256 - target size for taskbar, start menu, task manager
 
-### Image level summary
+
+<!-- ------------------------------ -->
+#### Image level summary
 
 Consider, for example, how your app icon might show different content depending on the available surface area:
 
@@ -187,7 +189,9 @@ Consider, for example, how your app icon might show different content depending
 
 Notice how the content of the icon changed. This is possible only through the use of higher levels of icon support. We recommend developers choose higher levels to give the best experience for your Windows users. 
 
-### Icon descriptions
+
+<!-- ------------------------------ -->
+#### Icon descriptions
 
 Below you'll find a description of each app icon and where they show up in Windows.
 
@@ -261,7 +265,9 @@ The splash screen asset is shown as the splash screen for your app. Currently su
 * 1240x600 (2x scale)
 * 2480x1200 (4x scale)
 
-### Target sized images
+
+<!-- ------------------------------ -->
+#### Target sized images
 
 In addition to the standard scale factor sizes described above, we also recommend creating "target-size" assets. We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. Target-size assets are for Windows surfaces that don't use the scaling plateau system. 
 

microsoft-edge/progressive-web-apps-chromium/how-to/index.md

@@ -46,9 +46,9 @@ 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.
 
-Note that although your front-end code runs by using the device's web browser, the browser user interface may not be visible as your app can choose to run in a standalone window.
+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 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.
+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:
 
@@ -80,7 +80,7 @@ To start developing your PWA, you can use a local web server instead. To start a
 
 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 now offer HTTPS by default, but if your host doesn't, [Let's Encrypt](https://letsencrypt.org/) offers a free alternative for creating the necessary certificates.
+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](https://letsencrypt.org/) offers a free alternative for creating the necessary certificates.
 
 For example, you can create an [Azure free account](https://azure.microsoft.com/free). If you host your website on the [Microsoft Azure App Service](https://azure.microsoft.com/services/app-service/web), it's served over HTTPS by default.
 
@@ -169,7 +169,7 @@ Your VS Code project should now look somewhat like this:
 
 Now that your app has a web app manifest file, and a start page, it's time to build out the main app functionality.
 
-In this step of the tutorial, we'll create a basic temperature unit conversion app.
+In this step of the tutorial, we'll create a temperature unit conversion app.
 
 1. To create the main user interface content, copy the following HTML code and paste it into the `index.html` file, replacing the `<h1>` HTML tag:
 
@@ -248,7 +248,7 @@ In this step of the tutorial, we'll create a basic temperature unit conversion a
  <script src="converter.js"></script>
  ```
 
-1. Now add some CSS style to the app, to make it more visually interesting. Create a new file called `converter.css` in your project and add the following code to it:
+1. 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:
 
  ```css
  html {
@@ -305,21 +305,24 @@ In this step of the tutorial, we'll create a basic temperature unit conversion a
 
  ![Running your new PWA, with the frontend code, on localhost](./index-images/sample-pwa-app-with-frontend-code.png)
 
-Your app does something useful now, but it can't be installed yet, because there's no service worker. You'll make your app installable in the next step, by creating a service worker.
+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 faster and independent of network conditions.
+Service workers are a key technology that help make PWAs fast and independent of network conditions.
 
 Service workers are specialized [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) that intercept network requests from your PWA and enable scenarios that were previously limited to native apps, including:
 
 * Offline support.
 * Advanced caching.
 * Running background tasks such as receiving PUSH messages, adding badges to the app icon, or fetching data from a server.
 
-For Microsoft Edge to be able to install the app, your app must have a service worker file.
+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 more reliable.
+* To make it faster.
+* To allow it to work offline.
 
 A service worker is defined in a JavaScript file that's loaded by your app. To add a service worker to your project:
 
@@ -364,8 +367,8 @@ A service worker is defined in a JavaScript file that's loaded by your app. To a
  });
  ```
 
- The `sw.js` file will act as your PWA's service worker. The code above listens to the `install` event and uses it to cache all resources the app needs to function: the start HTML page, the converter JavaScript file, and the converter CSS file.
- 
+ 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.
 
 1. Open `index.html` and add the following code at the end of the `<body>` tag to register your service worker:
@@ -402,7 +405,7 @@ To confirm that your service worker is running:
 <!-- ====================================================================== -->
 ## Step 6 - Install the app
 
-Now that your app has a web app manifest and a service worker, supporting browsers can install it as a PWA.
+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.
 
@@ -418,7 +421,7 @@ To learn more about installing PWAs, see [Use Progressive Web Apps in Microsoft
 <!-- ====================================================================== -->
 ## Next steps
 
-The simple temperature converter PWA you built so far only scratches the surface 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.
+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:
 

microsoft-edge/progressive-web-apps-chromium/how-to/notifications-badges.md

@@ -31,7 +31,9 @@ Notifications are useful for apps to take part in the system's notification cent
 
 PWAs can display a badge on their app icon by using the [App Badging API](https://developer.mozilla.org/docs/Web/API/Badging_API). The badge can be empty or it can contain a number.
 
-### Check for support
+
+<!-- ------------------------------ -->
+#### Check for support
 
 Before using the App Badging API, first check whether the App Badging API is supported in the browser engine that your app runs in, as follows:
 
@@ -41,7 +43,9 @@ if (navigator.setAppBadge) {
 }
 ```
 
-### Displaying the badge
+
+<!-- ------------------------------ -->
+#### Displaying the badge
 
 To set the badge, use the following code from your app frontend or service worker.
 
@@ -65,7 +69,9 @@ navigator.setAppBadge(42).then(() => {
 });
 ```
 
-### Clearing the badge
+
+<!-- ------------------------------ -->
+#### Clearing the badge
 
 To remove the badge on the app icon, use the following code from your frontend or service worker:
 
@@ -87,7 +93,9 @@ navigator.setAppBadge(0);
 
 PWAs can display notifications by using the [Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API).
 
-### Check for support
+
+<!-- ------------------------------ -->
+#### Check for support
 
 Before using the API, check that it is supported, as follows:
 
@@ -97,7 +105,9 @@ if ("Notification" in window) {
 }
 ```
 
-### Request permission
+
+<!-- ------------------------------ -->
+#### Request permission
 
 The Notifications API can only be used after having requested the user's permission to display messages. To request permission, use the `requestPermission` function, as shown below.
 
@@ -121,7 +131,9 @@ if (Notification.permission === "granted") {
 }
 ```
 
-### Display the notification
+
+<!-- ------------------------------ -->
+#### Display the notification
 
 Once you know that the API is supported and the user has accepted notifications, you can display a notification by creating a `Notification` object:
 
@@ -150,7 +162,9 @@ self.registration.showNotification("Hello from the Service Worker!");
 
 The `showNotification` function supports the same arguments as the `Notification` constructor used in the previous example. The `showNotification` function also supports the `actions` property, which is described in the following section.
 
-### Add actions to notifications
+
+<!-- ------------------------------ -->
+#### Add actions to notifications
 
 In a notification, it's possible to add actions for the user to perform. This is only supported in persistent notifications which are shown by using the `ServiceWorkerRegistration.showNotification` function.