You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Handle links from other origins by using scope extensions
46
46
47
-
Scope extensions make it possible for a PWA to capture navigation to paths, subdomains, or even sites other than its own scope. This can be useful for PWAs that span multiple domains for localization purposes. For example, a PWA may span `contoso.com`, `contoso.co.uk`, and `contoso.fr`.
47
+
Scope extensions make it possible for a Progressive Web App (PWA) to capture navigation to domains, subdomains, or paths other than its own scope. Scope extensions allow web apps that rely on multiple top-level domains, multiple subdomains, or multiple paths to be presented as a single web app.
48
48
49
-
The manifest of a PWA defines which part of the hosting domain the PWA is scoped to. For example, the `www.contoso.com` domain name may have a PWA defined under `www.contoso.com/app` with its scope set to `/app`. In this case, all the web pages available within the `www.contoso.com/app` path are part of the PWA scope. However, the web pages within the `www.contoso.com/foo` path are not part of the PWA scope. Furthermore, web pages that are available at `bar.contoso.com/app`or `www.contoso.co.uk` are also not part of the PWA scope.
49
+
Scope extension can be useful for cases such as PWAs that handle localization by using multiple domains, subdomains, or paths.
50
50
51
51
52
52
<!-- ------------------------------ -->
53
-
#### Origin trial
53
+
#### PWA scope when not using scope extensions
54
54
55
-
As of October 17, 2024, the scope extensions feature is an origin trial. For status, see [Web app scope extensions feature](https://chromestatus.com/feature/5746537956114432) at Chrome Platform Status.
55
+
The manifest of a PWA defines which part of the hosting domain, such as a specific path, the PWA is scoped to. For example, the `www.contoso.com` domain name may have a PWA defined under the path `www.contoso.com/app`, with its scope set to `/app`.
56
56
57
-
When the feature can be used in Microsoft Edge and is no longer in origin trial, the feature will be documented in the present article. See [Scope Extensions for Web Apps](https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md), an Explainer in the **manifest-incubations** repo.
57
+
In that case, all webpages within the `www.contoso.com/app` path are part of the PWA scope. However, if you don't use scope extensions, the following webpages are not part of that PWA scope:
58
58
59
-
See also:
60
-
*[Use origin trials in Microsoft Edge](../../origin-trials/index.md)
59
+
* Webpages at a different domain, such as `www.contoso.co.uk`.
60
+
* Webpages at a different subdomain, such as `bar.contoso.com`.
61
+
* Webpages at a different path, such as `www.contoso.com/foo`.
#### Extending scope to other domains, subdomains, or paths
66
+
67
+
By using scope extensions, a PWA can span other domains, subdomains, or paths. For example:
68
+
69
+
A PWA can span the following top-level domains:
70
+
*`contoso.com`
71
+
*`contoso.co.uk`
72
+
*`contoso.fr`
73
+
74
+
A PWA can span the following subdomains:
75
+
*`www.contoso.com`
76
+
*`bar.contoso.com`
65
77
66
-
*[PWAs as URL Handlers](https://web.dev/pwa-url-handler/)
78
+
A PWA can span the following paths:
79
+
*`www.contoso.com/app`
80
+
*`www.contoso.com/foo`
81
+
82
+
83
+
<!-- ------------------------------ -->
84
+
#### The `scope_extensions` web app manifest member
85
+
86
+
The `scope_extensions` web app manifest member enables a web app to extend its scope to other origins.
87
+
88
+
For example, this web app manifest file resides at the domain `sample-app.com`, and extends the scope to a different domain, `example.com`:
89
+
90
+
```json
91
+
{
92
+
"name": "Example app",
93
+
"display": "standalone",
94
+
"start_url": "/index.html",
95
+
"scope_extensions": [
96
+
{
97
+
"type": "origin",
98
+
"origin": "https://example.com"
99
+
}
100
+
]
101
+
}
102
+
```
103
+
104
+
The origins that are listed in the `scope_extensions` member must confirm that they are associated with the web app by hosting a configuration file named `.well-known/web-app-origin-association`. The configuration file must list the web app's origin.
105
+
106
+
For example, this `.well-known/web-app-origin-association` configuration file resides at the domain `example.com`, and lists the web app's origin as the domain `sample-app.com`:
107
+
108
+
```json
109
+
{
110
+
"https://sample-app.com/": {
111
+
"scope": "/"
112
+
}
113
+
}
114
+
```
115
+
116
+
See also:
117
+
*[scope_extensions](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/scope_extensions) at MDN.
118
+
*[Scope Extensions for Web App Manifest](https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md)
*[Speculation Rules API](https://developer.mozilla.org/docs/Web/API/Speculation_Rules_API) at MDN.
267
266
268
267
269
-
<!-- ---------- -->
270
-
###### Strict Same-origin policy for Storage Access API
271
-
272
-
The Storage Access API now follows the Same-origin policy.
273
-
274
-
By default, using `document.requestStorageAccess()` in a frame only attaches cookies to the requests that are made to the iframe's origin. The `CookiesAllowedForUrls` policy and storage access headers can still be used to unblock cross-site cookies.
275
-
276
-
See also:
277
-
*[Storage Access API](https://developer.mozilla.org/docs/Web/API/Storage_Access_API) at MDN.
*[Support `width` and `height` presentational attributes on nested `<svg>` elements](#support-width-and-height-presentational-attributes-on-nested-svg-elements)
*[Corner Shaping: the corner-shape property](https://drafts.csswg.org/css-borders-4/#corner-shaping) in _CSS Borders and Box Decorations Module Level 4_.
135
128
136
129
137
-
<!-- ---------- -->
138
-
###### Support `width` and `height` presentational attributes on nested `<svg>` elements
139
-
140
-
You can now use the `width` and `height` presentational attributes on nested `<svg>` elements, through both SVG markup and CSS. This approach provides greater flexibility, allowing you to style SVG elements more efficiently within complex designs.
141
-
142
-
With this feature, the following two HTML code snippets now produce the same output:
143
-
144
-
```html
145
-
<svgwidth="100px"height="100px">
146
-
<svgstyle="width:50px;height:50px;">
147
-
<circlecx="50px"cy="50px"r="40px"fill="green" />
148
-
</svg>
149
-
</svg>
150
-
```
151
-
152
-
```html
153
-
<svgwidth="100px"height="100px">
154
-
<svgwidth="50px"height="50px">
155
-
<circlecx="50px"cy="50px"r="40px"fill="green" />
156
-
</svg>
157
-
</svg>
158
-
```
159
-
160
-
In the second line:
161
-
* The first example uses a `style` attribute that contains width and height values.
162
-
* The second example uses separate `width` and `height` attributes.
163
-
164
-
See also:
165
-
*[`<svg>`](https://developer.mozilla.org/docs/Web/SVG/Reference/Element/svg) at MDN.
*[MS High Contrast Deprecation](#ms-high-contrast-deprecation)
51
-
*[AriaNotify API](#arianotify-api-1)
49
+
*[AriaNotify API](#arianotify-api)
52
50
*[Acquisition Info API](#acquisition-info-api)
53
51
54
52
@@ -66,7 +64,7 @@ See [What's New in DevTools (Microsoft Edge 140)](../../devtools/whats-new/2025/
66
64
67
65
See [Release Notes for the WebView2 SDK](../../webview2/release-notes/index.md).
68
66
<!-- todo: when exists in Sep 2025, use instead:
69
-
For WebView2, see [1.0.n.n](../../webview2/release-notes/index.md#10nnnnnn) in _Release Notes for the WebView2 SDK_ (Sep 2025).
67
+
See [1.0.n.n](../../webview2/release-notes/index.md#10nnnnnn) in _Release Notes for the WebView2 SDK_ (Sep 2025).
70
68
-->
71
69
72
70
@@ -276,15 +274,6 @@ See also:
276
274
#### Web APIs
277
275
278
276
279
-
<!-- ---------- -->
280
-
###### `ariaNotify()` API
281
-
282
-
The `ariaNotify()` API enables your app to directly tell a screen reader what to say when there's a non-user-initiated change in the content of a webpage. In the simplest scenario, you call `ariaNotify("foo")` on the document or on an element.
283
-
284
-
See also:
285
-
*[Creating a more accessible web with Aria Notify](https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/).
286
-
287
-
288
277
<!-- ---------- -->
289
278
###### `__Http-` and `__HostHttp-` cookie name prefixes
290
279
@@ -364,19 +353,6 @@ See also:
364
353
*[Blob](https://developer.mozilla.org/docs/Web/API/Blob) at MDN.
365
354
366
355
367
-
<!-- ---------- -->
368
-
###### `restrictOwnAudio` media track constraint
369
-
370
-
371
-
The new `restrictOwnAudio` media track constraint can help create cleaner screen recordings, such as when the capturing webpage itself is playing audio and you don't want that audio to be included in the capture, to avoid undesirable echo.
372
-
373
-
By default, when using `getDisplayMedia()` and when the system audio is captured, all audio that's played by the system is captured. If the `restrictOwnAudio` constraint is set, the captured system audio is filtered to exclude audio originating from the document that called `getDisplayMedia()`.
374
-
375
-
See also:
376
-
*[MediaDevices: getDisplayMedia() method](https://developer.mozilla.org/docs/Web/API/MediaDevices/getDisplayMedia) at MDN.
377
-
*[MediaTrackConstraints](https://developer.mozilla.org/docs/Web/API/MediaTrackConstraints) at MDN.
0 commit comments