Service worker no longer required, for Install UI to appear

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/index.md

@@ -48,7 +48,7 @@ You use HTML to describe the content in your app, such as the text, images, text
 
 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.
 
-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 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.
 
 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,21 @@ 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.
+Your 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 and faster.
 
 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 +364,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 +402,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 +418,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 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.
 
 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.