EDGE Side Panel

Microsoft Edge Only: The edge_side_panel property is specific to Microsoft Edge and will be ignored by other browsers.

Overview

Progressive Web Apps can opt-in to be pinned to the sidebar in Microsoft Edge. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs, enabling side-by-side browsing without context switching.

Key Features:

Always accessible alongside browser content
Persistent across browser sessions
Customizable width
Perfect for utilities and reference apps
Parallel browsing experience

Use Cases

The Edge sidebar is ideal for applications that users want to access while browsing other content:

Productivity Tools: Calculators, note-taking apps, task managers
Reference Apps: Dictionary, translation tools, documentation viewers
Communication: Chat apps, messaging platforms
Media: Music players, podcast apps (can play while browsing)
Shopping: Price comparison tools, shopping lists
Developer Tools: API testers, JSON formatters, code snippets
Social Media: Social network feeds, notifications

Configuration

Basic Configuration

Enable sidebar support without specifying width:

/config/packages/pwa.yaml

pwa:
    manifest:
        enabled: true
        edge_side_panel: ~

With this configuration, your PWA can be added to the Edge sidebar with default width.

Specify Preferred Width

Set a preferred width for your sidebar panel:

/config/packages/pwa.yaml

pwa:
    manifest:
        enabled: true
        edge_side_panel:
            preferred_width: 400

Width Guidelines:

Minimum: 200px (Edge enforced minimum)
Recommended: 350-500px for most apps
Maximum: No hard limit, but Edge may constrain to reasonable values

Display Mode Considerations

For sidebar-only apps, use browser display mode:

/config/packages/pwa.yaml

pwa:
    manifest:
        enabled: true
        display: "browser"
        edge_side_panel:
            preferred_width: 400

Setting display: "browser" tells Edge that your app is designed for the sidebar and shouldn't be offered as a standalone installable app.

Complete Example

/config/packages/pwa.yaml

pwa:
    manifest:
        enabled: true
        name: "Calculator"
        short_name: "Calc"
        display: "browser"
        orientation: "portrait"
        edge_side_panel:
            preferred_width: 350
        icons:
            - src: "icons/icon-192.png"
              sizes: [192]
            - src: "icons/icon-512.png"
              sizes: [512]

Width Recommendations by Application Type

Calculator / Utilities

Recommended: 300-350px

edge_side_panel:
    preferred_width: 320

Reasoning: Calculators don't need much horizontal space. Narrower width leaves more room for browser content.

Note-Taking App

Recommended: 400-500px

edge_side_panel:
    preferred_width: 450

Reasoning: Enough width for comfortable typing and reading notes.

Chat / Messaging

Recommended: 350-400px

edge_side_panel:
    preferred_width: 380

Reasoning: Standard chat interface width, similar to messaging apps.

Documentation Viewer

Recommended: 500-600px

edge_side_panel:
    preferred_width: 550

Reasoning: Documentation benefits from wider layout for code examples and text.

Music Player

Recommended: 300-350px

edge_side_panel:
    preferred_width: 320

Reasoning: Compact control interface, doesn't need much space.

Translation Tool

Recommended: 400-450px

edge_side_panel:
    preferred_width: 420

Reasoning: Needs space for source and translated text.

Browser Support

Browser

Support

Microsoft Edge

✅ Full support

Chrome

❌ Not supported (property ignored)

Safari

❌ Not supported (property ignored)

Firefox

❌ Not supported (property ignored)

Graceful Degradation: Other browsers will simply ignore the edge_side_panel property. Your app will work normally in those browsers.

Responsive Design

Design your app to work both in the sidebar and as a standalone page:

CSS Media Queries

public/css/responsive.css

