Skip to content

Commit

Permalink
Merge pull request #3215 from MicrosoftDocs/user/mikehoffms/service-w…
Browse files Browse the repository at this point in the history
…orker-optional

Service worker no longer required, for Install UI to appear
  • Loading branch information
captainbrosset committed Jul 10, 2024
2 parents 4d65f21 + 31f9f32 commit 9b5e638
Show file tree
Hide file tree
Showing 41 changed files with 259 additions and 201 deletions.
10 changes: 5 additions & 5 deletions microsoft-edge/developer/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,10 @@ landingContent:
linkLists:
- linkListType: overview
links:
- text: Progressive Web Apps overview
- text: Overview of Progressive Web Apps
url: ../progressive-web-apps-chromium/index.md

- text: Get started with Progressive Web Apps
- text: Get started with PWAs
url: ../progressive-web-apps-chromium/how-to/index.md

- text: Debug Progressive Web Apps
Expand All @@ -134,13 +134,13 @@ landingContent:

- linkListType: concept
links:
- text: Offline scenarios
- text: Store data on the device
url: ../progressive-web-apps-chromium/how-to/offline.md

- text: Service Workers
- text: Use a service worker to manage network requests
url: ../progressive-web-apps-chromium/how-to/service-workers.md

- text: Web App Manifests
- text: Use a web app manifest to integrate a PWA into the OS
url: ../progressive-web-apps-chromium/how-to/web-app-manifests.md
# =============================================================================
# Card r2c2
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Use the **Application** tool to inspect, modify, and debug web app manifests, se

* Use the **Manifest** pane to inspect your web app manifest and trigger "Add to Homescreen" events.

* Use the **Service Workers** pane for service-worker-related tasks, such as:
* Use the **Service workers** pane for service-worker-related tasks, such as:
* Unregistering or updating a service.
* Emulating push events.
* Going offline.
Expand Down Expand Up @@ -108,16 +108,16 @@ Service workers are a fundamental technology in the web platform. Service worke

<!--Related Guides:
* [Intro to Service Workers](/web/fundamentals/primers/service-worker)
* [Intro to Service Workers](/web/fundamentals/primers/service-worker) - not found: https://learn.microsoft.com/web/fundamentals/primers/service-worker
* [Push Notifications: Timely, Relevant, and Precise](/web/fundamentals/push-notifications) -->

<!-- [How Push Works](/web/fundamentals/push-notifications/how-push-works) -->

<!--TODO: Link to sections when available. -->

The **Service Workers** pane in the **Application** tool is the main place in DevTools to inspect and debug service workers:
The **Service workers** pane in the **Application** tool is the main place in DevTools to inspect and debug service workers:

![The Service Workers pane](./index-images/service-workers-pane.png)
![The Service workers pane](./index-images/service-workers-pane.png)<!-- todo: latest ui has 'w' -->

* If a service worker is installed to the currently open page, then it is listed on this pane. For example, in the previous figure, there is a service worker installed for the scope of `https://weather-pwa-sample.firebaseapp.com`.

Expand All @@ -137,7 +137,7 @@ The **Service Workers** pane in the **Application** tool is the main place in De

* The **Source** line tells you when the currently running service worker was installed. The link is the name of the source file of the service worker. Choosing on the link sends you to the source of the service worker.

* The **Status** line tells you the status of the service worker. The ID number next to the green status indicator (`#36` in previous figure) is for the currently active Service Worker. Next to the status, a **start** button (if the service worker is stopped) or a **stop** button (if the service worker is running) is displayed. Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **stop** button may simulate that. Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. It frequently reveals bugs due to faulty assumptions about persistent global state.
* The **Status** line tells you the status of the service worker. The ID number next to the green status indicator (`#36` in previous figure) is for the currently active service worker. Next to the status, a **start** button (if the service worker is stopped) or a **stop** button (if the service worker is running) is displayed. Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **stop** button may simulate that. Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. It frequently reveals bugs due to faulty assumptions about persistent global state.

* The **Clients** line tells you the origin that the service worker is scoped to. The **focus** button is mostly useful when you've enabled the **show all** checkbox. When that checkbox is enabled, all registered service workers are listed. If you click the **focus** button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.

Expand All @@ -147,7 +147,7 @@ If the service worker causes any errors, a new label called **Errors** shows up.
![Service worker with errors](../media/sw-error.png)
-->

<!--TODO: Capture Service Worker Errors sample when available. -->
<!--TODO: Capture "Service Worker Errors" sample when available. -->
<!--TODO: Link Web "How tickle works" sections when available. -->


Expand Down
18 changes: 9 additions & 9 deletions microsoft-edge/devtools-guide-chromium/service-workers/index.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
title: Service Worker improvements
description: How to use each Service Worker improvement.
title: Service worker improvements
description: How to use each service worker improvement in the Network, Application, and Sources tools in Microsoft Edge DevTools.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: devtools
ms.date: 02/19/2021
---
# Service Worker improvements
# 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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -317,18 +317,18 @@ For more information, see [Lighthouse tool](../../../lighthouse/lighthouse-tool.


