Skip to content

Clarify behavior of client.url #43844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wbamberg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Clarify behavior of client.url #43844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions files/en-us/web/api/client/url/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ browser-compat: api.Client.url

{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}

The **`url`** read-only property of the {{domxref("Client")}}
interface returns the URL of the current service worker client.
The **`url`** read-only property of the {{domxref("Client")}} interface returns the URL of the current service worker client.

Note that the {{domxref("Client.url")}} property is not updated unless a new page is actually loaded. This means that it will not be updated if the user navigates within the same page using a URL fragment, or if a {{glossary("SPA", "single-page app (SPA)")}} intercepts a navigation event (for example, using the [Navigation API](/en-US/docs/Web/API/Navigation_API)) and updates the page content using client-side code.

## Value

Expand Down
16 changes: 12 additions & 4 deletions files/en-us/web/api/clients/openwindow/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,34 @@ URL is from the same origin as the service worker or a {{Glossary("null", "null

## Examples

### Opening a window on a notification click

In this example a service worker creates and then shows a that contains an associated URL, which is under the service worker's scope. When the user clicks the notification:

- If the page at the notification's URL is already open, the service worker focuses it.
- Otherwise, the service worker opens the page in a new window.

Note that the {{domxref("Client.url")}} property is not updated unless a new page is actually loaded. This means that it will not be updated if the user navigates within the same page using a URL fragment, or if a {{glossary("SPA", "single-page app (SPA)")}} intercepts a navigation event (for example, using the [Navigation API](/en-US/docs/Web/API/Navigation_API)) and updates the page content using client-side code. Consequently, this technique is not suitable for SPAs.

```js
// Send notification to OS if applicable
// Create and show notification
if (self.Notification.permission === "granted") {
const notificationObject = {
body: "Click here to view your messages.",
data: { url: `${self.location.origin}/some/path` },
// data: { url: 'http://example.com' },
};
self.registration.showNotification(
"You've got messages!",
notificationObject,
);
}

// Notification click event listener
// Handle notification click
self.addEventListener("notificationclick", (e) => {
// Close the notification popout
e.notification.close();
// Get all the Window clients
e.waitUntil(
// Get all the Window clients
clients.matchAll({ type: "window" }).then((clientsArr) => {
const windowToFocus = clientsArr.find(
(windowClient) => windowClient.url === e.notification.data.url,
Expand Down