Remove article "Service worker improvements"

microsoft-edge/devtools/network/index.md

@@ -28,7 +28,7 @@ Use the **Network** tool to make sure the resources your webpage needs to run ar
 
 This is a step-by-step tutorial walkthrough of the **Network** tool, for inspecting network activity for a page.
 
-For an overview of the network-related DevTools features, see [Network features reference](reference.md).
+For an overview of the network-related DevTools features, see [Network features reference](./reference.md).
 
 
 <!-- ------------------------------ -->

microsoft-edge/devtools/network/reference.md

@@ -26,8 +26,7 @@ ms.date: 07/17/2025
 
 <!-- for each png, decide whether to create screenshot -->
 
-The **Network** tool has the following features, to inspect network activity for a webpage.  For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](index.md).
-
+The **Network** tool has the following features, to inspect network activity for a webpage.  For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](./index.md).
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
@@ -1356,7 +1355,7 @@ To display the timing breakdown of a request:
 
 For a faster way to access the data, see [Preview a timing breakdown](#preview-a-timing-breakdown).
 
-For more information about each of the phases that may be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained).
+For information about each of the phases that might be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained), below.
 
 
 <!-- ---------- -->
@@ -1369,7 +1368,7 @@ The **Waterfall** column is off by default.  To turn on the **Waterfall** column
 
 ![Previewing the timing breakdown of a request](./reference-images/resources-waterfall-hover.png)
 
-To view the data without hovering, see the top of the present section, [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request).
+To view the data without hovering, see [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request), above.
 
 
 <!-- ---------- -->
@@ -1378,32 +1377,77 @@ To view the data without hovering, see the top of the present section, [Display
 
 Each of these phases may appear in the **Timing** tab:
 
-- **Queueing**. The browser queues requests when any of the following are true
-  - There are higher priority requests.
-  - There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
-  - The browser is briefly allocating space in the disk cache.
+* **Queueing**. The browser queues requests when any of the following are true
+  * There are higher priority requests.
+  * There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
+  * The browser is briefly allocating space in the disk cache.
+
+* **Stalled**. The request could be stalled for any of the reasons described in **Queueing**.
+
+* **Startup**.<!-- todo: define -->
+
+* **respondWith**.<!-- todo: define and say can expand section (png is below) -->
+
+* **DNS Lookup**. The browser is resolving the IP address for the request.
+
+* **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL).
+
+* **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server).
+
+* **Request sent**. The request is being sent.
+
+* **ServiceWorker Preparation**. The browser is starting up the service worker.
+
+* **Request to ServiceWorker**. The request is being sent to the service worker.
+
+* **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response.
+
+* **Content Download**. The browser is receiving the response.
+
+* **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+
+* **Reading Push**. The browser is reading the local data that was previously received.
+
 
-- **Stalled**. The request could be stalled for any of the reasons described in **Queueing**.
+<!-- ---------- -->
+###### Analyze a service worker request routing
+<!--
+#### Display the timing breakdown of a service worker request
+-->
+
+To visualize request routing, timelines display the service worker `Startup` event and the `respondWith` fetch events.  You can debug and visualize a network request that passed through a service worker.
 
-- **DNS Lookup**. The browser is resolving the IP address for the request.
+To display the timing breakdown of a service worker request:
 
-- **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL).
+1. Go to a page that uses a service worker, such as the [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo page, in a new window or tab.
 
-- **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server).
+1. Right-click the page, and then select **Inspect**.
+
+   DevTools opens.
+
+1. Select the **Network** tool.
 
-- **Request sent**. The request is being sent.
+1. Reload the page.
 
-- **ServiceWorker Preparation**. The browser is starting up the service worker.
+1. In the list of requests, select a network request that went through a service worker file.  For example, select **about.css**.
 
-- **Request to ServiceWorker**. The request is being sent to the service worker.
+   The sidebar appears.
 
-- **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response.
+1. In the sidebar, click the **Timing** tab:
 
-- **Content Download**. The browser is receiving the response.
+   ![The Timing tab within the Network tool](./reference-images/timing-tab.png)
 
-- **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+   The **Service Worker** section displays timing information about the **Startup** and **respondWith** phases.
 
-- **Reading Push**. The browser is reading the local data that was previously received.
+1. Click the expander arrow on the **respondWith** section:
+
+   ![The expanded respondWith section](./reference-images/respondwith-expanded.png)
+
+1. Within the **respondWith** section, click the expander arrow on **Original Request**:
+
+   ![The fully expanded respondWith section](./reference-images/respondwith-expanded-fully.png)
+
+1. Click the expander arrow on **Response Received**.
 
 
 <!-- ------------------------------ -->
