add systray icon explainer #892
Conversation
Adds initial files to publish the systray icon explainer to the edge repo.
diekus
added
the
System Tray Icon
| "short_name": "webapp", | ||
| "name": "Awesome Web App", | ||
| ..., | ||
| "tray_icon": [{ |
There was a problem hiding this comment.
Rather than making a new top level entry for the icon, what about using the existing icons collection? This would avoid potential duplication between the 2 and mean less "new" for a site to implement to try out this functionality.
Optionally we could add a new purpose to the icon if it is important to allow designating an image particularly for the system tray. If that's not a requirement, however, it could just be based on size.
It would mean we couldn't key off the presence of the tray_icon field to know if we should show a tray icon, but we could pivot and support an empty tray_menu to indicate a desire for an icon, without a desire for a menu.
There was a problem hiding this comment.
I don't think that size alone would be sufficient given that the icon should be able to change based on app state. I do like the idea of just including the icons in the icons collection, but I don't think purpose is an appropriate place to add that this is for the systray given the other existing purposes (monochrome, maskable, any)....systemtray doesn't seem to quite work there.
| As stated before, the icon on the system tray for an installed web app will open/focus the app's window when clicked and will have a menu when the user double clicks. This menu can be specified in the manifest file, and uses the same format as the one for shortcuts. | ||
|
|
||
| ```json | ||
| "tray_menu": [ |
There was a problem hiding this comment.
Can we shift this name to something less tied to the particular platform implementation? Similar to how shortcuts is broad enough for use across platforms and UI surfaces. That way we stage ourselves well for another platform wanting to adopt this in a new location. I'm not tied to a particular name, but maybe even something like alternate_shortcuts?
There was a problem hiding this comment.
+1 to not tying this to "system tray". Might I suggest secondary_shortcuts?
| ] | ||
| ``` | ||
|
|
||
| Giving the developer the option to have different menu options in the shortcuts and system tray menu allows them to provide a better UX for users that doesn't repeat unnecessary options. By default, the system tray menu should have options to open and to quit the app. |
There was a problem hiding this comment.
NIT: The 'default' options seems like an implementation detail to be left up to the browser, rather than a part that should be included in the standard.
There was a problem hiding this comment.
It feels relevant for a developer to know if they should try to figure out how to add those options to their menu or not.
| @@ -71,6 +71,7 @@ we move them into the [Alumni section](#alumni-) below. | |||
| | [ApplicationData.LocalFolder Access](LocalFolder/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/LocalFolder%20Access"></a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=luhuangMSFT&labels=LocalFolder+Access&template=local-folder-access.md&title=%5BLocalFolder+Access%5D+%3CTITLE+HERE%3E) | PWA | | |||
| | [Document Subtitle](DocumentSubtitle/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Document%20Subtitle"></a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=diekus&labels=Document+Subtitle&template=document-subtitle.md&title=%5BDocument+Subtitle%5D+%3CTITLE+HERE%3E) | PWA | | |||
| | [Ratings & Reviews Prompt](RatingsAndReviewsPrompt/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Ratings%20and%20Reviews"></a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=aarongustafson%2C+diekus&labels=Ratings+and+Reviews&template=ratings-and-reviews-prompt.md&title=%5BRatings+and+Reviews+Prompt%5D+%3CTITLE+HERE%3E) | PWA | | |||
| | [System Tray Icon for PWAs](SysTrayIcon/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/System%20Tray%20Icon"></a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=diekus&labels=System+Tray+Icon&template=systray-icon.md&title=%5BSystem+Tray+Icon%5D+%3CTITLE+HERE%3E) | PWA | | |||
There was a problem hiding this comment.
You've referenced template=systray-icon.md as a template for the newly created issue, but it's not part of this PR.
| ## Introduction | ||
| Desktop platform-specific applications have several ways of indicating that they are open. On platforms like Windows and macOS, the corresponding app icon on the taskbar/dock displays a little dot indicating that the app is open (or has an open window) and running. Additionally, *open applications may also have an icon on the system tray area*. This is very useful for end users because these icons can be used as a re-entry point to the app and can also convey different information. | ||
|
|
||
| At the very minimum, in every desktop platform, an application can have a system tray icon that can show a badge and have a menu that allows for entering, deep-linking into, or quitting the app. A notable characteristic of icons on the system tray on all platforms is that the app's tray icon ONLY shows if the application is open, as opposed to the icons on the taskbar or dock, that are always present. |
There was a problem hiding this comment.
Given this line "At the very minimum, in every desktop platform, an application can have a system tray icon...", this would be a great spot to just have a table with example images of the systray icon on Windows, Mac, Linux and ChromeOS.
|
|
||
| At the very minimum, in every desktop platform, an application can have a system tray icon that can show a badge and have a menu that allows for entering, deep-linking into, or quitting the app. A notable characteristic of icons on the system tray on all platforms is that the app's tray icon ONLY shows if the application is open, as opposed to the icons on the taskbar or dock, that are always present. | ||
|
|
||
| Web applications currently do not have a way of participating in the system tray area. This leads to a worse user experience for end users on desktop environments. If a user closes the installed web application's window, this causes the web app to quit, and users may, for example, stop receiving status updates or miss that the application is running. |
There was a problem hiding this comment.
| Web applications currently do not have a way of participating in the system tray area. This leads to a worse user experience for end users on desktop environments. If a user closes the installed web application's window, this causes the web app to quit, and users may, for example, stop receiving status updates or miss that the application is running. | |
| Web applications currently do not have a way of participating in the system tray area. This leads to a worse user experience for end users on desktop environments for certain classes of applications. If a user closes the installed web application's window, this causes the web app to quit, and users may, for example, stop receiving status updates or miss that the application is running. |
| In macOS, this is the area in the top-right corner of the desktop. In the screenshot below we can see a messaging app, an email client, a VPN client, a videoplayer and a file backup program running and having an icon in the system tray area. | ||
|  | ||
|
|
||
| In both cases, these apps are giving the user an entry point into the application, potentially displaying additional useful information at a glance or providing menus to deep-link into the app. Some of the benefits for the user in the previous screenshots are: |
There was a problem hiding this comment.
"In both cases..." If you're saying that every major desktop platform has this concept, please include a Linux example as well, else modify the languaging a bit. Also, is there a ChromeOS example?
| For example, on Windows, this is the area in the bottom-right corner of the desktop. The screenshot below shows a file backup app, a videoplayer, an email client and an instant messaging program running and having presence in the system tray area. | ||
|  | ||
|
|
||
| In macOS, this is the area in the top-right corner of the desktop. In the screenshot below we can see a messaging app, an email client, a VPN client, a videoplayer and a file backup program running and having an icon in the system tray area. |
There was a problem hiding this comment.
At TPAC, I recall hearing some feedback that using that area in macOS was actually less desirable than just leveraging the dock. It will be interesting what additional feedback we get on this once published.
|
|
||
|
|
||
| ### System Tray Menu | ||
| As stated before, the icon on the system tray for an installed web app will open/focus the app's window when clicked and will have a menu when the user double clicks. This menu can be specified in the manifest file, and uses the same format as the one for shortcuts. |
There was a problem hiding this comment.
Double-click opens the menu? I thought it was a right-click?
| As stated before, the icon on the system tray for an installed web app will open/focus the app's window when clicked and will have a menu when the user double clicks. This menu can be specified in the manifest file, and uses the same format as the one for shortcuts. | ||
|
|
||
| ```json | ||
| "tray_menu": [ |
There was a problem hiding this comment.
+1 to not tying this to "system tray". Might I suggest secondary_shortcuts?
| ] | ||
| ``` | ||
|
|
||
| Giving the developer the option to have different menu options in the shortcuts and system tray menu allows them to provide a better UX for users that doesn't repeat unnecessary options. By default, the system tray menu should have options to open and to quit the app. |
There was a problem hiding this comment.
It feels relevant for a developer to know if they should try to figure out how to add those options to their menu or not.
| There are no new privacy or security considerations. The feature only enables a UX affordance on supporting platforms. | ||
|
|
||
|
|
||
| ## Open Questions |
There was a problem hiding this comment.
How does a web developer change the icon of the system tray in order to indicate a change in state (like how Teams shows a different icon based on if you're in a meeting, offline, away, etc...)?
| There are no new privacy or security considerations. The feature only enables a UX affordance on supporting platforms. | ||
|
|
||
|
|
||
| ## Open Questions |
There was a problem hiding this comment.
How do developers dynamically add content to the menu? (Like if they want to add an informative menu item to tell me what account I'm logged-in as, or if they want to provide me a way to switch between some custom settings)?
Adds initial files to publish the systray icon explainer to the edge repo.