0

How to remove address/information bar when opening new windows from a PWA installed via Microsoft Edge on Windows 11

I have a Progressive Web App (PWA) installed via Edge on Windows 11. When I click a button to open a new window from my main application, an address/information bar appears at the top, which I want to remove.

enter image description here

Previously, this bar was not visible, and I know it's possible to hide it. The issue seems to be with Edge's settings, not my application's code.

Specific details:

  • Operating System: Windows 11
  • Browser: Microsoft Edge
  • App Type: PWA installed from Edge
  • Problem: Unwanted address/information bar in new windows
  • Desired Result: No address bar when opening new windows, similar to the main app window

I tried to change the settings window.open(), but the bar still appears, 'i also look at the application permission is nothing worked. Do you have any suggestions on how to configure Edge or the PWA to remove this bar?

I don’t have enough reputation to put a bar screen ...

Journeyman Geek
  • 133,878
Emilie Lalala
  • 1

1 Answers1

0

After several tests, I finally found a solution to add a PWA plugin to my application. Here is what I did:

Steps

  1. Install the PWA plugin for Vite

    npm install -D vite-plugin-pwa

  2. Configure the plugin in the vite.config.js file

    import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { VitePWA } from 'vite-plugin-pwa';

    // https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My app',
        short_name: 'mp',
        start_url: '/',
        display: 'standalone',
        background_color: '#000000',
        theme_color: '#5699ff',
        lang: 'en',
        scope: '/',
      },
    }),
  ],
});

  3. Build the application

    npm run build

    This command generates a manifest file in the dist folder.

  4. Verify the manifest file In the manifest file, verify that display is configured correctly:

    {
  "display": "standalone"
}

  5. Then finally put back the pwa

Sources

Emilie Lalala
  • 1