@@ -1741,3 +1785,6 @@ Demo webpages:
 
 [![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
 This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
+
+
+

microsoft-edge/devtools/progressive-web-apps/index.md

@@ -209,6 +209,102 @@ Related Guides:
 * [Inspect and manage local storage and caches](/iterate/manage-data/local-storage)  -->
 
 
+<!-- ====================================================================== -->
+## Service worker update timeline
+
+<!-- todo: 
+The [Service worker update timeline] section:
+https://learn.microsoft.com/en-us/microsoft-edge/devtools/service-workers/#service-worker-update-timeline
+will become a bullet point in 
+the list that describes the UI in 
+[Service workers](https://learn.microsoft.com/en-us/microsoft-edge/devtools/progressive-web-apps/#service-workers) in _Debug a Progressive Web App (PWA)_.
+At the end of the list, 
+after the bullet that says 
+"The Clients line tells you the ...", 
+add a list item that describes the Update Cycle section, eg:
+
+The **Update Cycle** section reflects the update lifecycle of the service worker.
+This timeline displays the installation and activation events.
+Each event has a corresponding dropdown arrow to display more details.
+-->
+
+<!-- todo: 
+The [Request routing and fetch events] section:
+https://learn.microsoft.com/en-us/microsoft-edge/devtools/service-workers/#service-worker-update-timeline
+
+Should become a new h4 section at the end of [Service workers](https://learn.microsoft.com/en-us/microsoft-edge/devtools/progressive-web-apps/#service-workers) in _Debug a Progressive Web App (PWA)_, called eg [Display network requests handled by a service worker].
+
+This new section will describe how to
+click on the **Network requests** button that's in 
+the **Service workers** pane of the **Application** tool 
+to open the **Network** tool, 
+with a filter that only shows 
+the requests that were handled by this service worker.
+-->
+
+The **Application** tool helps you work with service workers and the network requests that pass through each service worker.
+
+For example, the following tasks are supported:<!-- todo: how? where? -->
+
+* Debug based on service worker timelines.<!-- todo: how? where? -->
+    * The start of a request and duration of the bootstrap.
+    * Update to service worker registration.<!-- todo: how? where? -->
+    * 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.<!-- todo: how? where? -->
+* Step into and out of fetch event handler with page script information, in the **Sources** tool.
+
+Features for working on service workers are in the following tools:
+
+* The **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<!-- todo: what is the Timing tool, how to nav to it, how to use it? --> within the **Network** tool.  See [Service workers](../network/reference.md#service-workers) in _Network features reference_.
+
+* The **Application** tool:
+
+   * To debug a service worker, use the **Service workers** page in the **Application** tool.
+
+* The **Sources** tool:
+
+   * Access page script information when stepping into fetch event handlers.  See [Viewing stack information for a service worker](../sources/index.md#viewing-stack-information-for-a-service-worker) in _Sources tool overview_.
+
+
+<!-- ------------------------------ -->
+#### Timeline
+
+![Application view](./application-tool-images/sw-application-timeline.png)
+
+A timeline in the **Application** tool reflects 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.
+
+See also:
+* [Viewing stack information for a service worker](../sources/index.md#viewing-stack-information-for-a-service-worker) in _Sources tool overview_.
+* [Service workers](../network/reference.md#service-workers) in _Network features reference_.
+* [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) - at MDN, about service workers.
+
+
+<!-- ------------------------------ -->
+#### Request routing and fetch events
+
+You can access service worker timelines through the **Network** tool.  This feature benefits performance, minimizes UI duplication, and creates a comprehensive debugging experience.
+
+To access the service worker timelines:
+
+1. Open a service worker.
+
+1. Click the **Network requests** button, in the **Application** tool.
+
+   The **Timing** tab opens within the **Network** tool, showing information about request routing, filtering on `is:service-worker-intercepted` in the **Filter** text box.
+
+1. Use the **respondWith** dropdown arrows for fetch event request and response information.
+
+The **Network** tool displays the network requests that went through the service worker you are debugging.  The automatic filter is a way to narrow down your exploration.
+
+See also:
+* [Inspect network activity](./index.md)
+
+
 <!-- ====================================================================== -->
 > [!NOTE]
 > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).

microsoft-edge/devtools/sources/index.md

@@ -27,7 +27,6 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
-
 * [The Navigator, Editor, and Debugger panes](#the-navigator-editor-and-debugger-panes)
 * [Using the Navigator pane to select files](#using-the-navigator-pane-to-select-files)
    * [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage)
@@ -58,6 +57,8 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a
    * [Advantages of the debugger's Watch and Scope over console.log](#advantages-of-the-debuggers-watch-and-scope-over-consolelog)
    * [Debug from Visual Studio Code directly](#debug-from-visual-studio-code-directly)
    * [Articles about debugging](#articles-about-debugging)
+* [Service workers](#service-workers)
+   * [Viewing stack information for a service worker](#viewing-stack-information-for-a-service-worker)
 * [See also](#see-also)
 
 

microsoft-edge/devtools/storage/application-tool.md

@@ -52,9 +52,3 @@ The **Application** tool has the following pages, listed on the left:
    * top
 
 To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_.
-
-
-<!-- ====================================================================== -->
-<!--
-## See also
--->

microsoft-edge/devtools/whats-new/2020/08/devtools.md

@@ -329,7 +329,7 @@ Previously DevTools displayed a list nested under the **Application** tool > **S
 Chromium issue: [#807440](https://crbug.com/807440)
 
 See also:
-* [Service worker improvements](../../../service-workers/index.md)
+* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md)
 * [Application tool, to manage storage](../../../storage/application-tool.md)