Blazor Web Assembly - Install Button not visible

Question

I've created a new Blazor Web Assembly App. I've checked the 'PWA' checkbox before creating the project. When i now run the project the button to install the PWA is not visible, so i can't install it or rather run it offline. Do i have to activate or change something to enable or show the button?

Some browsers only show the button after the user has interacted with the site - try clicking a few things and reloading, but don't be mistaken - being installable does not equal "run it offline" - you need to specifically configure your application to work offline. — Mister Magoo, Jun 07 '22 at 08:58
With the manifest being empty, it is not surprising that the installation option is not available. There should definitely be content shown there... I'll update my answer with the default content of the file. Which Visual Studio version are you using? — Tobias Breuer, Jun 07 '22 at 09:07
In your screenshot I see that your app does not have an App-ID: compare to my screenshot where it says it added a "computed app id". You can try to add an ID explicitly into your manifest.json. I think without an ID it can't install: Check https://w3c.github.io/manifest/#id-member — Tobias Breuer, Jun 07 '22 at 09:25
I checked it, but it still doesent work. Meanwhile, I tried it with VS2019 and it worked there. — MaxB, Jun 07 '22 at 09:54
Okay, this is surprising. Do you use latest version (17.2.3) of VS 2022 ? As this is the version I am using at the moment when testing it. — Tobias Breuer, Jun 07 '22 at 10:57
Just updatet from i think 16.1 to 17.2.3. Now its working, thank you very much for your help and time. — MaxB, Jun 07 '22 at 11:11

Tobias Breuer · Answer 1 · 2022-06-08T05:12:47.147

No, there is nothing special to be done. Just checked it again locally, created a new App with the PWA Check-Box activated as shown below:

As a result, when starting the app with F5 (debug) in Microsoft Edge browser, the installation icon is shown in the address bar as expected:

Which browser did you use? Did you make any adaptations to the application / configuration after you created the app? Try with a new project with the configuration as listed above and check the results.

Make sure also that your manifest.json file is properly configured and shown in the Developer Tools of your browser:

Update to inclue mainfest default content

The following is the default content of the manifest.json file when creating a fresh project:

{
  "name": "BlazorAppPWA",
  "short_name": "BlazorAppPWA",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

Update 2

Your PWA needs to have an App-ID in order to be installable. In my case it was auto-generated (see Identity section in the manifest info screen)

You can however specify it explicitly as documented at https://w3c.github.io/manifest/#id-member

Update 3

Seems like there was an issue in earlier versions of Visual Studio 2022. Updating to latest version 17.2.3 solves the issue as stated in the comments above.

Thanks for your answer. I've created a new Blazor Web Assembly App like you said. I also checked the manifest.json file, it looks just like yours. — MaxB, Jun 07 '22 at 09:03
Thanks. Ive added a new screenshot in my question. But the button to install it is still not shown. — MaxB, Jun 07 '22 at 09:14
Can you please also check the status of the service worker in the devtools? According to https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs it is required to be running to make sure PWA can be installed. (Event though it is mozilla it is general for all browsers) — Tobias Breuer, Jun 07 '22 at 09:20

Blazor Web Assembly - Install Button not visible

1 Answers1