CODEWITHSUNDEEP
javascriptprogressive-web-appsmicrosoft-edgedesktop
Velidan
Velidan

Reputation: 6004

Is it possible to automatically add PWA on desktop in Edge (Win 10)

I'm working on PWA and I managed to install it via Edge on Win 10. It installs itself as a Windows application and it's available under the Edge APPS section as well, however, the app doesn't appear on my Desktop.

To add it to my Desktop screen after installation I need to do the next steps:

  1. open the Edge's apps settings
  2. go to the manage apps tab
  3. do a right-click on my app to open the app context menu
  4. click the PIN menu
  5. click on the Pin to desktop
  6. confirm it

It's an extremely long and unintuitive way regarding UX how to add the PWA to Desktop and it could be hard to do it for users that aren't familiar with all of these nuances.

In Chrome the PWA shortcut adds automatically to the desktop and I'd like to have this behavior in the case of Edge as well (if possible, for sure).

So my question: Is it possible to add the PWA on the desktop screen by default after the user click on the Install button and confirm the installation?

Thanks for any help or information!

Upvotes: 0

Views: 2003

Answers (1)

armin yahya
armin yahya

Reputation: 1496

you can add an install banner to your app. you didn't mention which library you are using I go with react:

function App() {
  const deferredPrompt = useRef(null);
  const [installBannerVisible, setInstallBannerVisible] = useState(false);

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      deferredPrompt.current = e;
      showInstallPromotion();
    });
  }, []);

  const showInstallPromotion = () => {
    setInstallBannerVisible(true);
  };

  const handleButtonClick = () => {
    deferredPrompt.current.prompt();
    deferredPrompt.current.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt");
      } else {
        console.log("User dismissed the install prompt");
      }
    });
  };

  return (
    <div>
      {installBannerVisible && (
        <button onClick={handleButtonClick}>Install</button>
      )}
    </div>
  );
}

make sure your browser support beforeinstallprompt.

I tested in the latest version of Microsoft Edge.

more info

Upvotes: 1

Related Questions