<!-- ====================================================================== -->
### Deprecation of other origins listing in the Service Workers pane
### Deprecation of other origins listing in the Service workers pane

The **Application** tool now provides a link from the **Service workers** pane to view the full list of service workers from other origins. To access the list of service workers without opening DevTools, go to `edge://service-worker-internals/?devtools`.

Previously DevTools displayed a list nested under the **Application** tool > **Service workers** pane.
Previously DevTools displayed a list nested under the **Application** tool > **Service Workers** pane.<!-- keeping old W to match png -->

![Link to other origins](./devtools-images/sw-other-origins.png)

Chromium issue: [#807440](https://crbug.com/807440)

See also:
* [Service Worker improvements](../../../service-workers/index.md)
* [Service worker improvements](../../../service-workers/index.md)
* [Application tool, to manage storage](../../../storage/application-tool.md)


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ The following new features in the **Network** tool, **Application** tool, and **
The routing of a request displays the `startup` and `fetch` events based on the network requests that run through service workers. The timelines are accessed from either the **Application** or **Network** tool. The timelines help when you are having trouble with service workers and want to see if something is wrong with the `startup` or `fetch` event.

See also:
* [Service Worker improvements](../../../service-workers/index.md)
* [Service worker improvements](../../../service-workers/index.md)


<!-- ====================================================================== -->
Expand All @@ -135,7 +135,7 @@ In the **Application** tool, view all service worker request routing information

To display additional context when debugging a service worker:

1. In the **Application** tool, on the left, select **Service Workers**.
1. In the **Application** tool, on the left, select **Service Workers**.<!-- keeping old W, to match png, in this section -->

1. Click the **Network requests** link:

Expand All @@ -151,7 +151,7 @@ To display additional context when debugging a service worker:

See also:
* [Application tool, to manage storage](../../../storage/application-tool.md)
* [Service Worker improvements](../../../service-workers/index.md)
* [Service worker improvements](../../../service-workers/index.md)


<!-- ====================================================================== -->
Expand All @@ -168,7 +168,7 @@ In the **Network** tool, you can debug network requests that are run by service

See also:
* [Display the timing breakdown of a request](../../../network/reference.md#display-the-timing-breakdown-of-a-request) in _Network features reference_.
* [Service Worker improvements](../../../service-workers/index.md)
* [Service worker improvements](../../../service-workers/index.md)


<!-- ====================================================================== -->
Expand All @@ -186,7 +186,7 @@ In the following figure, the reference is selected, and has opened the initiator

See also:
* [View the call stack](../../../javascript/reference.md#view-the-call-stack) in _JavaScript debugging features_
* [Service Worker improvements](../../../service-workers/index.md)
* [Service worker improvements](../../../service-workers/index.md)


<!-- ====================================================================== -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -454,11 +454,11 @@ See also:
In the **Application** tool, the **Frames** page has the following updates.


###### Service Workers information in Frame details
###### Service workers information in Frame details

The **Application** tool now lists a dedicated service worker under the parent frame. In the following figure, service worker details are displayed. To display the service worker details, select **Application** > **Frames** > `top` > **Service Workers** and then click a service worker.
The **Application** tool now lists a dedicated service worker under the parent frame. In the following figure, service worker details are displayed. To display the service worker details, select **Application** > **Frames** > `top` > **Service Workers**<!-- todo: when the below .png is updated to show "Service workers", change to "w" --> and then click a service worker.

![Service Workers information in the Frames details](./devtools-images/application-frames-service-workers-details.png)
![Service workers information in the Frames details](./devtools-images/application-frames-service-workers-details.png)

For the history of this feature in the Chromium open-source project, see Issue [1122507](https://crbug.com/1122507).

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: What's New in DevTools (Microsoft Edge 91)
description: Wavy underlines highlight code issues in the Elements tool, Service worker update timeline, and more.
description: Wavy underlines highlight code issues in the Elements tool, service worker update timeline, and more.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
Expand Down Expand Up @@ -83,24 +83,24 @@ Note: As of May 2022, tooltips aren't supported from the **Activity Bar**.
<!-- ====================================================================== -->
## Service worker update timeline

<!--todo: Update the linked [Service Worker improvements](../../../service-workers/index.md) article. -->
<!--todo: Update the linked [Service worker improvements](../../../service-workers/index.md) article. -->

<!-- Title: The tasks associated with your Service Worker -->
<!-- Subtitle: Debug with Service Worker Update Cycle -->
<!-- Title: The tasks associated with your service worker -->
<!-- Subtitle: Debug with service worker Update Cycle -->

In Microsoft Edge version 91 or later, if you're a Progressive Web App or Service Worker developer, display the update lifecycle of your Service Workers as a timeline in the **Application** tool. This feature helps you understand the time your Service Worker spends in each of the following stages:
In Microsoft Edge version 91 or later, if you're a Progressive Web App or service worker developer, display the update lifecycle of your service workers as a timeline in the **Application** tool. This feature helps you understand the time your service worker spends in each of the following stages:

* **Install**
* **Wait**
* **Activate**

![View the Timeline in the Update Cycle for your Service Worker](./devtools-images/application-service-workers-update-cycle-version-73-focus.png)
![View the Timeline in the Update Cycle for your service worker](./devtools-images/application-service-workers-update-cycle-version-73-focus.png)

For real-time updates on this feature in the Chromium open-source project, see Issue [1066604](https://crbug.com/1066604).

See also:
* [The Service Worker lifecycle](../../../../progressive-web-apps-chromium/how-to/service-workers.md#the-service-worker-lifecycle).
* [Service Worker improvements](../../../service-workers/index.md) - DevTools debugging tools for Progressive Web Apps and Service Workers.
* [The service worker lifecycle](../../../../progressive-web-apps-chromium/how-to/service-workers.md#the-service-worker-lifecycle) in _Use a service worker to manage network requests_.
* [Service worker improvements](../../../service-workers/index.md) - DevTools debugging tools for Progressive Web Apps and service workers.


<!-- ====================================================================== -->
Expand Down Expand Up @@ -128,7 +128,7 @@ To view errors and warnings in your Web App Manifest, select **Application** too
For real-time updates on this feature in the Chromium open-source project, see Issue [1185945](https://crbug.com/1185945).

See also:
* [Use the Web App Manifest to integrate your Progressive Web App into the Operating System](../../../../progressive-web-apps-chromium/how-to/web-app-manifests.md)
* [Use a web app manifest to integrate a PWA into the OS](../../../../progressive-web-apps-chromium/how-to/web-app-manifests.md)
* [PWABuilder: Image Generator](https://www.pwabuilder.com/imageGenerator) - creates app icons for various platforms, to include in your Web App Manifest.


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ See also:
<!-- Title: Fix: Icons and tags in the DevTools are now aligned -->
<!-- Subtitle: Icons for service workers and script tags in the Elements tool now appear as expected. -->

In previous versions of Microsoft Edge, the **Expand** (![The expand/collapse triangle icon](./devtools-images/expand-collapse-triangle-icon.png)) icons in the **Service Workers** section of the **Application** tool were not aligned. The version number in the **Update Cycle** table was cutting off the **Expand** icons. In Microsoft Edge 98, this issue has been fixed:
In previous versions of Microsoft Edge, the **Expand** (![The expand/collapse triangle icon](./devtools-images/expand-collapse-triangle-icon.png)) icons in the **Service Workers**<!-- todo: when the below .png is updated to show "Service workers", change to "w" --> section of the **Application** tool were not aligned. The version number in the **Update Cycle** table was cutting off the **Expand** icons. In Microsoft Edge 98, this issue has been fixed:

![The icons in the Service Workers section of the Application tool are now aligned, so the Expand/Collapse icons are now fully visible](./devtools-images/service-worker-icons-aligned-expand-icon-visible.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ If you don't have the **Fulfilled by** column, right-click the table headers in

See also:
* [Filter requests by properties](../../../network/reference.md#display-a-log-of-requests) in _Network features reference_.
* [Service Worker improvements](../../../service-workers/index.md).
* [Service worker improvements](../../../service-workers/index.md).

For the history of this feature, see [Issue #16](https://github.com/MicrosoftEdge/DevTools/issues/16).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ A basic DevTools extension consists of two files, as shown in [Step 1 code](http
| name | The name of the extension that will appear under `edge://extensions/`. |
| description | The description of the extension that will be displayed under the name of the extension. |
| version | The version of the extension that will appear next to the name of the extension. |
| manifest_version | Determines the set of features that the extension will be using such as Service workers or Network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](./manifest-v3.md). |
| manifest_version | Determines the set of features that the extension will be using, such as service workers or network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](./manifest-v3.md). |
| devtools_page | The path to an HTML file that will be run every time the DevTools UI is opened. Though the page is not rendered in DevTools, it will be used to load the necessary JavaScript files for the extension. |

1. An html file to match the `devtools_page` field in the manifest file.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Enterprises can continue to use the blocking behavior of the Web Request API for
<!-- ====================================================================== -->
## Background service workers

Service workers are available for testing in the Canary preview channel of Microsoft Edge. To migrate your extensions from background pages to service workers, see [Migrating from Background Pages to Service Workers](https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers). The Microsoft Edge extensions team is evaluating and investigating the impact that this change brings to both developers and users.
Service workers are available for testing in the Canary preview channel of Microsoft Edge. To migrate your extensions from background pages to service workers, see [Migrate to a service worker](https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers). The Microsoft Edge extensions team is evaluating and investigating the impact that this change brings to both developers and users.


<!-- ====================================================================== -->
Expand Down
Loading

0 comments on commit 9b5e638

Please sign in to comment.