/* Default layout */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Sidebar layout (narrow viewport) */
@media (max-width: 600px) {
    .app-container {
        padding: 10px;
    }

    /* Simplify layout for narrow space */
    .sidebar-only {
        display: none;
    }

    /* Stack elements vertically */
    .flex-row {
        flex-direction: column;
    }

    /* Reduce font sizes */
    h1 {
        font-size: 1.5rem;
    }

    /* Compact buttons */
    .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Specific styling for very narrow sidebar */
@media (max-width: 400px) {
    .app-container {
        padding: 5px;
    }

    .detailed-view {
        display: none;
    }

    .compact-view {
        display: block;
    }
}

JavaScript Detection

Detect narrow viewport and adjust functionality:

public/app.js

// Detect if running in sidebar (narrow viewport)
function isSidebarMode() {
    return window.innerWidth < 600;
}

function adaptToViewport() {
    if (isSidebarMode()) {
        // Sidebar mode adjustments
        document.body.classList.add('sidebar-mode');

        // Simplify interface
        hideDetailedViews();
        enableCompactMode();

        console.log('Running in sidebar mode');
    } else {
        // Full app mode
        document.body.classList.remove('sidebar-mode');

        // Full interface
        showDetailedViews();
        disableCompactMode();

        console.log('Running in full mode');
    }
}

// Adapt on load
adaptToViewport();

// Adapt on resize (if user resizes sidebar)
window.addEventListener('resize', adaptToViewport);

User Experience Best Practices

1. Design for Narrow Viewports

/* Prioritize vertical scrolling over horizontal */
.content {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Use full width available */
.panel {
    width: 100%;
    box-sizing: border-box;
}

2. Minimize Horizontal Elements

<!-- ✗ Avoid wide horizontal layouts -->
<div class="horizontal-menu">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
</div>

<!-- ✓ Use vertical or icon-based layouts -->
<nav class="vertical-menu">
    <button><icon>📊</icon></button>
    <button><icon>⚙️</icon></button>
    <button><icon>📁</icon></button>
    <button><icon>👤</icon></button>
</nav>

3. Use Collapsible Sections

<details class="section">
    <summary>Settings</summary>
    <div class="section-content">
        <!-- Settings content -->
    </div>
</details>

<details class="section">
    <summary>History</summary>
    <div class="section-content">
        <!-- History content -->
    </div>
</details>

4. Optimize Text Readability

/* Ensure readable text in narrow space */
body {
    font-size: 14px;
    line-height: 1.5;
}

/* Break long words */
.text-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent text overflow */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

5. Provide Clear Actions

<!-- Clear, tappable actions -->
<button class="action-btn" style="
    display: block;
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    font-size: 16px;">
    Add New Item
</button>

Testing in Edge

1. Enable Sidebar Testing

1. Open Microsoft Edge
2. Go to edge://flags
3. Search for "Desktop PWA side panel"
4. Enable the flag
5. Restart Edge

2. Install PWA to Sidebar

1. Navigate to your PWA
2. Click "..." menu → Apps → Install this site as an app
3. In the Edge sidebar, click "+" to add app
4. Select your PWA from the list
5. Your app appears in the sidebar

3. Test Width Adjustment

1. Open your app in sidebar
2. Drag the sidebar edge to resize
3. Observe how your app adapts
4. Test at minimum width (~200px)
5. Test at preferred width
6. Test at maximum sidebar width

4. Test Functionality

# Checklist
- ✓ All features accessible in narrow viewport
- ✓ No horizontal scrolling required
- ✓ Text is readable
- ✓ Buttons are tappable
- ✓ Forms are usable
- ✓ Images load and scale properly
- ✓ Navigation works smoothly
- ✓ App remembers state when reopened

Complete Examples

Example 1: Calculator App

/config/packages/pwa.yaml

pwa:
    manifest:
        name: "Quick Calculator"
        short_name: "Calculator"
        description: "Simple calculator for quick calculations"
        display: "browser"
        edge_side_panel:
            preferred_width: 300
        theme_color: "#2196F3"
        background_color: "#ffffff"
        icons:
            - src: "icons/calc-192.png"
              sizes: [192]
            - src: "icons/calc-512.png"
              sizes: [512]

Example 2: Notes App

/config/packages/pwa.yaml

pwa:
    manifest:
        name: "Quick Notes"
        short_name: "Notes"
        description: "Take quick notes while browsing"
        display: "browser"
        edge_side_panel:
            preferred_width: 450
        theme_color: "#FFC107"
        icons:
            - src: "icons/notes-192.png"
              sizes: [192]

Example 3: Music Player

/config/packages/pwa.yaml

pwa:
    manifest:
        name: "Music Player"
        short_name: "Music"
        description: "Listen to music while browsing"
        display: "browser"
        edge_side_panel:
            preferred_width: 350
        theme_color: "#E91E63"
        icons:
            - src: "icons/music-192.png"
              sizes: [192]

Example 4: Translation Tool

/config/packages/pwa.yaml

pwa:
    manifest:
        name: "Quick Translate"
        short_name: "Translate"
        description: "Translate text while browsing"
        display: "browser"
        edge_side_panel:
            preferred_width: 420
        theme_color: "#4CAF50"
        icons:
            - src: "icons/translate-192.png"
              sizes: [192]

Common Issues

App Not Appearing in Sidebar

Problem: PWA doesn't show up in Edge sidebar app list

Solutions:

Ensure you're using Microsoft Edge (not Chrome/other browsers)
Verify PWA is installed (edge://apps)
Check that edge_side_panel is configured in manifest
Restart Edge browser
Check Edge version supports sidebar PWAs

Width Not Respected

Problem: Sidebar width doesn't match preferred_width

Reasons:

Edge enforces minimum width (~200px)
Edge may constrain width based on screen size
User can manually resize sidebar
preferred_width is a suggestion, not a requirement

Solution: Design app to work across range of widths (200-600px)

Content Overflows

Problem: Content extends beyond sidebar viewport

Solutions:

/* Prevent horizontal overflow */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
}

.container {
    max-width: 100%;
    padding: 10px;
}

img {
    max-width: 100%;
    height: auto;
}

App Opens in New Window

Problem: Clicking links opens new windows instead of navigating in sidebar

Solutions:

<!-- Use relative links -->
<a href="/page">Link</a>

<!-- Or use JavaScript navigation -->
<a href="#" onclick="navigate('/page'); return false;">Link</a>

function navigate(url) {
    window.location.href = url;
    // Stays in sidebar
}

Debugging

Check Manifest in DevTools

1. Open your PWA in Edge
2. Press F12 (DevTools)
3. Go to Application tab
4. Click "Manifest" in sidebar
5. Look for "edge_side_panel" section
6. Verify preferred_width value

Console Logging

// Log viewport information
console.log('Viewport width:', window.innerWidth);
console.log('Viewport height:', window.innerHeight);
console.log('Is sidebar mode:', window.innerWidth < 600);

// Monitor resize events
window.addEventListener('resize', () => {
    console.log('Viewport resized to:', window.innerWidth, 'x', window.innerHeight);
});

Test Across Widths

// Simulate different widths (in DevTools)
const widths = [200, 300, 400, 500, 600];

widths.forEach(width => {
    // Set viewport width in DevTools
    console.log(`Testing at ${width}px width`);
    // Manually check layout at each width
});

Best Practices Summary

Set appropriate width: 300-500px for most apps
Use display: "browser": For sidebar-only apps
Design responsive: Support 200-600px widths
Avoid horizontal scrolling: Stack elements vertically
Test in actual Edge sidebar: Don't rely on DevTools alone
Provide fallback: App should work in other browsers too
Optimize text: Ensure readability in narrow space
Use icons: Save space with icon-based navigation
Implement collapsible sections: Maximize vertical space
Remember state: Persist user data across sessions

Display Mode - App display modes
Orientation - Screen orientation
Icons - App icons configuration

Resources

Microsoft Edge Sidebar: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar
Edge PWA Documentation: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/
Edge DevTools: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/

Last updated 1 month ago

Was this helpful?

Good night

Overview

Use Cases

Configuration

Basic Configuration

Specify Preferred Width

Display Mode Considerations

Complete Example

Width Recommendations by Application Type

Calculator / Utilities

Note-Taking App

Chat / Messaging

Documentation Viewer

Music Player

Translation Tool

Browser Support

Responsive Design

CSS Media Queries

JavaScript Detection

User Experience Best Practices

1. Design for Narrow Viewports

2. Minimize Horizontal Elements

3. Use Collapsible Sections

4. Optimize Text Readability

5. Provide Clear Actions

Testing in Edge

1. Enable Sidebar Testing

2. Install PWA to Sidebar

3. Test Width Adjustment

4. Test Functionality

Complete Examples

Example 1: Calculator App

Example 2: Notes App

Example 3: Music Player

Example 4: Translation Tool

Common Issues

App Not Appearing in Sidebar

Width Not Respected

Content Overflows

App Opens in New Window

Debugging

Check Manifest in DevTools

Console Logging

Test Across Widths

Best Practices Summary

Related Documentation

Resources