You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The two different ways in which you can leverage the sidebar are designed to meet different developer needs. The following table summarizes the key differences between the two approaches:
25
+
The two different ways in which you can leverage the sidebar are designed to meet different developer needs. The following are the key differences between sidebar apps and sidebar extensions:
26
26
27
27
|Approach | Sidebar app | Sidebar extension |
28
28
|---|---|---|
29
29
| Definition | A Progressive Web App (PWA) that runs in the sidebar. | A Microsoft Edge extension that displays content in the sidebar. |
30
30
| Distribution | Like a website, the app is hosted on the app's web server. | The extension is distributed through Microsoft Edge Add-ons. |
31
31
| Capabilities | The app can make use of all web APIs and features, as well as PWA capabilities such as offline support, push, or file system access. | The extension can make use of powerful extension APIs, such as reading or modifying the current page. |
32
-
| Context | The app runs in its own web context, separate from the main tab. | The extension can access the current page and modify it via its content script. |
33
-
| Installation | The user installs the app by interacting with the sidebar when visiting the app's website. | The extension is installed by the user from Microsoft Edge Add-ons. |
32
+
| Context | The app runs in its own web context, separate from the main tab. | The extension can access the current webpage and modify the webpage via the extension's content script. |
33
+
| Installation | The user installs the app by interacting with the sidebar when visiting the app's website. | The extension is installed by the user from the Microsoft Edge Add-ons website. |
34
34
| User experience | The app has its own icon in the sidebar. Clicking the icon opens the sidebar if it was closed and displays the app's contents. | The user experience depends on the extension. The extension can open the sidebar depending on the websites the user visits in the browser. |
35
-
|Knowledge required| Web development and PWA knowledge.| Extension development knowledge. |
35
+
|Technologies used| Web development and PWA. See [Overview of Progressive Web Apps (PWAs)](/microsoft-edge/progressive-web-apps-chromium/index.md).| Extension development. See [Overview of Microsoft Edge extensions](/microsoft-edge/extensions-chromium/index.md). |
Sidebar apps allow you to adapt your existing Progressive Web App (PWA) to securely run alongside other browser tabs for a side-by-side co-browsing experience, which is a great choice for web developers who want to offer companion experiences including social, messaging, or media apps that don't require advanced extensions capabilities.
42
42
43
-
We plan to help users discover and install sidebar apps as they browse the web, providing great discoverability for your app with just a simple change to your web application manifest file. This is a great option if you want to reuse your existing web app for the sidebar in Microsoft Edge and make full use of the web capabilities that are available to PWAs.
43
+
The sidebar app infrastructure helps users discover and install sidebar apps as they browse the web, providing great discoverability for your app with just a simple change to your web application manifest file. Sidebar apps are a great option if you want to reuse your existing web app for the sidebar in Microsoft Edge and make full use of the web capabilities that are available to PWAs.
44
44
45
45
To learn more about PWAs and how to create them, see [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps-chromium/index.md). And to learn more about adapting your existing PWA to the sidebar in Microsoft Edge, see [Build PWAs for the sidebar in Microsoft Edge](../progressive-web-apps-chromium/how-to/sidebar.md).
## Develop experiences for the sidebar in Microsoft Edge
73
73
74
-
The sidebar in Microsoft Edge is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs. The content in the sidebar augments the user's primary task by enabling side-by-side browsing and minimizing the need to switch contexts between browser tabs. With the sidebar in Microsoft Edge, users can access the productivity tools they need while staying in their workflow.
74
+
The sidebar in Microsoft Edge is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs. The content in the sidebar augments the user's primary task by enabling side-by-side browsing and minimizing the need to switch contexts between browser tabs. With the sidebar in Microsoft Edge, users can access the productivity tools they need, while staying in their workflow.
75
75
76
76
As a developer, you can leverage the sidebar for your own experiences in two ways:
0 commit comments