diff --git a/.github/workflows/webplat-relnotes.yaml b/.github/workflows/webplat-relnotes.yaml index 1f622f4514..53cb5d8919 100644 --- a/.github/workflows/webplat-relnotes.yaml +++ b/.github/workflows/webplat-relnotes.yaml @@ -30,19 +30,4 @@ jobs: - name: Generate release notes run: | cd scripts - token=${{ secrets.GITHUB_TOKEN }} node web-platform-release-notes.js - - - name: Commit changes if needed - run: | - files=$(git ls-files --others --exclude-standard) - if [ -n "$files" ]; then - echo "Committing the new release notes file." - git config --local user.email "${{ github.actor }}@users.noreply.github.com" - git config --local user.name "${{ github.actor }}" - git checkout -b web-platform-release-notes - git add . - git commit -m "New beta web platform release notes" - git push origin web-platform-release-notes - else - echo "No new files to add." - fi + actor=${{ github.actor }} token=${{ secrets.GITHUB_TOKEN }} node web-platform-release-notes.js diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index b2b6a423ba..de5c580752 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -685,8 +685,7 @@ The Microsoft Edge team specified and implemented the new EyeDropper API in coll Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers on the web. See also: -* [Picking colors of any pixel on the screen with the EyeDropper API | web.dev](https://web.dev/eyedropper/) -* [EyeDropper API - Web APIs | MDN developer.mozilla.org](https://developer.mozilla.org/docs/Web/API/EyeDropper_API) +* [EyeDropper API](https://developer.mozilla.org/docs/Web/API/EyeDropper_API) at MDN. * [EyeDropper API demos](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) diff --git a/microsoft-edge/devtools/device-mode/testing-other-browsers.md b/microsoft-edge/devtools/device-mode/testing-other-browsers.md index 5f6779b73a..1442c022dd 100644 --- a/microsoft-edge/devtools/device-mode/testing-other-browsers.md +++ b/microsoft-edge/devtools/device-mode/testing-other-browsers.md @@ -49,9 +49,9 @@ Browser emulators don't emulate differences in web API support or CSS support. Here are some browser emulators you can use to test your website on other browsers: -* [Firefox Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html). -* [Chrome Device Mode](https://developer.chrome.com/docs/devtools/device-mode). -* [Safari Responsive Design Mode](https://developer.apple.com/documentation/safari-developer-tools/responsive-design-mode). +* [Firefox Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) +* [Chrome Device Mode](https://developer.chrome.com/docs/devtools/device-mode) +* [Safari Responsive Design Mode](https://developer.apple.com/documentation/safari-developer-tools/responsive-design-mode) diff --git a/microsoft-edge/devtools/javascript/background-services.md b/microsoft-edge/devtools/javascript/background-services.md index 0875e95075..010158490c 100644 --- a/microsoft-edge/devtools/javascript/background-services.md +++ b/microsoft-edge/devtools/javascript/background-services.md @@ -109,9 +109,13 @@ After a **service worker** has received a [Push Message](https://developer.mozil ## Payment Handler -The [Payment Handler API](https://web.dev/web-based-payment-apps-overview/) allows web applications to handle payment requests on behalf of users. To log the payment request and response events for 3 days, even when DevTools isn't open: +The Payment Handler API allows web applications to handle payment requests on behalf of users. See [Payment Handler API](https://developer.mozilla.org/docs/Web/API/Payment_Handler_API) at MDN. -1. Open DevTools by right-clicking the webpage and selecting **Inspect**. Or by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). +To log the payment request and response events for 3 days, even when DevTools isn't open: + +1. Right-click the webpage, and then select **Inspect**. DevTools opens. + + Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). 1. In DevTools, on the main toolbar, select the **Application** tab. If that tab isn't visible, click the **More tabs** (![More tabs icon](./background-services-images/more-tabs-icon-light-theme.png)) button, or else the **More Tools** (![More Tools icon](./background-services-images/more-tools-icon-light-theme.png)) button. diff --git a/microsoft-edge/devtools/javascript/guides/mark-content-scripts-library-code.md b/microsoft-edge/devtools/javascript/guides/mark-content-scripts-library-code.md index 578107107a..04f233687e 100644 --- a/microsoft-edge/devtools/javascript/guides/mark-content-scripts-library-code.md +++ b/microsoft-edge/devtools/javascript/guides/mark-content-scripts-library-code.md @@ -45,7 +45,10 @@ To avoid pausing on extension code: ## See also * [Step 4: Step through the code](../index.md#step-4-step-through-the-code) in _Get started debugging JavaScript_ -* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs. +* [Content scripts](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) at MDN. + diff --git a/microsoft-edge/devtools/performance/index.md b/microsoft-edge/devtools/performance/index.md index d7ab4a68cf..094ae25c53 100644 --- a/microsoft-edge/devtools/performance/index.md +++ b/microsoft-edge/devtools/performance/index.md @@ -26,10 +26,12 @@ ms.date: 09/04/2023 _Runtime performance_ is how your page performs when it's running, as opposed to loading. The following tutorial teaches you how to use the DevTools **Performance** tool to analyze runtime performance. -The skills you learn in this tutorial are useful for analyzing loading, interactivity, and visual stability of your web content, which are also key indicators for [Core Web Vitals](https://web.dev/vitals/). Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. You can see these Core Web Vitals in the **Performance** tool. +The skills you learn in this tutorial are useful for analyzing loading, interactivity, and visual stability of your web content, which are also key indicators for Core Web Vitals. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. You can see these Core Web Vitals in the **Performance** tool. See also: -- [Optimize website speed using Lighthouse](../speed/get-started.md) +* [Web Vitals](https://web.dev/articles/vitals) at web.dev. +* [Terminology](./overview.md#terminology) in _Performance tool: Analyze your website's performance_. +* [Optimize website speed using Lighthouse](../speed/get-started.md) @@ -184,9 +186,9 @@ Continuing from above: ![The line of code that caused the forced layout](./index-images/sources-app-update.png) The problem with the unoptimized code is that, in each animation frame, it changes the style for each icon, and then queries the position of each icon on the page. Because the styles changed, the browser doesn't know if each icon position changed, so it has to re-layout the icon in order to compute the new position. - + + See also: + * [Avoid forced synchronous layouts](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing#avoid_forced_synchronous_layouts) in _Avoid large, complex layouts and layout thrashing_ at web.dev. @@ -267,15 +269,14 @@ We then adjust the direction of the icon, but this time we don't read `element.o Finally, we set the new position of the icon, but this time we use `element.style.transform` instead of `element.style.top`. Using `element.style.transform` is faster, because the CSS `transform` property can be applied by the browser rendering engine without having to recalculate the layout of the page. When using the `transform` property, the browser considers each icon as an individual layer, and then displays these layers in the correct positions by re-compositing the final image. -To learn more, see [Use transform and opacity changes for animations](https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/#use-transform-and-opacity-changes-for-animations). +See also: +* [Avoid properties that trigger layout or paint](https://web.dev/articles/animations-guide#triggers) in _How to create high-performance CSS animations_ at web.dev. +* [Transitioning opacity](https://developer.mozilla.org/docs/Web/CSS/opacity#transitioning_opacity) in _opacity_ at MDN. ## Next steps - - To get more comfortable with the **Performance** tool, practice profiling your pages and analyzing the results. If you have any questions about your results, in the **Activity Bar**, select **Help** (![the Help icon in the Activity Bar](./index-images/help-icon.png)) > **Feedback**. Or, press **Alt+Shift+I** (Windows, Linux) or **Option+Shift+I** (macOS). @@ -284,16 +285,7 @@ Or, [file an issue on the MicrosoftEdge / DevTools repo](https://github.com/Micr In your feedback, include screenshots or links to reproducible pages, if possible. -There are many ways to improve runtime performance. This article focused on one particular animation bottleneck to give you a focused tour of the **Performance** tool, but it's only one of many bottlenecks you may encounter. - - +There are many ways to improve runtime performance. This article focused on one particular animation bottleneck to give you a focused tour of the **Performance** tool, but it's only one of many bottlenecks you may encounter. diff --git a/microsoft-edge/devtools/performance/overview.md b/microsoft-edge/devtools/performance/overview.md index d764862993..cde3f204a0 100644 --- a/microsoft-edge/devtools/performance/overview.md +++ b/microsoft-edge/devtools/performance/overview.md @@ -23,7 +23,6 @@ ms.date: 03/31/2025 limitations under the License. --> # Performance tool: Analyze your website's performance - Use the **Performance** tool to analyze your website's performance. There are two main views: @@ -32,15 +31,11 @@ Use the **Performance** tool to analyze your website's performance. There are t **Detailed contents:** * [Overview](#overview) - * [Open the Performance tool](#open-the-performance-tool) * [Using the Command Menu](#using-the-command-menu) - * [Local metrics for page interactions](#local-metrics-for-page-interactions) * [Recorded profile timeline](#recorded-profile-timeline) * [Switching to viewing local metrics or another profile](#switching-to-viewing-local-metrics-or-another-profile) - - * [Monitor Core Web Vitals metrics](#monitor-core-web-vitals-metrics) * [Terminology](#terminology) * [Use the demo page](#use-the-demo-page) @@ -50,7 +45,7 @@ Use the **Performance** tool to analyze your website's performance. There are t * [Record a performance profile](#record-a-performance-profile) * [Change capture settings](#change-capture-settings) * [Analyze a performance report](#analyze-a-performance-report) -* [Improve performance with these tools](#improve-performance-with-these-tools) --> +* [Improve performance with these tools](#improve-performance-with-these-tools) For a walkthrough of using the **Performance** tool to improve your website's performance, see [Analyze runtime performance (tutorial)](./index.md). @@ -58,7 +53,6 @@ For a walkthrough of using the **Performance** tool to improve your website's pe ## Overview - The **Performance** tool displays local metrics for page interactions, and lets you record CPU performance profiles of your web applications. Analyze profiles to find potential performance bottlenecks and ways that you can optimize resource use. @@ -159,14 +153,15 @@ Use the **Performance** tool to view Core Web Vitals metrics in the initial, **L #### Terminology + | Term | Description | Docs | |---|---|---| -| Web Vitals | A large set of metrics giving unified guidance to delivering a great user experience on the web. | [Web Vitals](https://web.dev/articles/vitals) | -| Core Web Vitals | The subset of Web Vitals that apply to all web pages, and should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. | [Core Web Vitals](https://web.dev/articles/vitals#core-web-vitals) in _Web Vitals_ | -| Largest Contentful Paint (LCP) | Measures _loading_ performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. The render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page. | [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp), [Optimize LCP](https://web.dev/articles/optimize-lcp) | -| Cumulative Layout Shift (CLS) | Measures _visual stability_. To provide a good user experience, pages should maintain a CLS of 0.1. or less. The largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. | [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls), [Optimize CLS](https://web.dev/articles/optimize-cls) | -| Interaction to Next Paint (INP) | Measures _interactivity_. To provide a good user experience, pages should have a INP of 200 milliseconds or less. The page's overall responsiveness to user interactions, based on the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. | [Interaction to Next Paint (INP)](https://web.dev/articles/inp), [Optimize INP](https://web.dev/articles/optimize-inp) | +| Web Vitals | A large set of metrics giving unified guidance to delivering a great user experience on the web. | [Web Vitals](https://web.dev/articles/vitals) at web.dev. | +| Core Web Vitals | The subset of Web Vitals that apply to all web pages, and should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. | [Core Web Vitals](https://web.dev/articles/vitals#core-web-vitals) in _Web Vitals_ at web.dev. | +| Largest Contentful Paint (LCP) | Measures _loading_ performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. The render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page. | [Largest Contentful Paint (LCP)](https://developer.mozilla.org/docs/Glossary/Largest_contentful_paint) in Glossary at MDN. [LargestContentfulPaint](https://developer.mozilla.org/docs/Web/API/LargestContentfulPaint) at MDN. | +| Cumulative Layout Shift (CLS) | Measures _visual stability_. To provide a good user experience, pages should maintain a CLS of 0.1. or less. The largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. | [Cumulative Layout Shift (CLS)](https://developer.mozilla.org/docs/Glossary/CLS) in Glossary at MDN. [LayoutShift](https://developer.mozilla.org/docs/Web/API/LayoutShift) at MDN. | +| Interaction to Next Paint (INP) | Measures _interactivity_. To provide a good user experience, pages should have a INP of 200 milliseconds or less. The page's overall responsiveness to user interactions, based on the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. | [Interaction to Next Paint (INP)](https://developer.mozilla.org/docs/Glossary/Interaction_to_next_paint) in Glossary at MDN. [PerformanceEventTiming](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming) at MDN. | | local metrics, local data | The LCP, CLS, and INP metrics. They are captured locally on the inspected webpage, and are updated as you interact with the page. | | @@ -177,7 +172,7 @@ To produce a **poor** or **needs improvement** metric on the **LCP**, **CLS**, a 1. Open a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab. - The [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the **Performance** tool to identify and fix performance issues. + The "Exploring the universe" demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the **Performance** tool to identify and fix performance issues. 1. Right-click the webpage and then select **Inspect**. @@ -366,6 +361,12 @@ Discover other tools that can help you improve your website's performance: | **Performance** tool | [View layers information](../performance/reference.md#view-layers-information) in _Performance features reference_ | + +## See also + +* [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo page + + > [!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). diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index b7d7bd87a1..e0ecc4a8ba 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -783,13 +783,20 @@ Clear the **Loading**, **Scripting**, **Rendering**, or **Painting** checkboxes In an overlay with vertical lines across the performance trace, you can see important performance markers, such as: -* [First Paint (FP)](https://developer.mozilla.org/docs/Glossary/First_paint) -* [First Contentful Paint (FCP)](https://web.dev/articles/fcp) -* [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) -* [DOMContentLoaded Event (DCL)](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) -* [Onload Event (L)](https://developer.mozilla.org/docs/Web/API/Window/load_event) - - +* First Paint (FP) + * [First Paint (FP)](https://developer.mozilla.org/docs/Glossary/First_paint) in Glossary at MDN. +* First Contentful Paint (FCP) + * [First Contentful Paint (FCP)](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) in Glossary at MDN. + * [PerformancePaintTiming](https://developer.mozilla.org/docs/Web/API/PerformancePaintTiming) at MDN. +* Largest Contentful Paint (LCP) + * [Largest Contentful Paint (LCP)](https://developer.mozilla.org/docs/Glossary/Largest_contentful_paint) in Glossary at MDN. + * [LargestContentfulPaint](https://developer.mozilla.org/docs/Web/API/LargestContentfulPaint) at MDN. +* DOMContentLoaded Event (DCL) + * [DOMContentLoaded Event (DCL)](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) at MDN. +* Onload Event (L) + * [Onload Event (L)](https://developer.mozilla.org/docs/Web/API/Window/load_event) at MDN. + + Hover over a marker name at the bottom of the trace to see its timestamp. @@ -827,7 +834,7 @@ Click an interaction to view more information about it in the **Summary** tab. #### View layout shifts -View layout shifts on the **Layout shifts** track. Shifts are shown as purple diamonds and are grouped in clusters (purple lines) based on their proximity on the timeline. For information about clusters, see [Evolving the CLS metric](https://web.dev/blog/evolving-cls) at web.dev. +View layout shifts on the **Layout shifts** track. Shifts are shown as purple diamonds and are grouped in clusters (purple lines) based on their proximity on the timeline. @@ -835,7 +842,7 @@ To highlight an element that caused a layout shift in the viewport, hover over t To see more information about a layout shift or shifts in the **Summary** tab with timings, scores, elements, and potential culprits, click the corresponding diamond or cluster. -For more information, see [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) at web.dev. +For more information, see [Cumulative Layout Shift (CLS)](https://developer.mozilla.org/docs/Glossary/CLS) at MDN. diff --git a/microsoft-edge/devtools/progressive-web-apps/protocol-handlers.md b/microsoft-edge/devtools/progressive-web-apps/protocol-handlers.md index fee8103bfe..a90a54afa9 100644 --- a/microsoft-edge/devtools/progressive-web-apps/protocol-handlers.md +++ b/microsoft-edge/devtools/progressive-web-apps/protocol-handlers.md @@ -8,7 +8,6 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/23/2022 --- - # Test Progressive Web App (PWA) protocol handling This article assumes that you have already defined protocol handlers in your PWA web app manifest and are debugging your app with the DevTools. To learn about how to define and register protocols in your PWA, see [Handle protocols in a PWA](../../progressive-web-apps/how-to/handle-protocols.md). @@ -31,11 +30,11 @@ To verify that you have correctly defined protocol handlers: 1. Click **Manifest** to expand the dropdown list. 1. Click **Protocol Handlers**. -If protocol handlers haven't been defined in the web app manifest, or have been defined incorrectly, the following message will be displayed: +If protocol handlers haven't been defined in the web app manifest, or have been defined incorrectly, the following message is displayed: ![The Protocol Handlers section of the Manifest pane without protocols defined](./protocol-handlers-images/protocol-handlers-not-defined.png) -If protocol handlers have been defined successfully in the web app manifest, the following message will be displayed: +If protocol handlers have been defined successfully in the web app manifest, the following message is displayed: ![The Protocol Handlers section of the Manifest pane with protocols defined](./protocol-handlers-images/protocol-handlers-defined.png) @@ -45,16 +44,23 @@ The **Protocol Handlers** section also makes it possible to test the protocol ha ## Test protocols from the Application tool -To test your protocol handlers from the **Application** tool, you must have already installed your PWA. To learn how to install your PWA, see [Installing a PWA](../../progressive-web-apps/ux.md#installing-a-pwa). +To test your protocol handlers from the **Application** tool, you must have already installed your PWA. To learn how to install your PWA, see [Installing a PWA](../../progressive-web-apps/ux.md#installing-a-pwa). + +The **Application** tool detects all the protocol handlers from your web app manifest. -The **Application** tool detects all the protocol handlers from your web app manifest. To test a handler: +To test a handler: 1. Navigate to your PWA in Microsoft Edge and open DevTools (**F12**). You can use [the PWAmp demo application](https://microsoftedge.github.io/Demos/pwamp/). + 1. Open the **Application** tool and click **Manifest** > **Protocol Handlers**. + 1. Select the protocol you want to test by choosing from the dropdown list. -1. Enter the rest of the URI in the text and click **Test protocol**. This will launch your PWA. Depending on your operating system (OS), you may need to allow Microsoft Edge to open your PWA and accept any OS-level permissions for registering your app as a handler for your protocol. -In the following screenshot, the `web+amp://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Kevin_MacLeod/Jazz_Sampler/Kevin_MacLeod_-_AcidJazz.mp3` URI is being tested. +1. Enter the rest of the URI in the text and click **Test protocol**. + + Your PWA is launched. Depending on your operating system (OS), you might need to allow Microsoft Edge to open your PWA and accept any OS-level permissions for registering your app as a handler for your protocol. + +In the following screenshot, the URI `web+amp://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Kevin_MacLeod/Jazz_Sampler/Kevin_MacLeod_-_AcidJazz.mp3` is being tested: ![Testing the custom web+amp protocol from the Application tool](./protocol-handlers-images/test-protocol-handlers.png) @@ -62,7 +68,12 @@ In the following screenshot, the `web+amp://files.freemusicarchive.org/storage-f ## See also -* [Debug a Progressive Web App (PWA)](./index.md) -* [Handle protocols in a PWA](../../progressive-web-apps/how-to/handle-protocols.md) -* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) -* [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/) +* [Debug a Progressive Web App (PWA)](./index.md) +* [Handle protocols in a PWA](../../progressive-web-apps/how-to/handle-protocols.md) + +Windows blog: +* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) + +MDN: +* [protocol_handlers](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/protocol_handlers) at MDN > PWA manifest. +* [Navigator: registerProtocolHandler() method](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler) at MDN. diff --git a/microsoft-edge/devtools/rendering-tools/index.md b/microsoft-edge/devtools/rendering-tools/index.md index 056d1bd6d4..7a56d996df 100644 --- a/microsoft-edge/devtools/rendering-tools/index.md +++ b/microsoft-edge/devtools/rendering-tools/index.md @@ -20,7 +20,7 @@ ms.date: 2/22/2023 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and - limitations under the License. --> + limitations under the License. --> # Troubleshooting common performance issues @@ -49,10 +49,11 @@ JavaScript calculations, especially ones that trigger extensive visual changes, #### JavaScript: Tools -Take a recording in the **Performance** tool and look for suspiciously long `Evaluate Script` events. +Take a recording in the **Performance** tool and look for suspiciously long `Evaluate Script` events. - - + + + If you notice quite a bit of jank (interruptions of rendering) in your JavaScript, you may need to take your analysis to the next level and collect a JavaScript CPU profile. CPU profiles show where runtime is spent within the functions of your page. Learn how to create CPU profiles in [Speed up JavaScript runtime ("Allocation sampling" profiling type)](js-runtime.md). @@ -64,12 +65,12 @@ The following are common JavaScript problems and potential solutions. | Problem | Example | Solution | |:--- |:--- |:--- | -| Expensive input handlers affecting response or animation. | Touch, parallax scrolling. | Let the browser handle touch and scrolls, or bind the listener as late as possible. See [Expensive Input Handlers](https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/#7_expensive_input_handlers) in _The Runtime Performance Checklist_ by Paul Lewis. | -| Badly timed JavaScript affecting response, animation, load. | User scrolls right after page load, setTimeout / setInterval. | Optimize JavaScript runtime: use `requestAnimationFrame`, spread DOM manipulation over frames, use Web Workers; see [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers). | -| Long-running JavaScript affecting response. | The [DOMContentLoaded event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event) stalls, because it's swamped with JavaScript work. | Move pure computational work to Web Workers; see [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers). If you need DOM access, use `requestAnimationFrame`. | -| Garbage-y scripts affecting response or animation. | Garbage collection may happen anywhere. | Write less garbage-y scripts. See [Garbage Collection in Animations](https://calendar.perfplanet.com/2013/the-runtime-performance-checklist#6_garbage_collection_in_animations) in _The Runtime Performance Checklist_ by Paul Lewis. | +| Expensive input handlers affecting response or animation. | Touch, parallax scrolling. | Let the browser handle touch and scrolls, or bind the listener as late as possible. See [Expensive Input Handlers](https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/#7_expensive_input_handlers) in _The Runtime Performance Checklist_ by Paul Lewis. | +| Badly timed JavaScript affecting response, animation, load. | User scrolls right after page load, setTimeout / setInterval. | Optimize JavaScript runtime: use `requestAnimationFrame`, spread DOM manipulation over frames, use Web Workers; see [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers). | +| Long-running JavaScript affecting response. | The [DOMContentLoaded event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event) stalls, because it's swamped with JavaScript work. | Move pure computational work to Web Workers; see [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers). If you need DOM access, use `requestAnimationFrame`. | +| Garbage-y scripts affecting response or animation. | Garbage collection may happen anywhere. | Write less garbage-y scripts. See [Garbage Collection in Animations](https://calendar.perfplanet.com/2013/the-runtime-performance-checklist#6_garbage_collection_in_animations) in _The Runtime Performance Checklist_ by Paul Lewis. | - + @@ -77,12 +78,12 @@ The following are common JavaScript problems and potential solutions. Style changes are costly, especially if those changes affect more than one element in the DOM. Any time you apply styles to an element, the browser figures out the impact on all related elements, recalculates the layout, and repaints. - - + @@ -90,15 +91,15 @@ Style changes are costly, especially if those changes affect more than one eleme Take a recording in the **Performance** tool. Check the recording for large `Recalculate Style` events (displayed in purple). - + Select a `Recalculate Style` event to view more information about it in the **Details** pane. If the style changes are taking a long time, that is a performance hit. If the style calculations are affecting a large number of elements, that is another area with room for improvement. ![Long recalculate style](./index-images/rendering-tools-performance-recalculate-style-summary.png) -To reduce the impact of `Recalculate Style` events, minimize use of CSS properties that trigger layout, paint, and composite. These properties have the greatest impact on rendering performance. For more information, see [Stick to Compositor-Only Properties and Manage Layer Count](https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/) +To reduce the impact of `Recalculate Style` events, minimize use of CSS properties that trigger layout, paint, and composite. These properties have the greatest impact on rendering performance. For more information, see [Avoid properties that trigger layout or paint](https://web.dev/articles/animations-guide#triggers) in _How to create high-performance CSS animations_, at web.dev. - + @@ -108,33 +109,34 @@ The following table describes some common style problems and potential solutions | Problem | Example | Solution | |:--- |:--- |:--- | -| Expensive style calculations affecting response or animation. | Any CSS property that changes the geometry of an element, like the width, height, or position; the browser checks all other elements and recalculates the layout. | Avoid CSS that triggers layouts | -| Complex selectors affecting response or animation. | Nested selectors force the browser to know everything about all the other elements, including parents and children. | Reference an element in your CSS with just a class. | - - - +| Expensive style calculations affecting response or animation. | Any CSS property that changes the geometry of an element, like the width, height, or position; the browser checks all other elements and recalculates the layout. | Avoid CSS that triggers layouts. | +| Complex selectors affecting response or animation. | Nested selectors force the browser to know everything about all the other elements, including parents and children. | Reference an element in your CSS with just a class. | - -* [Reduce the Scope and Complexity of Styles Calculations](/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations) --> - - + ## Layout -Layout (or reflow in Firefox) is the process by which the browser calculates the positions and sizes of all the elements on a page. The layout model of the web means that one element may affect others; for example, the width of the `` element typically affects the widths of any child elements, and so on, all the way up and down the tree. The process may be quite involved for the browser. +Layout (or _reflow_ in Firefox) is the process by which the browser calculates the positions and sizes of all the elements on a page. The layout model of the web means that one element may affect others; for example, the width of the `` element typically affects the widths of any child elements, and so on, all the way up and down the tree. The process may be quite involved for the browser. As a general rule of thumb, if you ask for a geometric value back from the DOM before a frame is complete, you are going to find yourself with "forced synchronous layouts", which may be a big performance bottleneck if repeated frequently or performed for a large DOM tree. - +* [Diagnose Forced Synchronous Layouts](./rendering-tools/forced-synchronous-layouts.md) +--> - - + + + @@ -154,10 +156,10 @@ The following table describes some common layout problems and potential solution | Problem | Example | Solution | |:--- |:--- |:--- | -| Forced synchronous layout affecting response or animation. | Forcing the browser to perform layout earlier in the pixel pipeline, resulting in repeating steps in the rendering process. | Batch your style reads first, then do any writes. | -| Layout thrashing affecting response or animation. | A loop that puts the browser into a read-write-read-write cycle, forcing the browser to recalculate layout over and over again. | Automatically batch read-write operations using [FastDom library](https://github.com/wilsonpage/fastdom). | +| Forced synchronous layout affecting response or animation. | Forcing the browser to perform layout earlier in the pixel pipeline, resulting in repeating steps in the rendering process. | Batch your style reads first, then do any writes. | +| Layout thrashing affecting response or animation. | A loop that puts the browser into a read-write-read-write cycle, forcing the browser to recalculate layout over and over again. | Automatically batch read-write operations using [FastDom library](https://github.com/wilsonpage/fastdom). | - + @@ -165,9 +167,9 @@ The following table describes some common layout problems and potential solution Paint is the process of filling in pixels. It is often the most costly part of the rendering process. If you noticed that your page isn't working as designed in any way, it is likely that you have paint problems. -Compositing is where the painted parts of the page are put together for displaying on screen. For the most part, if you stick to compositor-only properties and avoid paint altogether, you should notice a major improvement in performance, but you need to watch out for excessive layer counts. +Compositing is where the painted parts of the page are put together for displaying on screen. For the most part, if you stick to compositor-only properties and avoid paint altogether, you should notice a major improvement in performance, but you need to watch out for excessive layer counts. - + @@ -181,14 +183,13 @@ To find out how long painting takes, or how often painting occurs: If most of your rendering time is spent painting, you have paint problems. For more information, see [Enable advanced paint instrumentation](../performance/reference.md#enable-advanced-paint-instrumentation) in _Performance features reference_. - @@ -200,11 +201,12 @@ The following table describes some common paint and composite problems and poten | Problem | Example | Solution | |:--- |:--- |:--- | -| Paint storms affecting response or animation. | Big paint areas or expensive paints affecting response or animation. | Avoid paint, promote elements that are moving to their own layer, use transforms and opacity. | -| Layer explosions affecting animations. | Overpromotion of too many elements with `translateZ(0)` greatly affects animation performance. | Promote to layers sparingly, and only when you know it offers tangible improvements. | +| Paint storms affecting response or animation. | Big paint areas or expensive paints affecting response or animation. | Avoid paint, promote elements that are moving to their own layer, use transforms and opacity. | +| Layer explosions affecting animations. | Overpromotion of too many elements with `translateZ(0)` greatly affects animation performance. | Promote to layers sparingly, and only when you know it offers tangible improvements. | + + - - + diff --git a/microsoft-edge/devtools/sensors/index.md b/microsoft-edge/devtools/sensors/index.md index 70cc0ea2be..e7ec437467 100644 --- a/microsoft-edge/devtools/sensors/index.md +++ b/microsoft-edge/devtools/sensors/index.md @@ -264,21 +264,17 @@ To emulate CPU pressure on your website: MDN: * [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) * [Device orientation events](https://developer.mozilla.org/docs/Web/API/Device_orientation_events) -* [DeviceOrientationEvent: alpha property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/alpha) -* [DeviceOrientationEvent: beta property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/beta) -* [DeviceOrientationEvent: gamma property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/gamma) - + * [DeviceOrientationEvent: alpha property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/alpha) + * [DeviceOrientationEvent: beta property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/beta) + * [DeviceOrientationEvent: gamma property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/gamma) * [Navigator: hardwareConcurrency property](https://developer.mozilla.org/docs/Web/API/Navigator/hardwareConcurrency) -* [Compute Pressure API](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API) at MDN. +* [Compute Pressure API](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API) * [Pressure states](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API#pressure_states) in _Compute Pressure API_. Demos: * [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) * [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) -Web.dev: -* [User Location](https://web.dev/user-location/) - Emscripten: * [Pthreads support](https://emscripten.org/docs/porting/pthreads.html) diff --git a/microsoft-edge/devtools/speed/get-started.md b/microsoft-edge/devtools/speed/get-started.md index 93629ff7b8..73cc6e40ae 100644 --- a/microsoft-edge/devtools/speed/get-started.md +++ b/microsoft-edge/devtools/speed/get-started.md @@ -22,6 +22,8 @@ ms.date: 02/15/2023 See the License for the specific language governing permissions and limitations under the License. --> # Optimize website speed using Lighthouse + + This tutorial teaches you how to use **Lighthouse** and other tools in DevTools to find ways to make your websites load faster. @@ -30,6 +32,7 @@ The **Lighthouse** tool provides links to content that's hosted on third-party w ## Prerequisites + * Install [Visual Studio Code](https://code.visualstudio.com) to edit source code. @@ -38,14 +41,17 @@ The **Lighthouse** tool provides links to content that's hosted on third-party w ## Introduction + In this tutorial, you improve the performance of [Margie's travel](https://microsoftedge.github.io/Demos/travel-site/), a fictitious travel website that contains travel images, text descriptions, a few JavaScript-based user interactions, and an interactive map. The source files for the website are at [MicrosoftEdge / Demos > travel-site](https://github.com/MicrosoftEdge/Demos/tree/main/travel-site). + ## Step 1: Set up the website locally + First, set up the website locally, so that you can make changes to it later: @@ -70,6 +76,7 @@ First, set up the website locally, so that you can make changes to it later: ## Step 2: Audit the site + Whenever you set out to improve the load performance of a site, always start with an audit. @@ -79,7 +86,10 @@ The audit has two important functions: * It gives you **actionable tips** on what changes improve performance the most. + + #### Establish a baseline + The baseline is a record of how the site performed before you made any performance improvements. @@ -103,7 +113,10 @@ The baseline is a record of how the site performed before you made any performan ![The report for the Lighthouse tool about the performance of the site](./get-started-images/lighthouse-report.png) + + #### Handling report errors + If the **Lighthouse** report shows errors, try running **Lighthouse** again from an **InPrivate** window, with no other tabs open. Running **Lighthouse** from an **InPrivate** window ensures that the auditing process runs without interference. @@ -119,15 +132,23 @@ To open an **InPrivate** window: ![The report for the Lighthouse tool about the performance of the site in a InPrivate window](./get-started-images/private-lighthouse-report.png) + + #### Understand your report + + + ###### Overall performance score The number at the top of your report is the overall performance score for the webpage. Later, as you make changes to the code, the number displayed should increase. A higher score means better performance. ![The overall performance score](./get-started-images/overall-score.png) + + ###### Metrics + The **Metrics** section provides quantitative measurements of the performance of the webpage: @@ -142,13 +163,19 @@ Click **Expand view** to display a description for each metric. Then click **Le ![The expanded metrics section](./get-started-images/metrics-learn-more.png) + + ###### Screenshots + Below the **Metrics** section is a collection of screenshots that show you how the page looked while it was loading: ![Series of screenshots showing how the page looked while loading](./get-started-images/report-screenshots.png) + + ###### Opportunities + The **Opportunities** section provides specific tips on how to improve the load performance of this particular webpage: @@ -158,13 +185,19 @@ Click an opportunity to display more information about it, and then click **Lear ![An expanded opportunity, with more information, and a 'Learn more' link](./get-started-images/expanded-opportunity.png) + + ###### Diagnostics + The **Diagnostics** section provides more information about factors that contribute to the load time of the page: ![The Diagnostics section](./get-started-images/diagnostics-section.png) + + ###### Passed audits + The **Passed audits** section shows you what the site is doing correctly. Click **Show** to expand the section: @@ -173,10 +206,28 @@ The **Passed audits** section shows you what the site is doing correctly. Click ## Step 3: Experiment + The **Opportunities** section of your report gives you tips on how to improve the performance of the webpage. In this section, you implement the recommended changes to the code base, auditing the site again after each change to measure how that change affects site speed. + + + + + + + + + + + + + + + + #### Resize images + Your report indicates that serving appropriately sized images is one of the top opportunities for improving the performance of the page. Resizing images helps reduce the size of the network payload. If your user is viewing your images on a mobile device screen that is 500 pixels wide, there's really no point in sending a 1500-pixel-wide image. Ideally, you send a 500-pixel-wide image, at most. @@ -224,21 +275,31 @@ Your score increased from 18 to 26. To verify how much data you saved, use the * Now, the images on the webpage only require transferring 360 KB of data, instead of 16.4 MB. + + ###### Automatically resize images + For a small app, doing a one-off resize like this might be good enough. But for a large app, consider these strategies for managing images: * Automatically resize images during your build process. -* Create multiple sizes of each image during the build process and then use `srcset` in your code. At runtime, the browser takes care of choosing which size is best for the device. To learn more, see [Responsive images](https://web.dev/responsive-images/) at web.dev. +* Create multiple sizes of each image during the build process and then use `srcset` in your code. At runtime, the browser takes care of choosing which size is best for the device. * Use an image CDN that lets you dynamically resize an image when you request it. * At least, optimize each image. This can often create huge savings. -_Optimization_ means running an image through a program that reduces the size of the image file. For more tips, see [Optimize your images](https://web.dev/fast/#optimize-your-images) in _Fast load times_ at web.dev. + _Optimization_ means running an image through a program that reduces the size of the image file. +See also: +* [Using responsive images in HTML](https://developer.mozilla.org/docs/Web/HTML/Guides/Responsive_images) at MDN. +* [HTMLImageElement: srcset property](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) at MDN. + + + #### Reduce unused JavaScript + Your latest **Lighthouse** report says that the webpage contains unused JavaScript code and that loading this code only when required would decrease the amount of data transferred when the page loads. @@ -316,7 +377,10 @@ Use the Intersection Observer API to detect when the map becomes visible to the Your **Lighthouse** score is now at 31, which is an improvement from before, but there are more things to optimize. + + #### Eliminate render-blocking resources + The next opportunity displayed in the **Opportunities** section of the **Lighthouse** tool is related to eliminating render-blocking resources. @@ -356,7 +420,10 @@ Now, remove the references to these files from the code: 1. Save your changes in Visual Studio Code, then refresh the webpage in Microsoft Edge, and run a new audit in the **Lighthouse** tool again to see how your changes affect the load performance. + + ###### Automatically remove non-critical CSS + In the previous step, your score improved slightly, but **Lighthouse** still flags other CSS files as blocking the initial render of the page. @@ -372,11 +439,17 @@ The webpage uses the remaining CSS files so you can't remove them. However, it's To automatically split your CSS code this way, you can use the _Critical_ tool. To learn more, see the [Critical project repo](https://github.com/addyosmani/critical). -You can then load your non-critical CSS code in a way that doesn't block the initial render of the page. To learn more, see [Defer non-critical CSS](https://web.dev/defer-non-critical-css/) at web.dev. +You can then load your non-critical CSS code in a way that doesn't block the initial render of the page. + +It's also good to minify your CSS code and remove unneeded whitespace characters and comments. See [Minify CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css) at developer.chrome.com. + +See also: +* [CSS performance optimization](https://developer.mozilla.org/docs/Learn_web_development/Extensions/Performance/CSS) at MDN. -It's also good to minify your CSS code and remove unneeded whitespace characters and comments. To learn more, see [Minify CSS](https://web.dev/minify-css/) at web.dev. + #### Reduce layout shift by setting explicit width and height on images + In your **Lighthouse** report, the **Diagnostics** section suggests defining explicit `width` and `height` for image elements. Click on **Image elements do not have explicit width and height** to display more information: @@ -391,7 +464,9 @@ To prevent layout shifts caused by loading images on a webpage, do either of the * Define each image's `width` and `height` attributes in the HTML code. * Reserve the space in CSS by using the `aspect-ratio` CSS property. -To learn more, see [Images without dimensions](https://web.dev/optimize-cls/#images-without-dimensions) in _Optimize Cumulative Layout Shift_ at web.dev. +See also: +* [Rendering strategy: preventing jank when loading images](https://developer.mozilla.org/docs/Learn_web_development/Extensions/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images/) in _Multimedia: Images_ at MDN. +* [: The Image Embed element](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/img) at MDN. In the following steps, you use the `aspect-ratio` CSS property to avoid layout shifts: @@ -434,7 +509,10 @@ In the following steps, you use the `aspect-ratio` CSS property to avoid layout ![The Lighthouse tool report showing a better score after the aspect-ratio changes](./get-started-images/lighthouse-report-with-aspect-ratio.png) + + #### Do less work in the main thread + Your latest report shows high **Time to Interactive** and **Total Blocking Time** metric values, which means that there's still something on the webpage that takes a long time to run and prevents the page from being usable for several seconds. @@ -472,11 +550,11 @@ Optimize the `initRatings` function to make the page load faster: 1. In Visual Studio Code, open the `/travel-site/assets/rating.js` file and read through the code. - The code in this file is responsible for displaying five customer reviews on the webpage. Each review has a rating consisting of several stars, a quote, and an author. These reviews come from a server-side API used in the `getRatings` function. The `initRatings` function creates DOM elements in the page for each review. + The code in this file is responsible for displaying five customer reviews on the webpage. Each review has a rating consisting of several stars, a quote, and an author. These reviews come from a server-side API used in the `getRatings` function. The `initRatings` function creates DOM elements in the page for each review. 1. In the `initRatings` function, find a way to make the JavaScript code faster. - This webpage is just a demo, and a `for` loop was introduced to slow down the code. In practice, there are many ways for a JavaScript file like this one to cause slow page loads, such as: + This webpage is just a demo, and a `for` loop was introduced to slow down the code. In practice, there are many ways for a JavaScript file like this one to cause slow page loads, such as: * Accessing the DOM too frequently. * Running heavy computation tasks. @@ -494,7 +572,10 @@ Optimize the `initRatings` function to make the page load faster: To learn more about how to analyze page performance, see [Performance features reference)](../performance/reference.md). + + ###### Doing less work in the main thread, in the real world + The **Performance** tool is the most common way to understand what activity your webpage does as it loads, and to find ways to remove unnecessary activity. @@ -505,9 +586,11 @@ Webpages often load slowly when they use JavaScript for generating most of their ## Summary + + +* Whenever you set out to optimize the load performance of a site, always start with an audit. The audit establishes a baseline, and gives you tips on how to improve. -* Whenever you set out to optimize the load performance of a site, always start with an audit. The audit establishes a baseline, and gives you tips on how to improve. -* Make one change at a time, and audit the webpage after each change in order to display how that isolated change affects performance. +* Make one change at a time, and audit the webpage after each change in order to display how that isolated change affects performance. diff --git a/microsoft-edge/devtools/storage/cookies.md b/microsoft-edge/devtools/storage/cookies.md index 9ca3625875..de4d436769 100644 --- a/microsoft-edge/devtools/storage/cookies.md +++ b/microsoft-edge/devtools/storage/cookies.md @@ -67,7 +67,7 @@ The **Cookies** table contains the following fields: * **SameParty**. This attribute provides web developers a means to annotate cookies that are allowed to be set or sent in same-party, cross-site contexts. -* **Partition Key**. The _partition key_ of a cookie only exists when the cookie is set in partitioned storage and corresponds to the top-level site where the cookie was initially created. See [Cookies Having Independent Partitioned State (CHIPS) origin trial](https://developer.chrome.com/blog/chips-origin-trial/). +* **Partition Key**. The _partition key_ of a cookie only exists when the cookie is set in partitioned storage and corresponds to the top-level site where the cookie was initially created. See [Cookies Having Independent Partitioned State (CHIPS)](https://developer.mozilla.org/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies) at MDN. * **Priority**. Contains `low`, `medium` (default), or `high` if the cookie is using the deprecated [Cookie Priority](https://bugs.chromium.org/p/chromium/issues/detail?id=232693) attribute. diff --git a/microsoft-edge/devtools/whats-new/2020/06/devtools.md b/microsoft-edge/devtools/whats-new/2020/06/devtools.md index 46e3321f36..0c26e28a3b 100644 --- a/microsoft-edge/devtools/whats-new/2020/06/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/06/devtools.md @@ -172,14 +172,14 @@ See also: ###### First Meaningful Paint deprecation -First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the **Performance** tool. **Largest Contentful Paint** is the recommended replacement for FMP. - - - +First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the **Performance** tool. **Largest Contentful Paint** is the recommended replacement for FMP. Chromium issue [#1096008](https://crbug.com/1096008) See also: +* [First Meaningful Paint (FMP)](https://developer.mozilla.org/docs/Glossary/First_meaningful_paint) in Glossary at MDN. +* [Largest Contentful Paint (LCP)](https://developer.mozilla.org/docs/Glossary/Largest_contentful_paint) in Glossary at MDN. +* [LargestContentfulPaint](https://developer.mozilla.org/docs/Web/API/LargestContentfulPaint) at MDN. * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) @@ -190,9 +190,9 @@ DevTools now has better support for some of the latest JavaScript language featu * [Optional chaining](https://v8.dev/features/optional-chaining) syntax autocompletion. Property auto-completion in the **Console** now supports optional chaining syntax, for example, `name?.` now works in addition to `name.` and `name[`. -* Syntax highlighting for [private fields](https://v8.dev/features/class-fields#private-class-fields). Private class fields are now properly syntax-highlighted and pretty-printed in the **Sources** panel. +* Syntax highlighting for [private fields](https://v8.dev/features/class-fields#private-class-fields). Private class fields are now properly syntax-highlighted and pretty-printed in the **Sources** panel. -* Syntax highlighting for [Nullish coalescing operator](https://v8.dev/features/nullish-coalescing). DevTools now properly pretty-prints the nullish coalescing operator in the **Sources** panel. +* Syntax highlighting for [Nullish coalescing operator](https://v8.dev/features/nullish-coalescing). DevTools now properly pretty-prints the nullish coalescing operator in the **Sources** panel. Chromium issues [#1073903](https://crbug.com/1073903), [#1083214](https://crbug.com/1083214), [#1083797](https://crbug.com/1083797) @@ -210,8 +210,8 @@ In the **Application** tool, **App shortcuts** help users quickly start common o In the **Application** tool, the **Manifest** pane now shows warnings for the following conditions: -* When the app shortcut icons are smaller than 96x96 pixels. -* When the app shortcut icons and manifest icons aren't square (since the icons are ignored). +* When the app shortcut icons are smaller than 96x96 pixels. +* When the app shortcut icons and manifest icons aren't square (since the icons are ignored). ![App shortcut warnings](./devtools-images/app-shortcut-warnings.png) diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md index 157dfc3952..2540bf43ec 100644 --- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md @@ -262,13 +262,14 @@ See also: #### Emulate inactive users -The [Idle Detection API](https://web.dev/idle-detection) allows developers to detect inactive users and react on idle state changes. You can now use DevTools to emulate idle state changes in the **Sensors** tool for both the user state and the screen state instead of waiting for the actual idle state to change. You can open the **Sensors** tool in the [Quick View](../../../customize/index.md#quick-view) panel at the bottom of DevTools. +The Idle Detection API allows developers to detect inactive users and react on idle state changes. You can now use DevTools to emulate idle state changes in the **Sensors** tool for both the user state and the screen state instead of waiting for the actual idle state to change. You can open the **Sensors** tool in the [Quick View](../../../customize/index.md#quick-view) panel at the bottom of DevTools. ![Emulate inactive users](./devtools-images/emulate-idle.png) Chromium issue: [#1090802](https://crbug.com/1090802) See also: +* [Idle Detection API](https://developer.mozilla.org/docs/Web/API/Idle_Detection_API) at MDN. * [Override geolocation](../../../sensors/index.md#override-geolocation) in _Emulate device sensors_. @@ -377,7 +378,7 @@ See also: ###### Security and isolation information -Secure context, [Cross-Origin-Embedder-Policy (COEP)](https://web.dev/coop-coep), and [Cross-Origin-Opener-Policy (COOP)](https://web.dev/coop-coep) are now displayed in the frame details. +Secure context, Cross-Origin-Embedder-Policy (COEP), and Cross-Origin-Opener-Policy (COOP) are now displayed in the frame details: ![Security and isolation information](./devtools-images/coep-coop.png) @@ -386,12 +387,14 @@ The Chromium project plans to add more security information to the frame details Chromium issue: [#1051466](https://crbug.com/1051466) See also: +* [Cross-Origin-Embedder-Policy (COEP) header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Cross-Origin-Embedder-Policy) at MDN. +* [Cross-Origin-Opener-Policy (COOP) header](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Cross-Origin-Opener-Policy) at MDN. * [Application tool, to manage storage](../../../storage/application-tool.md) * [Understand security issues using the Security tool](../../../security/index.md) -#### Elements and Network panel updates +#### Updates to Elements tool and Network tool See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2021/02/devtools.md b/microsoft-edge/devtools/whats-new/2021/02/devtools.md index b29ef28af2..bc265b7dd4 100644 --- a/microsoft-edge/devtools/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/02/devtools.md @@ -233,7 +233,7 @@ See also: ###### PWA installability warning in the Console -The **Console** now displays a more detailed installability warning message for Progressive Web Apps (PWAs), with a link to [Improving Progressive Web App offline support detection](https://developer.chrome.com/blog/improved-pwa-offline-detection). +The **Console** now displays a more detailed installability warning message for Progressive Web Apps (PWAs), with a link to [Improving Progressive Web App offline support detection](https://developer.chrome.com/blog/improved-pwa-offline-detection). ![PWA installability warning in Console tool](./devtools-images/console-pwa-installability.png) diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools-images/application-frames-top-permission-policy-disabled-features-show-details-highlight.png b/microsoft-edge/devtools/whats-new/2021/04/devtools-images/application-frames-top-permission-policy-disabled-features-show-details-highlight.png deleted file mode 100644 index 9480eda540..0000000000 Binary files a/microsoft-edge/devtools/whats-new/2021/04/devtools-images/application-frames-top-permission-policy-disabled-features-show-details-highlight.png and /dev/null differ diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md index a2b2d9cf5e..d5e07190a3 100644 --- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md @@ -98,7 +98,7 @@ In Microsoft Edge version 91 or later, if you're a Progressive Web App or servic For real-time updates on this feature in the Chromium open-source project, see Issue [1066604](https://crbug.com/1066604). See also: -* [Updating the service worker](https://web.dev/service-worker-lifecycle#updates) in _The service worker lifecycle_ at web.dev. +* [Updating your service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers#updating_your_service_worker) in _Using Service Workers_ at MDN. * [Service worker improvements](../../../service-workers/index.md) - DevTools debugging tools for Progressive Web Apps and service workers. @@ -350,16 +350,13 @@ See also: Permissions Policy is a web platform API that gives a website the ability to allow or block the use of browser features in an individual frame or in an `iframe` that it embeds. To display the details on why a feature is blocked: -1. Go to [OOPIF Permissions Policy](http://permission-policy-demo.glitch.me). +1. Go to a web page that embeds cross-origin `iframe` elements. 1. Open the **Application** tool. -1. Click a frame. -1. Go to the **Permissions Policy** section. -1. Locate the **Disabled Features** property. +1. Under **Frames**, select the cross-origin `iframe`. +1. To review the list of features that are disabled for this `iframe`, scroll to the **Permissions Policy** > **Disabled Features** section. 1. Click **Show details**. 1. Click the icon next to each policy to go to the `iframe` or network request that blocked the feature. -![Blocked features in the Frame details view](./devtools-images/application-frames-top-permission-policy-disabled-features-show-details-highlight.png) - See also: * [Permissions Policy Explainer](https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md) * [Application tool, to manage storage](../../../storage/application-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md index 5f1e61cd6b..0cc9ebd525 100644 --- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md @@ -275,7 +275,7 @@ In the **Performance** tool, DevTools now displays **Compute Intersections** in See also: -* [Trust is good, observation is better: Intersection Observer v2](https://web.dev/intersectionobserver-v2) +* [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) at MDN. * [Analyze a performance recording](../../../performance/reference.md#analyze-a-performance-recording) For the history of this feature in the Chromium open-source project, see Issue [1199137](https://crbug.com/1199137). diff --git a/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md b/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md index fded24756f..51eeb0b52c 100644 --- a/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md +++ b/microsoft-edge/extensions/developer-guide/alternate-distribution-options.md @@ -9,10 +9,7 @@ ms.subservice: extensions ms.date: 05/05/2023 --- # Alternative ways to distribute an extension - + Generally, a Microsoft Edge extension is distributed by publishing it at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com). There are some scenarios where you might need to distribute an extension by using alternate methods. For example: @@ -33,6 +30,7 @@ See also: ## Gather initial information + Make sure that you publish your extension at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com), or package a `.crx` file and ensure that it installs successfully on your computer. If you install the `.crx` file using the `update_url`, make sure you can go to your extension at that URL. @@ -49,6 +47,7 @@ The following examples use `1.0` as the version, and `aaaaaaaabbbbbbbbccccccccdd ## Using the Windows registry (Windows only) + To distribute your extension using the Windows registry: @@ -73,6 +72,7 @@ To distribute your extension using the Windows registry: ## Using a preferences JSON file (macOS and Linux) + To distribute your extension by using a preferences JSON file: @@ -146,6 +146,7 @@ To distribute your extension by using a preferences JSON file: ## Update and uninstall externally installed extensions + Microsoft Edge scans the metadata entries in the registry each time the browser starts, and makes any changes to the externally installed extensions. @@ -160,6 +161,7 @@ See also: ## Blocking of extensions + The policies for `ExtensionInstallForcelist`, block list, and `ExtensionSettings` are used when enterprises want to install or block specific extensions on the client machines. Extensions and their origin that are configured in [ExtensionInstallForcelist](/deployedge/microsoft-edge-policies#extensioninstallforcelist), [ExtensionInstallSources](/deployedge/microsoft-edge-policies#extensioninstallsources), or [ExtensionSettings](/deployedge/microsoft-edge-policies#extensionsettings) take precedence over [BlockExternalExtensions](/deployedge/microsoft-edge-policies#blockexternalextensions). @@ -180,9 +182,6 @@ Microsoft Edge Enterprise docs: * [ExtensionSettings](/deployedge/microsoft-edge-policies#extensionsettings) * [BlockExternalExtensions](/deployedge/microsoft-edge-policies#blockexternalextensions) -Chrome Extensions docs: -* [Use alternative installation methods](https://developer.chrome.com/docs/extensions/how-to/distribute/install-extensions) - > [!NOTE] diff --git a/microsoft-edge/extensions/developer-guide/csp.md b/microsoft-edge/extensions/developer-guide/csp.md index bf3c51f8b6..d5fad49c62 100644 --- a/microsoft-edge/extensions/developer-guide/csp.md +++ b/microsoft-edge/extensions/developer-guide/csp.md @@ -9,6 +9,7 @@ ms.subservice: extensions ms.date: 11/09/2022 --- # Using Content Security Policy (CSP) to control which resources can be run + To control which content can be run by your extension, in the extension's `manifest.json` file, use the `content_security_policy` key and its policy string value, per the following syntax: @@ -38,7 +39,7 @@ In contrast, in a webpage, such a policy is defined via an HTTP header or via a See: * [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) at MDN. -* [Manifest - Content Security Policy](https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy) in _Chrome Extensions_ > _Reference_. +* [Manifest - Content Security Policy](https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy) in _Chrome Extensions_ > _Reference_. @@ -340,7 +341,7 @@ Since content scripts aren't affected by the CSP of the page, this a great reaso ## See also * [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) at MDN. -* [Manifest - Content Security Policy](https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy) in _Chrome Extensions_ > _Reference_. +* [Manifest - Content Security Policy](https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy) in _Chrome Extensions_ > _Reference_. diff --git a/microsoft-edge/extensions/developer-guide/declare-permissions.md b/microsoft-edge/extensions/developer-guide/declare-permissions.md index eac86ce61e..a05d53092d 100644 --- a/microsoft-edge/extensions/developer-guide/declare-permissions.md +++ b/microsoft-edge/extensions/developer-guide/declare-permissions.md @@ -74,7 +74,7 @@ The following table lists the currently available permission strings to use in y |:--- |:--- | | `activeTab` | Requests that the extension is granted permissions according to the `activeTab` specification. | | `alarms` | Gives your extension access to the `chrome.alarms` API. | -| `background` | Makes Microsoft Edge start up early and shut down late, so that extensions may have a longer life.
When any installed extension has `background` permission, Microsoft Edge runs invisibly as soon as the user logs into the user's computer, and before the user launches Microsoft Edge. The `background` permission also makes Microsoft Edge continue running, even after its last window is closed, until the user explicitly quits Microsoft Edge.
Disabled extensions are treated as if they aren't installed.
You should use the `background` permission with [background scripts](https://developer.chrome.com/docs/extensions/mv3/background_pages/).| +| `background` | Makes Microsoft Edge start up early and shut down late, so that extensions may have a longer life.
When any installed extension has `background` permission, Microsoft Edge runs invisibly as soon as the user logs into the user's computer, and before the user launches Microsoft Edge. The `background` permission also makes Microsoft Edge continue running, even after its last window is closed, until the user explicitly quits Microsoft Edge.
Disabled extensions are treated as if they aren't installed.
You should use the `background` permission with service workers; see [About extension service workers](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) at developer.chrome.com. | | `bookmarks` | Gives your extension access to the `chrome.bookmarks` API. | | `browsingData` | Gives your extension access to the `chrome.browsingData` API. | | `certificateProvider` | Gives your extension access to the `chrome.certificateProvider` API. | diff --git a/microsoft-edge/extensions/developer-guide/manifest-v3.md b/microsoft-edge/extensions/developer-guide/manifest-v3.md index 7b1221c9cd..816750627b 100644 --- a/microsoft-edge/extensions/developer-guide/manifest-v3.md +++ b/microsoft-edge/extensions/developer-guide/manifest-v3.md @@ -22,7 +22,7 @@ In October 2020, Microsoft announced the [decision to embrace Manifest V3](https Manifest V3 is an initiative of the [Chromium project](https://www.chromium.org/Home/). -An overview of the changes involved, as described in [Migrate to Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate): +An overview of the changes involved, as described in [Migrate an extension from Manifest V2 to V3](./migrate-your-extension-from-manifest-v2-to-v3.md): * Background pages have been replaced by service workers. @@ -40,8 +40,8 @@ An overview of the changes involved, as described in [Migrate to Manifest V3](ht Chromium has revised the timelines for ending support for Manifest V2. See: -* [Manifest V2 support timeline](https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline) -* [The phase-out timeline](https://developer.chrome.com/blog/resuming-the-transition-to-mv3#the_phase-out_timeline) in _Resuming the transition to Manifest V3_. +* [Manifest V2 support timeline](https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline) +* [The phase-out timeline](https://developer.chrome.com/blog/resuming-the-transition-to-mv3#the_phase-out_timeline) in _Resuming the transition to Manifest V3_. @@ -73,6 +73,6 @@ Microsoft continues to iteratively improve the platform and address the feedback ## See also -* [Migrate to Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate) -* [Manifest V2 support timeline](https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline) -* [The phase-out timeline](https://developer.chrome.com/blog/resuming-the-transition-to-mv3#the_phase-out_timeline) in _Resuming the transition to Manifest V3_. +* [Migrate an extension from Manifest V2 to V3](./migrate-your-extension-from-manifest-v2-to-v3.md) +* [Manifest V2 support timeline](https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline) +* [The phase-out timeline](https://developer.chrome.com/blog/resuming-the-transition-to-mv3#the_phase-out_timeline) in _Resuming the transition to Manifest V3_. diff --git a/microsoft-edge/extensions/developer-guide/migrate-your-extension-from-manifest-v2-to-v3.md b/microsoft-edge/extensions/developer-guide/migrate-your-extension-from-manifest-v2-to-v3.md index c261b07d84..bb434428bb 100644 --- a/microsoft-edge/extensions/developer-guide/migrate-your-extension-from-manifest-v2-to-v3.md +++ b/microsoft-edge/extensions/developer-guide/migrate-your-extension-from-manifest-v2-to-v3.md @@ -10,7 +10,7 @@ ms.date: 05/26/2021 --- # Migrate an extension from Manifest V2 to V3 -This article lists important changes being implemented as part of Manifest V3, which is the next version of the Chromium Extensions platform. For guidance on migrating your extension to Manifest V3, see [Overview of Manifest V3 - Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/). +This article lists important changes being implemented as part of Manifest V3, which is the next version of the Chromium Extensions platform. For guidance on migrating your extension to Manifest V3 from the Chromium project, see [Migrate to Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate). @@ -20,7 +20,7 @@ Today, some parts of the extensions code are hosted remotely, and aren't include To ensure that the extensions at Microsoft Edge Add-ons are validated, the Microsoft Edge extensions team disallows extensions from using remotely hosted code. This change makes extensions more secure. -Developers will need to package and submit all code that is used by the extension, for validation. Alternatively, you can use the `eval()` function in a [sandboxed environment](https://developer.chrome.com/docs/extensions/mv2/sandboxingEval). +Developers will need to package and submit all code that is used by the extension, for validation. Alternatively, you can use the `eval()` function in a sandboxed iframe. See [Use eval() in sandboxed iframes](https://developer.chrome.com/docs/extensions/how-to/security/sandboxing-eval). @@ -40,7 +40,7 @@ To perform cross-origin requests, you need to use background scripts to relay re ## Web Request API -The Microsoft Edge extensions team replaces the [Web Request API](https://developer.chrome.com/docs/extensions/reference/webRequest) by the [Declarative Net Request API](https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest), but we continue to keep the observational capabilities of the Web Request API. We recommend using the Declarative Net Request (DNR) APIs only, rather than the Web Request API, except in some specific scenarios where observational capabilities of the Web Request API are required by the extension. +The Microsoft Edge extensions team replaces the [Web Request API](https://developer.chrome.com/docs/extensions/reference/webRequest) by the [Declarative Net Request API](https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest), but we continue to keep the observational capabilities of the Web Request API. We recommend using the Declarative Net Request (DNR) APIs only, rather than the Web Request API, except in some specific scenarios where observational capabilities of the Web Request API are required by the extension. This change will have positive impact on extensions that use feature-rich declarative capabilities. As more extensions transition to the Declarative Net Request APIs, this change will improve user privacy, which contributes to trust in the use of extensions. @@ -50,7 +50,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 [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. +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. diff --git a/microsoft-edge/extensions/developer-guide/minimize-page-load-time-impact.md b/microsoft-edge/extensions/developer-guide/minimize-page-load-time-impact.md index 05562824a3..4217436686 100644 --- a/microsoft-edge/extensions/developer-guide/minimize-page-load-time-impact.md +++ b/microsoft-edge/extensions/developer-guide/minimize-page-load-time-impact.md @@ -133,9 +133,9 @@ If your extension is small enough, you won't need a build tool to split your cod Your extension might not need to run on every webpage that the user visits. To reduce the amount of code that runs when webpages load, configure your extension to load content scripts only on the pages and frames where they are needed. -To configure the pages and frames where your content scripts are loaded, define URL patterns in your extension manifest file by using the `matches` property in the `content_scripts` section. To learn more, see [Inject scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#functionality) in _Content scripts_ in the Chrome Extensions documentation. +To configure the pages and frames where your content scripts are loaded, define URL patterns in your extension manifest file by using the `matches` property in the `content_scripts` section. To learn more, see [Inject with static declarations](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#static-declarative) in _Content scripts_ in the Chrome Extensions documentation. -You can also use the `chrome.scripting` extensions API to programmatically inject your content script into the webpage. This API allows you to inject your content script based on the user's actions, the webpage content, or the extension logic. To learn more, see [chrome.scripting](https://developer.chrome.com/docs/extensions/reference/api/scripting) in the Chrome Extensions documentation. +You can also use the `chrome.scripting` extensions API to programmatically inject your content script into the webpage. This API allows you to inject your content script based on the user's actions, the webpage content, or the extension logic. To learn more, see [chrome.scripting](https://developer.chrome.com/docs/extensions/reference/api/scripting) in the Chrome Extensions documentation. Use the following best practices when configuring where your content scripts are loaded: @@ -264,9 +264,9 @@ onmessage = event => { * [Analyze runtime performance (tutorial)](../../devtools/performance/index.md) Chrome Extension docs: -* [Manifest - content scripts](https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts) -* [chrome.scripting](https://developer.chrome.com/docs/extensions/reference/api/scripting) -* [chrome.storage](https://developer.chrome.com/docs/extensions/reference/api/storage) +* [Manifest - content scripts](https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts) +* [chrome.scripting](https://developer.chrome.com/docs/extensions/reference/api/scripting) +* [chrome.storage](https://developer.chrome.com/docs/extensions/reference/api/storage) MDN: * [Using Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/microsoft-edge/extensions/developer-guide/native-messaging.md b/microsoft-edge/extensions/developer-guide/native-messaging.md index c7624f6956..1610d4b4ca 100644 --- a/microsoft-edge/extensions/developer-guide/native-messaging.md +++ b/microsoft-edge/extensions/developer-guide/native-messaging.md @@ -10,7 +10,7 @@ ms.date: 01/09/2024 --- # Native messaging -To communicate with a native Win32 app that's installed on a user's device, an extension uses an API that's similar to the other [message passing](https://developer.chrome.com/docs/extensions/develop/concepts/messaging) APIs. The native app host sends and receives messages with extensions using standard input and standard output. +To communicate with a native Win32 app that's installed on a user's device, an extension uses an API that's similar to the other [message passing](https://developer.chrome.com/docs/extensions/develop/concepts/messaging) APIs. The native app host sends and receives messages with extensions using standard input and standard output. Extensions that use native messaging are installed in Microsoft Edge similar to any other extension. However, native apps aren't installed or managed by Microsoft Edge. @@ -266,19 +266,19 @@ The first argument to the native messaging host is the origin of the caller, usu On Windows, the native messaging host is also passed a command line argument with a handle to the calling Microsoft Edge native window: `--parent-window=`. This lets the native messaging host create native UI windows that are correctly parented. This value will be 0 if the calling context is a service worker. -When a messaging port is created by using [`runtime.connectNative`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connectNative), Microsoft Edge starts a native messaging host process and keeps it running until the port is destroyed. On the other hand, when a message is sent by using [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage), without creating a messaging port, Microsoft Edge starts a new native messaging host process for each message. In that case, the first message that's generated by the host process is handled as a response to the original request, and Microsoft Edge will pass it to the response callback specified when [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) is called. All other messages generated by the native messaging host in that case are ignored. +When a messaging port is created by using [`runtime.connectNative`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connectNative), Microsoft Edge starts a native messaging host process and keeps it running until the port is destroyed. On the other hand, when a message is sent by using [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage), without creating a messaging port, Microsoft Edge starts a new native messaging host process for each message. In that case, the first message that's generated by the host process is handled as a response to the original request, and Microsoft Edge will pass it to the response callback specified when [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) is called. All other messages generated by the native messaging host in that case are ignored. ## Connecting to a native application -Sending and receiving messages to and from a native application is very similar to cross-extension messaging. The main difference is that [`runtime.connectNative`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connectNative) is used instead of [`runtime.connect`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connect), and [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) is used instead of [`runtime.sendMessage`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage). +Sending and receiving messages to and from a native application is very similar to cross-extension messaging. The main difference is that [`runtime.connectNative`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connectNative) is used instead of [`runtime.connect`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-connect), and [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) is used instead of [`runtime.sendMessage`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage). To use these methods, the `nativeMessaging` permission must be declared in your extensions's manifest file; see [Step 1: Add permissions to the extension manifest](#step-1-add-permissions-to-the-extension-manifest), above. These methods are not available inside content scripts, only inside your extension's pages and service worker. If you want to communicate from a content script to the native application, send the message to your service worker to pass it along to the native application. -The following example creates a [`runtime.Port`](https://developer.chrome.com/docs/extensions/reference/runtime/#type-Port) object that's connected to native messaging host `com.my_company.my_application`, starts listening for messages from that port and sends one outgoing message: +The following example creates a [`runtime.Port`](https://developer.chrome.com/docs/extensions/reference/runtime/#type-Port) object that's connected to native messaging host `com.my_company.my_application`, starts listening for messages from that port and sends one outgoing message: ```javascript var port = chrome.runtime.connectNative('com.my_company.my_application'); @@ -291,7 +291,7 @@ port.onDisconnect.addListener(function () { port.postMessage({text: 'Hello, my_application'}); ``` -Use [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) to send a message to the native application without creating a port; for example: +Use [`runtime.sendNativeMessage`](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage) to send a message to the native application without creating a port; for example: ```javascript chrome.runtime.sendNativeMessage( diff --git a/microsoft-edge/extensions/developer-guide/run-compiled-code.md b/microsoft-edge/extensions/developer-guide/run-compiled-code.md index 4e47ced67d..8bceb9ab24 100644 --- a/microsoft-edge/extensions/developer-guide/run-compiled-code.md +++ b/microsoft-edge/extensions/developer-guide/run-compiled-code.md @@ -28,11 +28,7 @@ To enhance web security and performance, Native Client (NaCl) is no longer suppo NaCl is a sandbox for running compiled C and C++ code in browsers efficiently and securely, independently of the user's operating system. WebAssembly (Wasm) is recommended instead of NaCl. -See also: -* [Manifest - Nacl Modules](https://developer.chrome.com/docs/extensions/mv2/manifest/nacl-modules) -* [Native Client](https://developer.chrome.com/docs/native-client) - deprecation notice for Chrome browser. - To Run compiled code in an extension, we recommend using WebAssembly instead of NaCl. See: -* [WebAssembly Migration Guide](https://developer.chrome.com/docs/native-client/migration) in Chrome docs. +* [WebAssembly Migration Guide](https://developer.chrome.com/docs/native-client/migration) in Chrome docs. * [WebAssembly](https://developer.mozilla.org/docs/WebAssembly) at MDN. * [webassembly.org](https://webassembly.org) diff --git a/microsoft-edge/extensions/developer-guide/sidebar.md b/microsoft-edge/extensions/developer-guide/sidebar.md index 9cd47e6d40..a4275a6174 100644 --- a/microsoft-edge/extensions/developer-guide/sidebar.md +++ b/microsoft-edge/extensions/developer-guide/sidebar.md @@ -120,9 +120,9 @@ The file you specified as the default, such as `sidebar.html`, appears in all th #### Enable a sidebar for a specific site only -An extension can use [sidepanel.setOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setOptions) to enable a sidebar on a specific tab. This can be a particular website, so the extension opens in the sidebar when the user goes to this website. +An extension can use [sidepanel.setOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setOptions) to enable a sidebar on a specific tab. This can be a particular website, so the extension opens in the sidebar when the user goes to this website. -This example uses [chrome.tabs.onUpdated()](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated) to listen for any updates made to the tab. It checks whether the URL is `www.bing.com` and if so, enables the sidebar. Otherwise, it disables the sidebar. +This example uses [chrome.tabs.onUpdated()](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated) to listen for any updates made to the tab. It checks whether the URL is `www.bing.com` and if so, enables the sidebar. Otherwise, it disables the sidebar. In `service-worker.js`, in `addListener()`, test `url.origin` to see if it's the desired tab, and then in `sidePanel.setOptions()`, set `enabled` to `true` or `false`: @@ -159,7 +159,7 @@ For a complete example, see [Site-specific side panel example](https://github.co #### Enable the extension's shortcut icon to open the sidebar -To allow users to open the sidebar by clicking the action toolbar icon, use [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). First, declare the `"action"` key in `manifest.json`: +To allow users to open the sidebar by clicking the action toolbar icon, use [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). First, declare the `"action"` key in `manifest.json`: ```json { @@ -185,9 +185,9 @@ chrome.sidePanel #### Switch to a different sidebar -An extension can use [sidepanel.getOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-getOptions) to retrieve the current sidebar, and then enable a different sidebar for a specific tab. +An extension can use [sidepanel.getOptions()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-getOptions) to retrieve the current sidebar, and then enable a different sidebar for a specific tab. -This example sets a sidebar containing a welcome message on [runtime.onInstalled()](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled). When the user navigates to a different tab, the sidebar is replaced with the browser-level sidebar. +This example sets a sidebar containing a welcome message on [runtime.onInstalled()](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onInstalled). When the user navigates to a different tab, the sidebar is replaced with the browser-level sidebar. ```javascript // service-worker.js: @@ -210,7 +210,7 @@ chrome.tabs.onActivated.addListener(async ({ tabId }) => { #### Opening the sidebar upon user interaction -[sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open) allows extensions to open the sidebar through a user gesture, such as clicking the action icon, or through any user interaction on an extension page or content script, such as clicking a button. +[sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open) allows extensions to open the sidebar through a user gesture, such as clicking the action icon, or through any user interaction on an extension page or content script, such as clicking a button. The following code shows how to open a global sidebar on the current window when the user clicks on a context menu. When using `sidePanel.open()`, choose the context in which the sidebar should open: * Use `windowId` to open a global sidebar, as shown in the following example. @@ -276,10 +276,10 @@ The extension's icon appears in the toolbar if the user has clicked the **Show i Users can press a keyboard shortcut, if the action command is enabled and the action icon is enabled to open the sidebar. -* To enable the action command, see [Action commands](https://developer.chrome.com/docs/extensions/reference/commands/#action-commands) in _chrome.commands_ in API reference. -* To enable the action icon, see [Open the side panel by clicking the toolbar icon](https://developer.chrome.com/docs/extensions/reference/sidePanel/#open-action-icon) in _chrome.sidePanel_ in API reference. +* To enable the action command, see [Action commands](https://developer.chrome.com/docs/extensions/reference/commands/#action-commands) in _chrome.commands_ in API reference. +* To enable the action icon, see [Open the side panel by clicking the toolbar icon](https://developer.chrome.com/docs/extensions/reference/sidePanel/#open-action-icon) in _chrome.sidePanel_ in API reference. -If the `openPanelOnActionClick()` property of the [PanelBehavior](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type-PanelBehavior) type is set to `true`, the user can open the sidebar by using a keyboard shortcut. To enable this, you specify an action command in the manifest. +If the `openPanelOnActionClick()` property of the [PanelBehavior](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type-PanelBehavior) type is set to `true`, the user can open the sidebar by using a keyboard shortcut. To enable this, you specify an action command in the manifest. @@ -287,9 +287,9 @@ If the `openPanelOnActionClick()` property of the [PanelBehavior](https://develo The sidebar can also be opened through the following interactions: -* Open the sidebar by an extension user gesture, such as clicking the action icon. This approach uses [sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open). See [Opening the sidebar upon user interaction](#opening-the-sidebar-upon-user-interaction), above. +* Open the sidebar by an extension user gesture, such as clicking the action icon. This approach uses [sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open). See [Opening the sidebar upon user interaction](#opening-the-sidebar-upon-user-interaction), above. -* Open the sidebar by clicking the toolbar icon. This approach uses [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). See [By clicking an icon](#by-clicking-an-icon) in section "Opening the extension in the sidebar", above. +* Open the sidebar by clicking the toolbar icon. This approach uses [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). See [By clicking an icon](#by-clicking-an-icon) in section "Opening the extension in the sidebar", above. @@ -307,7 +307,7 @@ For more Sidebar API extensions demos, explore any of the following extensions: ## Types and methods -See [Types](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type) and [Methods](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method) in the _chrome.sidePanel_ API reference page at `developer.chrome.com`. +See [Types](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type) and [Methods](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method) in the _chrome.sidePanel_ API reference page at `developer.chrome.com`. diff --git a/microsoft-edge/origin-trials/index.md b/microsoft-edge/origin-trials/index.md index b87563c196..18aae395a5 100644 --- a/microsoft-edge/origin-trials/index.md +++ b/microsoft-edge/origin-trials/index.md @@ -196,4 +196,3 @@ To provide feedback about an origin trial: External: * [Implementing feature detection](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) - MDN. -* [Get started with origin trials](https://developer.chrome.com/docs/web-platform/origin-trials) - Chrome docs. diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md index c5b16ac98b..9ff1f36fd0 100644 --- a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md +++ b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md @@ -289,7 +289,7 @@ navigator.serviceWorker.ready.then(async registration => { Above, `my-download-id` should be a unique string identifier for this background fetch. `fileUrls` is the list of files to download, this will be an array of string URLs. And `options` is an object that can be used to customize the appearance of the download activity in the browser. -For more information about the `fetch` function, see [BackgroundFetchManager.fetch()](https://developer.mozilla.org/docs/Web/API/BackgroundFetchManager/fetch) and [Introducing Background Fetch](https://developer.chrome.com/blog/background-fetch/). +For more information about the `fetch` function, see [BackgroundFetchManager.fetch()](https://developer.mozilla.org/docs/Web/API/BackgroundFetchManager/fetch). diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-protocols.md b/microsoft-edge/progressive-web-apps/how-to/handle-protocols.md index 2f11508f07..6658ec1564 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-protocols.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-protocols.md @@ -38,7 +38,7 @@ To use Protocol Handling, declare which protocols your app handles. This is done In the above example, the app is registered to handle the `mailto` protocol. When the operating system launches the app in response to the `mailto` protocol, the app navigates to the `/newEmail` URL, replacing the `%s` placeholder with the full URL that's being handled. See also: -* [protocol_handlers](https://developer.mozilla.org/docs/Web/Manifest/protocol_handlers) at MDN > References > Web app manifests. +* [protocol_handlers](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/protocol_handlers) for PWAs, at MDN. @@ -49,7 +49,20 @@ You can use the **Application** tool in Microsoft Edge DevTools to verify that M ## See also + -* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) -* [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/) -* [Test Progressive Web App (PWA) protocol handling](../../devtools/progressive-web-apps/protocol-handlers.md) +* [Test Progressive Web App (PWA) protocol handling](../../devtools/progressive-web-apps/protocol-handlers.md) + +Blog: +* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) + +MDN: +* [protocol_handlers](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/protocol_handlers) for PWA manifest. +* [Best practices for PWAs](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Guides/Best_practices) +* [Navigator: registerProtocolHandler() method](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler) + +developer.chrome.com: +* [URL protocol handler registration for PWAs](https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler) + +Wikipedia: +* [List of URI schemes](https://wikipedia.org/wiki/List_of_URI_schemes) diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-urls.md b/microsoft-edge/progressive-web-apps/how-to/handle-urls.md index e9722f33ca..d940469df8 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-urls.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-urls.md @@ -16,9 +16,11 @@ This link handling is like how native apps handle links on many operating system @@ -115,4 +117,16 @@ For example, this `.well-known/web-app-origin-association` configuration file re See also: * [scope_extensions](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/scope_extensions) at MDN. +* [Scope Extensions for Web App Manifest](https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md) explainer. + + + +## See also + + +MDN: +* [scope_extensions](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/scope_extensions) + +Explainers: * [Scope Extensions for Web App Manifest](https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md) +* [Web App Link Handling Manifest Options](https://github.com/WICG/pwa-url-handler/blob/main/handle_links/explainer.md) - `handle_links` explainer. diff --git a/microsoft-edge/progressive-web-apps/how-to/push.md b/microsoft-edge/progressive-web-apps/how-to/push.md index 2f4c6dfc6d..91345c19b9 100644 --- a/microsoft-edge/progressive-web-apps/how-to/push.md +++ b/microsoft-edge/progressive-web-apps/how-to/push.md @@ -18,10 +18,10 @@ Push message notifications take part in the system's notification center, and th To create a PWA that supports push notifications: -1. Request the user's permission to receive push notifications in the client-side code of your PWA. -1. Subscribe to your server's push messages. -1. Send push messages from the server-side code of your PWA. -1. Display notifications when push messages are received. +1. Request the user's permission to receive push notifications in the client-side code of your PWA. +1. Subscribe to your server's push messages. +1. Send push messages from the server-side code of your PWA. +1. Display notifications when push messages are received. @@ -109,9 +109,9 @@ The `userVisibleOnly` configuration option of the `registration.pushManager.subs Your application needs VAPID (Voluntary Application Server Identification) keys in order to send push messages from your server to your PWA clients. There are several VAPID key generators available online (for example, [Vapidkeys.com](https://vapidkeys.com)). -Once you have a VAPID key, you can send push messages to your PWA clients by using [the Web Push Protocol](https://web.dev/push-notifications-web-push-protocol/). +Once you have a VAPID key, you can send push messages to your PWA clients by using the Web Push protocol. See [Push API](https://developer.mozilla.org/docs/Web/API/Push_API) at MDN. -You can use a library to send push messages from your server, depending on the programming language you use. For example, you can use the [web-push](https://github.com/web-push-libs/web-push) library if your server uses Node.js. Other libraries are available on the [WebPush libraries repo](https://github.com/web-push-libs/). +You can use a library to send push messages from your server, depending on the programming language you use. For example, you can use the [web-push](https://github.com/web-push-libs/web-push) library if your server uses Node.js. Other libraries are available on the [WebPush libraries repo](https://github.com/web-push-libs/). @@ -146,6 +146,16 @@ If your PWA doesn't display a notification when a push message is received, Micr ## See also + -* [Push notifications overview](https://web.dev/push-notifications-overview/). -* [How to make PWAs re-engageable using Notifications and Push](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push). +MDN: +* [Push API](https://developer.mozilla.org/docs/Web/API/Push_API) +* [Notification.requestPermission API](https://developer.mozilla.org/docs/Web/API/Notification/requestPermission_static) +* [How to make PWAs re-engageable using Notifications and Push](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push) + +GitHub: +* [WebPush libraries](https://github.com/web-push-libs/) + * [web-push](https://github.com/web-push-libs/web-push) library, if your server uses Node.js. + +External: +* [Vapidkeys.com](https://vapidkeys.com) - example of a VAPID key generator. diff --git a/microsoft-edge/progressive-web-apps/how-to/share.md b/microsoft-edge/progressive-web-apps/how-to/share.md index 86583a099c..673836856c 100644 --- a/microsoft-edge/progressive-web-apps/how-to/share.md +++ b/microsoft-edge/progressive-web-apps/how-to/share.md @@ -27,8 +27,7 @@ PWAs that register as share targets feel natively integrated into the OS, and ar PWAs can use the [Web Share API](https://developer.mozilla.org/docs/Web/API/Web_Share_API) to trigger displaying the operating system share dialog. -> [!NOTE] -> Web sharing only works on sites served over HTTPS (which is the case for PWAs), and can only be invoked in response to a user action. +Web sharing only works on sites served over HTTPS (which is the case for PWAs), and can only be invoked in response to a user action. To share content such as links, text, or files, use the `navigator.share` function, as shown below. The `navigator.share` function accepts an object that should have at least one of the following properties: @@ -127,7 +126,7 @@ To test the Sharing feature: 1. In the right side of the Address bar, click the **App available. Install** (![PWA 'App available, Install' icon](./share-images/app-available-install-icon.png)) button to install PWAmp as a PWA. -1. In the installed PWAmp PWA, import a local audio file (by dragging it onto the app window). For example, if you've cloned the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo, you have a local copy of `.mp3` files in the ([Demos repo > pwamp/songs directory](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/songs)), such as `C:\Users\username\GitHub\Demos\pwamp\songs`. +1. In the installed PWAmp PWA, import a local audio file (by dragging it onto the app window). For example, if you've cloned the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo, you have a local copy of `.mp3` files in the [/pwamp/songs/](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/songs) directory, such as `C:\Users\localAccount\GitHub\Demos\pwamp\songs\`. 1. Next to the newly imported song, click the **Song actions** (**...**) button, and then select **Share**. The Windows **Share** dialog is displayed: @@ -143,8 +142,7 @@ You can find the [PWAmp source code](https://github.com/MicrosoftEdge/Demos/tree By using the [Web Share Target](https://w3c.github.io/web-share-target/level-2/) API, a PWA can register to be displayed as an app in the system share dialog. The PWA can then use the Web Share Target API to handle shared content coming in from other apps. -> [!NOTE] -> Only installed PWAs can register as share targets. +Only installed PWAs can register as share targets. @@ -251,7 +249,10 @@ In the above code: 1. Uses the data in some way (such as to store the content locally). -1. Redirects the user to a success page. This way, the app can work even if the network is down. The app can choose to only store the content locally, or can send the content to the server later, when connectivity is restored (such as by using [Background Sync](background-syncs.md)). +1. Redirects the user to a success page. This way, the app can work even if the network is down. The app can choose to only store the content locally, or can send the content to the server later, when connectivity is restored (such as by using background sync). + +See also: +* [Synchronize and update a PWA in the background](./background-syncs.md) @@ -312,6 +313,22 @@ self.addEventListener('fetch', event => { ## See also + + +* [Synchronize and update a PWA in the background](./background-syncs.md) + +MDN: +* [Web Share API](https://developer.mozilla.org/docs/Web/API/Web_Share_API) +* [share_target](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Manifest/Reference/share_target) manifest member. +* [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) +* [File interface](https://developer.mozilla.org/docs/Web/API/File) + +W3C: +* [Web Share Target](https://w3c.github.io/web-share-target/level-2/) -* [Integrate with the OS sharing UI with the Web Share API](https://web.dev/web-share/) -* [Receiving shared data with the Web Share Target API](https://web.dev/web-share-target/) +PWAmp demo: +* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo. +* [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) - live app webpage. + * [PWAmp source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp) + * [/pwamp/songs/ directory](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/songs) + * [app.js](https://github.com/MicrosoftEdge/Demos/blob/main/pwamp/app.js#L328-L341) - a use of the Web Share API. diff --git a/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md b/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md index 43907809e4..dd6ff8646b 100644 --- a/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md +++ b/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay.md @@ -118,7 +118,7 @@ A user can toggle the title bar or change the window dimensions while the app is To listen for changes, use the `geometrychange` event on the `navigator.windowControlsOverlay` object. To detect whether the title bar is visible, use the `visible` property on the `navigator.windowControlsOverlay` object. -Note that the `geometrychange` is fired very frequently when the user resizes the window. To avoid running layout-changing code too often and causing performance problems in your app, use a `debounce` function to limit how many times the event is handled. See [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/). +The `geometrychange` event is fired very frequently when the user resizes the window. To avoid running layout-changing code too often and causing performance problems in your app, use a `debounce` function to limit how many times the event is handled. See [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/). ```javascript const debounce = (func, wait) => { @@ -201,9 +201,28 @@ See [Simulate the Window Controls Overlay API without installing your PWA](../.. ## See also - -* [Simulate the Window Controls Overlay API without installing your PWA](../../devtools/progressive-web-apps/simulate-window-controls-overlay.md) - DevTools feature. -* [Window Controls Overlay video tutorial](https://www.youtube.com/watch?v=NvClp35dFVI) -* [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) -* [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) -* [display_override](https://developer.mozilla.org/docs/Web/Manifest/display_override) at MDN. + + +* [Simulate the Window Controls Overlay API without installing your PWA](../../devtools/progressive-web-apps/simulate-window-controls-overlay.md) - DevTools feature. + +MDN: +* [Window Controls Overlay API](https://developer.mozilla.org/docs/Web/API/Window_Controls_Overlay_API) +* [The web app manifest](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#the_web_app_manifest) in _Making PWAs installable_ at MDN > References > Progressive web apps > Guides. +* [Web app manifests](https://developer.mozilla.org/docs/Web/Manifest) at MDN > References. + * [display_override](https://developer.mozilla.org/docs/Web/Manifest/display_override) in manfest. + * [display](https://developer.mozilla.org/docs/Web/Manifest/display) in manifest. +* [`env()`](https://developer.mozilla.org/docs/Web/CSS/env) CSS function. + +Blog: +* [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) +* [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/) + +YouTube: +* [Display content in the title bar of your desktop PWA](https://www.youtube.com/watch?v=NvClp35dFVI) + +Demo: +* [1DIV live](https://microsoftedge.github.io/Demos/1DIV/dist/) +* [/1DIV/ source code](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV) + * [manifest.json](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/dist/manifest.json) + * [app.js](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/src/app.js) - uses the `navigator.windowControlsOverlay` object. + * [app.css](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/dist/app.css) - uses the `titlebar-area-*` CSS environment variables. diff --git a/microsoft-edge/progressive-web-apps/index.md b/microsoft-edge/progressive-web-apps/index.md index 91e54fd5f5..64148684f9 100644 --- a/microsoft-edge/progressive-web-apps/index.md +++ b/microsoft-edge/progressive-web-apps/index.md @@ -106,17 +106,36 @@ See [Publish a PWA to the Microsoft Store](./how-to/microsoft-store.md). Using Progressive Web App (PWA) technologies is a great way to make your app **safe**, **discoverable**, **linkable**, **easy to install** and update, **responsive**, and **network independent**. Many businesses have had success with PWAs. For example: -* The Starbucks PWA has increased daily active users twice. Orders on desktop are nearly the same rate as mobile ([source](https://twitter.com/davidbrunelle/status/993960071406080000)). -* Trivago saw an increase of 150% for people who add its PWA to the home screen. The increased engagement led to a 97% increase in clockouts to hotel offers ([source](https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)). -* Tinder cut load times from 11.91 seconds to 4.68 seconds with their PWA. The app is 90% smaller than the compiled Android app ([source](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0)). +* The Starbucks PWA has increased daily active users twice. Orders on desktop are nearly the same rate as mobile ([source](https://twitter.com/davidbrunelle/status/993960071406080000)). + +* Trivago saw an increase of 150% for people who add its PWA to the home screen. The increased engagement led to a 97% increase in clockouts to hotel offers ([source](https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)). + +* Tinder cut load times from 11.91 seconds to 4.68 seconds with their PWA. The app is 90% smaller than the compiled Android app ([source](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0)). Read more success stories on the [PWA Stats](https://www.pwastats.com/) website. ## See also + + +* [Get started with PWAs](./how-to/index.md) +* [Installing a PWA](./ux.md#installing-a-pwa) +* [Publish a PWA to the Microsoft Store](./how-to/microsoft-store.md) + * [Microsoft Store](https://apps.microsoft.com) + +MDN: +* [Progressive Web Apps](https://developer.mozilla.org/docs/Web/Progressive_web_apps) at MDN. + +Wikipedia: +* [Progressive Web Apps](https://wikipedia.org/wiki/Progressive_web_app) + +Blog: +* [PWA Q&A](https://www.aaron-gustafson.com/notebook/pwa-qa) +* [Myth Busting PWAs](https://www.davrous.com/2019/10/18/myth-busting-pwas-the-new-edge-edition). + +YouTube: +* [Ignite | March 2021 | Igniting the Web Apps Story](https://www.youtube.com/watch?v=xUNC8MjW_iI) -* [Progressive Web Apps](https://developer.mozilla.org/docs/Web/Progressive_web_apps) at MDN Web Docs. -* [Progressive Web Apps](https://web.dev/progressive-web-apps/) at web.dev. -* [Progressive Web Apps](https://wikipedia.org/wiki/Progressive_web_app) at Wikipedia. -* [PWA Q&A](https://www.aaron-gustafson.com/notebook/pwa-qa) +Stats: +* [PWA Stats](https://www.pwastats.com) diff --git a/microsoft-edge/progressive-web-apps/whats-new/pwa.md b/microsoft-edge/progressive-web-apps/whats-new/pwa.md index 63dbc4483e..0488fbad84 100644 --- a/microsoft-edge/progressive-web-apps/whats-new/pwa.md +++ b/microsoft-edge/progressive-web-apps/whats-new/pwa.md @@ -186,7 +186,6 @@ The origin trial has been concluded. The URL Protocol Handlers capability is no See also: * [Protocol handlers origin trial](#protocol-handlers-origin-trial) * [Handle protocols in a PWA](../how-to/handle-protocols.md) -* [URL protocol handler registration for PWAs](https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler) in Chrome Dev > Web Platform > Best Practices. @@ -292,8 +291,7 @@ Developers can now use the experimental feature Web App URL Handlers, in an orig _2023 update: This feature is no longer an origin trial, and has been removed, so the following no longer applies, and the PWA URL Handlers feature was removed from the Chromium browser engine:_ Register your domain for the **Web App URL Handlers** trial at [Microsoft Edge Origin Trials](https://developer.microsoft.com/microsoft-edge/origin-trials). See also: -* [Handle links to a PWA](../how-to/handle-urls.md) -* [PWAs as URL Handlers](https://web.dev/pwa-url-handler/) +* [Handle links to a PWA](../how-to/handle-urls.md) @@ -362,6 +360,10 @@ An unexpected shutdown can occur due to process failure, system restart, or powe ## See also + * [Use origin trials in Microsoft Edge](../../origin-trials/index.md) * [Release notes for Microsoft Edge web platform](../../web-platform/release-notes/index.md) + +External: +* [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider) diff --git a/microsoft-edge/web-platform/release-notes/140.md b/microsoft-edge/web-platform/release-notes/140.md index 6bb8ec1be0..aa35c4c2f8 100644 --- a/microsoft-edge/web-platform/release-notes/140.md +++ b/microsoft-edge/web-platform/release-notes/140.md @@ -280,8 +280,8 @@ The new timing information provides: * The time it took to match the route. See also: +* [Navigation and resource timings](https://developer.mozilla.org/docs/Web/Performance/Guides/Navigation_and_resource_timings) at MDN. * [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) at MDN. -* [Use the Service Worker Static Routing API to bypass the service worker for specific paths](https://developer.chrome.com/blog/service-worker-static-routing) diff --git a/microsoft-edge/web-platform/site-impacting-changes.md b/microsoft-edge/web-platform/site-impacting-changes.md index a6917ff000..46121dab9f 100644 --- a/microsoft-edge/web-platform/site-impacting-changes.md +++ b/microsoft-edge/web-platform/site-impacting-changes.md @@ -61,10 +61,10 @@ This table lists high-impact changes which the Microsoft Edge team is tracking c | Removal of Native Client (NaCl) | v120 | To enhance web security and performance, Native Client (NaCl) is no longer supported for Microsoft Edge (along with other browsers). NaCl was supported through v115. In v116 through v119, NaCl was only usable by enabling an enterprise policy. WebAssembly (Wasm) is recommended instead of NaCl; see [Run compiled code in an extension](../extensions/developer-guide/run-compiled-code.md). | | Ignore modifications to `document.domain` by default | v119 | The `document.domain` property historically could be set to relax the same-origin policy and allow subdomains from a site to interact. This behavior will be disabled by default, such that setting the `document.domain` property will have no effect. For more information and workarounds, see [Microsoft Edge will disable modifying document.domain](/deployedge/edge-learnmore-origin-keyed-agent-cluster). | | New TLS server certificate verifier | v111 (managed devices), v109 (unmanaged devices) | No site compatibility impacts are anticipated. If you have uncommon TLS server certificate deployments, you should test in v109 to confirm there's no impact. For more information and testing guidance, see [Changes to Microsoft Edge browser TLS server certificate verification](/deployedge/microsoft-edge-security-cert-verification). | -| Send CORS preflight requests for private network access | v104 | Starting with v104, Microsoft Edge sends a CORS [preflight](https://developer.chrome.com/blog/private-network-access-preflight/) request before a page from the internet is allowed to request resources from a local network (intranet). The intranet server should respond to the preflight by providing explicit permission to access the resource. The result of this check is not yet enforced. Enforcement will begin in v111 at the earliest. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5737414355058688) and [_Chrome Developers_ blog post](https://developer.chrome.com/blog/private-network-access-preflight/#rollout-plan). Two compatibility policies are available to suppress the CORS preflight request: [InsecurePrivateNetworkRequestAllowed](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowed) and [InsecurePrivateNetworkRequestAllowedForUrls](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowedforurls). | +| Send CORS preflight requests for private network access | v104 | Starting with v104, Microsoft Edge sends a CORS preflight request before a page from the internet is allowed to request resources from a local network (intranet). The intranet server should respond to the preflight by providing explicit permission to access the resource. The result of this check is not yet enforced. Enforcement will begin in v111 at the earliest. This change is happening in the Chromium project, on which Microsoft Edge is based. See [Preflight request](https://developer.mozilla.org/docs/Glossary/Preflight_request) in Glossary at MDN; [Feature: Private Network Access preflight requests for subresources: warning-only mode](https://chromestatus.com/feature/5737414355058688) Chrome Platform Status. Two compatibility policies are available to suppress the CORS preflight request: [InsecurePrivateNetworkRequestAllowed](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowed) and [InsecurePrivateNetworkRequestAllowedForUrls](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowedforurls). | | Block external protocols in sandboxed frames by default | v103 | Blocks the use of external protocols (that interact with non-browser applications) from sandboxed iframes unless permission is explicitly granted by the `sandbox` attribute on the frame. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5680742077038592). | | Three-digit version number in the User-Agent string | v100 | Starting with v100, Microsoft Edge will send a three-digit version number in the User-Agent header, such as `Edg/100`. This may confuse scripts or server-side analytics that use a buggy parser to determine the User-Agent string version number. Starting with v97, site owners can emulate this condition before v100 by enabling the experiment flag `#force-major-version-to-100` in `edge://flags`. | -| Deprecate WebRTC's Plan B SDP semantics | v98 (Chrome+2) | This change is happening in the Chromium project, on which Microsoft Edge is based. This change deprecates a legacy Session Description Protocol (SDP) dialect called Plan B. This SDP format is being replaced by the Unified Plan, which is a spec-compliant and cross-browser compatible SDP format. For more information, see the [Chrome Platform Status entry](https://www.chromestatus.com/feature/5823036655665152), [PSA: Plan B should throw in M96 Beta and Stable](https://groups.google.com/g/discuss-webrtc/c/zRIgxG18D80/m/k4ZPzBO3AAAJ), and [PSA: Plan B throwing in Stable and Extended Deprecation Trial End Date](https://groups.google.com/u/1/g/discuss-webrtc/c/gEHrZyYKsfU). The Microsoft rollout schedule for deprecation is planned for two releases after Chrome. Requesting a [WebRTC Plan B Reverse Origin Trial Token](https://developer.chrome.com/origintrials/#/view_trial/3892235977954951169) allows sites to continue to use the deprecated API until v101. | +| Deprecate WebRTC's Plan B SDP semantics | v98 (Chrome+2) | This change is happening in the Chromium project, on which Microsoft Edge is based. This change deprecates a legacy Session Description Protocol (SDP) dialect called Plan B. This SDP format is being replaced by the Unified Plan, which is a spec-compliant and cross-browser compatible SDP format. For more information, see the [Chrome Platform Status entry](https://www.chromestatus.com/feature/5823036655665152), [PSA: Plan B should throw in M96 Beta and Stable](https://groups.google.com/g/discuss-webrtc/c/zRIgxG18D80/m/k4ZPzBO3AAAJ), and [PSA: Plan B throwing in Stable and Extended Deprecation Trial End Date](https://groups.google.com/u/1/g/discuss-webrtc/c/gEHrZyYKsfU). The Microsoft rollout schedule for deprecation is planned for two releases after Chrome. | | Block WebSQL in third-party contexts | v97 | Use of the legacy WebSQL feature will be blocked from third-party frames. An Enterprise policy [WebSQLInThirdPartyContextEnabled](/deployedge/microsoft-edge-policies#websqlinthirdpartycontextenabled) will be available as an opt-out until v101. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5684870116278272). | | Block mixed content downloads | v94 | Downloading of files from HTTP URLs will be blocked on HTTPS pages. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Google security blog entry](https://security.googleblog.com/2020/02/protecting-users-from-insecure_6.html). | | Restrict private network requests to secure contexts | v94 | Starting with v94, access to resources on local (intranet) networks from pages on the internet requires that those pages be delivered over HTTPS. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5436853517811712). Two compatibility policies are available to support scenarios that need to preserve compatibility with non-secure pages: [InsecurePrivateNetworkRequestAllowed](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowed) and [InsecurePrivateNetworkRequestAllowedForUrls](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowedforurls). | @@ -73,7 +73,7 @@ This table lists high-impact changes which the Microsoft Edge team is tracking c | Removal of Adobe Flash | v88 | This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Adobe Flash Chromium Roadmap](https://www.chromium.org/flash-roadmap#TOC-Flash-Support-Removed-from-Chromium-Target:-Chrome-88---Jan-2021-). | | Remove FTP support | v88 | Deprecated but still present starting in Beta v87. In v88, FTP support is removed entirely. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status Entry](https://chromestatus.com/feature/6246151319715840). Enterprises that have sites that still require FTP support can continue to use FTP by configuring the site to use [IE mode](/deployedge/edge-ie-mode). | | HTTP authentication disallowed when third-party cookies are blocked | v87 | Starting with v87, when cookies are blocked for third-party requests, using either the [BlockThirdPartyCookies](/deployedge/microsoft-edge-policies#blockthirdpartycookies) policy or the toggle in `edge://settings`, HTTP authentication is also disallowed. This change may impact Enterprise Mode [Site List downloads for Internet Explorer mode](/deployedge/edge-ie-mode-policies#configure-using-the-use-the-enterprise-mode-ie-website-list-policy) if the endpoint hosting the list requires the use of HTTP authentication. To allow the use of both cookies and HTTP authentication for Enterprise Mode Site List downloads, add a matching URL pattern to the [CookiesAllowedForURLs](/deployedge/microsoft-edge-policies#cookiesallowedforurls) policy. | -| Deprecate AppCache | v86 (Chrome+1) | This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [WebDev documentation](https://web.dev/appcache-removal). The Microsoft rollout schedule for deprecation is planned for one release after Chrome. Requesting an [AppCache OriginTrial Token](https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673) allows sites to continue to use the deprecated API until v90. | +| Deprecate AppCache | v86 (Chrome+1) | This change is happening in the Chromium project, on which Microsoft Edge is based. See [Preparing for AppCache removal](https://web.dev/articles/appcache-removal) at web.dev. The Microsoft rollout schedule for deprecation is planned for one release after Chrome. Requesting an [AppCache OriginTrial Token](https://developers.chrome.com/origintrials/#/view_trial/1776670052997660673) allows sites to continue to use the deprecated API until v90. | | Referrer Policy: Default to `strict-origin-when-cross-origin` | v86 (Chrome+1) | Deprecated but still present starting in Canary v79, Dev v79. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, including the planned timeline by Google for this change, see the [Chrome Platform Status entry](https://chromestatus.com/feature/6251880185331712). | | Cookies default to `SameSite=Lax` and `SameSite=None-requires-Secure` | v86 (Chrome+1) | Deprecated but still present starting in Canary v82, Dev v82. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, including the planned timeline by Google for this change, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5088147346030592). | | Turn off TLS/1.0 and TLS/1.1 | v84 | Versions 1.0 and 1.1 of the TLS protocol used by HTTPS sites are now obsolete and unavailable in modern browsers. | diff --git a/scripts/web-platform-release-notes.js b/scripts/web-platform-release-notes.js index 14d74ee0da..b06058d642 100644 --- a/scripts/web-platform-release-notes.js +++ b/scripts/web-platform-release-notes.js @@ -4,15 +4,14 @@ import github from '@actions/github'; import Eleventy from "@11ty/eleventy"; import fs from "fs/promises"; import playwright from "playwright"; +import { execSync } from 'child_process'; const EDGE_OT_ROOT = "https://developer.microsoft.com/en-us"; const EDGE_OT_PAGE = `${EDGE_OT_ROOT}/microsoft-edge/origin-trials/trials`; // If Beta becomes stable within the next N coming days, generate the release notes for Canary. // This way, the release notes are ready for when Canary becomes Beta. const DAYS_NUMBER_BEFORE_RELNOTES_NOTICE = 15; -// The Git branch name where the release notes will be generated. -// Keep this in sync with thge webplat-releasenotes.yaml workflow file. -const BRANCH_NAME = "web-platform-release-notes"; +const BRANCH_NAME_PREFIX = "web-platform-release-notes-"; async function fetchChromeStatusAPI(url) { const response = await fetch(url); @@ -31,12 +30,45 @@ function longDate(dateString) { }); } -function getReleaseNoteMDFilePath(version) { - return `https://github.com/MicrosoftDocs/edge-developer/blob/${BRANCH_NAME}/microsoft-edge/web-platform/release-notes/${version}.md`; +async function execute(cmd) { + try { + const stdout = await execSync(cmd); + return stdout.toString(); + } catch (error) { + console.error(`Error executing command "${cmd}": ${error.message}`); + console.log(error.stdout.toString()); + process.exit(1); + } +} + +async function releaseNotesAlreadyExists(version) { + const response = await fetch(`https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/refs/heads/main/microsoft-edge/web-platform/release-notes/${version}.md`); + + // Github.com normally responds with 404 if the file doesn't exist. So this should catch it. + if (response.status !== 200) { + return false; + } + + // Just in case it doesn't, check the content too. + const text = await response.text(); + return text.includes(`Microsoft Edge ${version} web platform release notes`); } -function getReleaseNoteRawMDFilePath(version) { - return `https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/refs/heads/${BRANCH_NAME}/microsoft-edge/web-platform/release-notes/${version}.md`; +async function releaseNotesDraftAlreadyExists(version, branchName) { + const response = await fetch(`https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/refs/heads/${branchName}/microsoft-edge/web-platform/release-notes/${version}.md`); + + // Github.com normally responds with 404 if the file doesn't exist. So this should catch it. + if (response.status !== 200) { + return false; + } + + // Just in case it doesn't, check the content too. + const text = await response.text(); + return text.includes(`Microsoft Edge ${version} web platform release notes`); +} + +function getReleaseNoteMDFilePath(version, branchName) { + return `https://github.com/MicrosoftDocs/edge-developer/blob/${branchName}/microsoft-edge/web-platform/release-notes/${version}.md`; } async function getActiveEdgeOTs() { @@ -162,13 +194,21 @@ async function main() { `Preparing the beta release notes for ${nextBetaVersion} (to be released on ${nextBetaReleaseDate}).` ); + const branchName = BRANCH_NAME_PREFIX + nextBetaVersion; + // -------------------------------------------------- - // 2. Check if there isn't already a release notes draft for the next beta version. + // 2. Check if there isn't already a published or draft release notes for the next beta version. // -------------------------------------------------- - const rawFileResponse = await fetch(getReleaseNoteRawMDFilePath(nextBetaVersion)); - if (rawFileResponse.status === 200) { - console.error(`A PR is already open for the next beta release notes. File exists: ${getReleaseNoteMDFilePath(nextBetaVersion)}.`); + const alreadyExists = await releaseNotesAlreadyExists(nextBetaVersion); + if (alreadyExists) { + console.error(`Release notes for the next beta version ${nextBetaVersion} already exist.`); + process.exit(0); + } + + const draftAlreadyExists = await releaseNotesDraftAlreadyExists(nextBetaVersion, branchName); + if (draftAlreadyExists) { + console.error(`Draft release notes for the next beta version ${nextBetaVersion} already exist on the ${branchName} branch.`); process.exit(0); } @@ -287,15 +327,35 @@ async function main() { await fs.writeFile(releaseNotesPath, releaseNotesContent); // -------------------------------------------------- - // 8. Open an issue on the repo to notify the team about the new release notes draft. + // 8. Commit the new file to a new branch. + // -------------------------------------------------- + + console.log(`Committing the new file to branch ${branchName}...`); + + console.log(`Configuring git with ${ process.env.actor }`); + await execute(`git config --local user.email "${ process.env.actor }@users.noreply.github.com"`); + await execute(`git config --local user.name "${ process.env.actor }"`); + + console.log(`Creating branch ${branchName}`); + await execute(`git checkout -b ${branchName}`); + + console.log(`Adding and committing the new file`); + await execute(`git add ${releaseNotesPath}`); + await execute(`git commit -m "New web platform release notes for ${nextBetaVersion}"`); + + console.log(`Pushing the file to the remote repo`); + await execute(`git push origin ${branchName}`); + + // -------------------------------------------------- + // 9. Open an issue on the repo to notify the team about the new release notes draft. // -------------------------------------------------- console.log("Opening an issue to notify the team about the new release notes draft."); const title = `Microsoft Edge Beta ${nextBetaVersion} web platform release notes ready for review`; - const body = `The release notes draft for the next Microsoft Edge beta version ${nextBetaVersion} has been generated in [${nextBetaVersion}.md](${getReleaseNoteMDFilePath(nextBetaVersion)}) on the ${BRANCH_NAME} branch.\n\nPlease [create a pull request](https://github.com/MicrosoftDocs/edge-developer/compare/main...${BRANCH_NAME}), update the content as needed, and close this issue.`; + const body = `The release notes draft for the next Microsoft Edge beta version ${nextBetaVersion} has been generated in [${nextBetaVersion}.md](${getReleaseNoteMDFilePath(nextBetaVersion, branchName)}) on the ${branchName} branch.\n\nPlease [create a pull request](https://github.com/MicrosoftDocs/edge-developer/compare/main...${branchName}), update the content as needed, and close this issue.`; const octokit = github.getOctokit(process.env.token); - const { data: issue } = await octokit.rest.issues.create({ + await octokit.rest.issues.create({ owner: "MicrosoftDocs", repo: "edge-developer", title,