Update "Debug a Progressive Web App (PWA)"#3841
Conversation
mikehoffms
added
cat: devtools
| <!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#test-protocol-handler --> | ||
|
|
||
| <!-- todo --> | ||
| A PWA can handle links that use a specific protocol, for a more integrated experience. To create a handler, see [URL protocol handler registration for PWAs](https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler) (todo: local link or mdn) |
There was a problem hiding this comment.
replace "URL protocol handler registration for PWAs" by local link or mdn
https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler
& in h2 See also
There was a problem hiding this comment.
We have a local article for this: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/handle-protocols
|  | ||
|
|
||
| Service workers are a fundamental technology in the web platform. Service workers are scripts that the browser runs in the background, separate from a webpage. Service worker scripts enable your app to access features that don't need a webpage or user interaction, such as push notifications, background sync, and offline experiences. | ||
| 1. Click the **Test protocol** button. todo: doesn't seem to work, opens new tab in Edge |
There was a problem hiding this comment.
Clicking the Test protocol button doesn't seem to work, opens new tab in Edge
pls test the two ways @captainbrosset
- DevTools
- non-DevTools
There was a problem hiding this comment.
Yes, I've had this bug too. I sent a report to the DevTools team.
The expected behavior is that the app should launch. Can we document this in the meantime?
| * The **Sync** button emulates a background sync event. | ||
|
|
||
| <!--TODO: link Web "How tickle works" sections when available --> | ||
| * The **Periodic sync** section has a **Periodic sync** button. todo: state purpose |
There was a problem hiding this comment.
summarize purpose of Periodic sync section
@captainbrosset
https://developer.chrome.com/docs/devtools/progressive-web-apps/#service-workers - article lacks "periodic".
h2:
https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/progressive-web-apps/?branch=pr-en-us-3841&source=docs#service-workers
h4:
https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/progressive-web-apps/?branch=pr-en-us-3841&source=docs#ui-controls-in-the-service-workers-page
There was a problem hiding this comment.
We have local articles for both sync and periodoc sync:
- Sync: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-background-sync-api-to-synchronize-data-with-the-server
- Periodic sync: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-periodic-background-sync-api-to-regularly-get-fresh-content
| * The **Periodic sync** section has a **Periodic sync** button. todo: state purpose | |
| * The **Periodic sync** button emulates a periodic sync event, to test code that uses the Periodic Background Sync API. See also [Use the Periodic Background Sync API to regularly get fresh content](../../progressive-web-apps/how-to/background-syncs.md#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) in _Synchronize and update a PWA in the background_. |
And something similar for the previous bullet point.
| 1. Open a PWA, such as the [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) demo, in a new window or tab. | ||
|
|
||
| The **Clear Storage** tab is useful when developing a progressive web app. Use the **Clear Storage** pane to unregister service workers and clear all caches and storage, with a single button-click. | ||
| 1. Right-click the PWA (todo: installed, or not?) and then select **Inspect**. |
There was a problem hiding this comment.
does the PWA have to have been installed?
show DevTools for the PWA webpage, or for the installed PWA?
There was a problem hiding this comment.
No, a PWA can use a service worker and store data in the cache without being installed.
There was a problem hiding this comment.
critically compare each upstream vs. downstream section
scenario: upstream updated a sentence, that was previously copied (outdated) in an existing section.
|
|
||
| To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. | ||
| <!-- todo: removed section, can't link: | ||
| To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. --> |
There was a problem hiding this comment.
1 - removed "Quota usage" section, so can't link from
https://review.learn.microsoft.com/microsoft-edge/devtools/storage/application-tool?branch=pr-en-us-3841
to the quota section that would be above the section:
https://review.learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/?branch=pr-en-us-3841&source=docs#clear-storage-storage-page
upstream has the omitted section:
https://developer.chrome.com/docs/devtools/progressive-web-apps/#opaque-responses
restore "Quota usage" section & link to it from here?
live downstream has the section, so this section removal is kind of a regression:
https://learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/#quota-usage
and introduces a deviation from upstream, affecting Maintenance.
There was a problem hiding this comment.
|
|
||
| To learn more about cache data storage quota, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. | ||
| <!-- todo: removed section, can't link: | ||
| To learn more about cache data storage quota, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. --> |
There was a problem hiding this comment.
2 - removed "Quota usage" section, so can't link from
https://review.learn.microsoft.com/microsoft-edge/devtools/storage/cache?branch=pr-en-us-3841#view-cache-data-1
to the quota section that would be above the section:
https://review.learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/?branch=pr-en-us-3841&source=docs#clear-storage-storage-page
upstream has the omitted section:
https://developer.chrome.com/docs/devtools/progressive-web-apps/#opaque-responses
restore "Quota usage" section & link to it from here?
live downstream has the section, so this section removal is kind of a regression:
https://learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/#quota-usage
and introduces a deviation from upstream, affecting Maintenance.
There was a problem hiding this comment.
There was a problem hiding this comment.
This image isn't used in the markdown anymore.
| * Device search engines such as Spotlight. | ||
| * Content sharing sheets. For example, when you view a photo on your mobile device, you can share that photo with other apps, such as your messaging app. A PWA can trigger share dialogs, and can also appear in share dialogs. See [Share content with other apps](../../progressive-web-apps/how-to/share.md). | ||
|
|
||
| The features that are discussed below are features of the **Application** tool are relevant for PWAs. For help on the other features and pages in the **Application** tool, see: |
There was a problem hiding this comment.
| The features that are discussed below are features of the **Application** tool are relevant for PWAs. For help on the other features and pages in the **Application** tool, see: | |
| The features that are discussed below are features of the **Application** tool that are relevant for PWAs. For help on the other features and pages in the **Application** tool, see: |
| * The home screen on Android and iOS. | ||
| * PWAs show up in: | ||
| * Activity switchers. | ||
| * Device search engines such as Spotlight. |
There was a problem hiding this comment.
| * Device search engines such as Spotlight. | |
| * Device search engines such as the Windows Start menu. |
| * PWAs show up in: | ||
| * Activity switchers. | ||
| * Device search engines such as Spotlight. | ||
| * Content sharing sheets. For example, when you view a photo on your mobile device, you can share that photo with other apps, such as your messaging app. A PWA can trigger share dialogs, and can also appear in share dialogs. See [Share content with other apps](../../progressive-web-apps/how-to/share.md). |
There was a problem hiding this comment.
We can probably shorten this and keep it understandable.
| * Content sharing sheets. For example, when you view a photo on your mobile device, you can share that photo with other apps, such as your messaging app. A PWA can trigger share dialogs, and can also appear in share dialogs. See [Share content with other apps](../../progressive-web-apps/how-to/share.md). | |
| * Sharing dialogs, such as when sharing files between apps. A PWA can trigger share dialogs, and can also appear in share dialogs. See [Share content with other apps](../../progressive-web-apps/how-to/share.md). |
| <!-- https://developer.chrome.com/docs/devtools/progressive-web-apps/#test-protocol-handler --> | ||
|
|
||
| <!-- todo --> | ||
| A PWA can handle links that use a specific protocol, for a more integrated experience. To create a handler, see [URL protocol handler registration for PWAs](https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler) (todo: local link or mdn) |
There was a problem hiding this comment.
We have a local article for this: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/handle-protocols
| * If the service worker is running, a **Stop** button is displayed. | ||
|
|
||
| * The **Clients** line tells you the origin that the service worker is scoped to. The **focus** button is mostly useful when you've enabled the **show all** checkbox. When that checkbox is enabled, all registered service workers are listed. If you click the **focus** button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab. | ||
| Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **stop** button may simulate that. |
There was a problem hiding this comment.
| Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **stop** button may simulate that. | |
| Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **Stop** button may simulate that. |
| * The **Sync** button emulates a background sync event. | ||
|
|
||
| <!--TODO: link Web "How tickle works" sections when available --> | ||
| * The **Periodic sync** section has a **Periodic sync** button. todo: state purpose |
There was a problem hiding this comment.
We have local articles for both sync and periodoc sync:
- Sync: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-background-sync-api-to-synchronize-data-with-the-server
- Periodic sync: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-periodic-background-sync-api-to-regularly-get-fresh-content
| * The **Periodic sync** section has a **Periodic sync** button. todo: state purpose | |
| * The **Periodic sync** button emulates a periodic sync event, to test code that uses the Periodic Background Sync API. See also [Use the Periodic Background Sync API to regularly get fresh content](../../progressive-web-apps/how-to/background-syncs.md#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) in _Synchronize and update a PWA in the background_. |
And something similar for the previous bullet point.
| 1. Open a PWA, such as the [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) demo, in a new window or tab. | ||
|
|
||
| The **Clear Storage** tab is useful when developing a progressive web app. Use the **Clear Storage** pane to unregister service workers and clear all caches and storage, with a single button-click. | ||
| 1. Right-click the PWA (todo: installed, or not?) and then select **Inspect**. |
There was a problem hiding this comment.
No, a PWA can use a service worker and store data in the cache without being installed.
|
|
||
| To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. | ||
| <!-- todo: removed section, can't link: | ||
| To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. --> |
There was a problem hiding this comment.
|
|
||
| To learn more about cache data storage quota, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. | ||
| <!-- todo: removed section, can't link: | ||
| To learn more about cache data storage quota, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. --> |
There was a problem hiding this comment.
2 participants
Rendered article sections for review:
/devtools/progressive-web-apps/index.mdAB#61645705