title: Blazor WASM PWA Cannot Change Icon, Cannot Change Name
body: <p>I'm struggling with a case where I've done good research on how to it. It works for everyone but not for me!!</p>
  <p>Environment:</p>
  <ul>
  <li>Microsoft Windows 10 Pro</li>
  <li>Visual Studio Community Edition 2019</li>
  </ul>
  <p>So I've created a project and selected Progressive Web Application (PWA) from the get-go to have everything I need auto-generated. Also made the app ASP.NET Core hosted.</p>
  <p>The startup project is Rihal.Server in standalone mode (not IIS or Docker).</p>
  <p>When I launch the application I get the default prompt in Chrome to install app. When I click the &quot;+&quot; icon I get the default Blazor icon and the app's name &quot;Rihal&quot;. So far so good. When I change the icon and name, I still keep getting the defaults!
  <a href="https://i.stack.imgur.com/JWenJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JWenJ.png" alt="enter image description here" /></a></p>
  <ol>
  <li>I've tried cleaning and rebuilding all projects one by one, no errors.</li>
  <li>I've tried restarting Visual Studio.</li>
  <li>I've tried changing other things in the manifest like background color to see any change, nothing changes.</li>
  <li>I've checked the Build Action (Content). The default Copy to Output Directory is (Do Not Copy), Changing to (Copy Always) has no effect.</li>
  </ol>
  <p>It's like the manifest is completely ignored.</p>
  <p>I've developed other parts of this app and then came around to change the icon and name:</p>
  <ol>
  <li><p>Replaced the default icon (same icon used for 192 at a smaller resolution)
  <a href="https://i.stack.imgur.com/ODYLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ODYLw.png" alt="enter image description here" /></a></p>
  </li>
  <li><p>Updated my manifest.json for the 192 size and name/short name: (I've also tried adding multiple sizes).</p>
  </li>
  </ol>
  <blockquote>
  <pre><code>{
    &quot;name&quot;: &quot;Rihal Timesheet&quot;,
    &quot;short_name&quot;: &quot;Timesheet&quot;,
    &quot;start_url&quot;: &quot;./&quot;,
    &quot;display&quot;: &quot;standalone&quot;,
    &quot;background_color&quot;: &quot;#ffffff&quot;,
    &quot;theme_color&quot;: &quot;#03173d&quot;,
    &quot;icons&quot;: [
      {
        &quot;src&quot;: &quot;icon-512.png&quot;,
        &quot;type&quot;: &quot;image/png&quot;,
        &quot;sizes&quot;: &quot;512x512&quot;
      },
      {
        &quot;src&quot;: &quot;icon-192.png&quot;,
        &quot;type&quot;: &quot;image/png&quot;,
        &quot;sizes&quot;: &quot;192x192&quot;
      }
    ]
  }
  </code></pre>
  </blockquote>
  <p>Other files if relevant:</p>
  <p>Rihal.Client service-worker.js</p>
  <blockquote>
  <pre><code>// In development, always fetch from the network and do not enable offline support.
  // This is because caching would make development more difficult (changes would not
  // be reflected on the first load after each change).
  self.addEventListener('fetch', () =&gt; { });
  </code></pre>
  </blockquote>
  <p>Rihal.Client service-worker.published.js</p>
  <blockquote>
  <pre><code>// Caution! Be sure you understand the caveats before publishing an application with
  // offline support. See https://aka.ms/blazor-offline-considerations
  
  self.importScripts('./service-worker-assets.js');
  self.addEventListener('install', event =&gt; event.waitUntil(onInstall(event)));
  self.addEventListener('activate', event =&gt; event.waitUntil(onActivate(event)));
  self.addEventListener('fetch', event =&gt; event.respondWith(onFetch(event)));
  
  const cacheNamePrefix = 'offline-cache-';
  const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
  const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/ ];
  const offlineAssetsExclude = [ /^service-worker\.js$/ ];
  
  async function onInstall(event) {
      console.info('Service worker: Install');
  
      // Fetch and cache all matching items from the assets manifest
      const assetsRequests = self.assetsManifest.assets
          .filter(asset =&gt; offlineAssetsInclude.some(pattern =&gt; pattern.test(asset.url)))
          .filter(asset =&gt; !offlineAssetsExclude.some(pattern =&gt; pattern.test(asset.url)))
          .map(asset =&gt; new Request(asset.url, { integrity: asset.hash }));
      await caches.open(cacheName).then(cache =&gt; cache.addAll(assetsRequests));
  }
  
  async function onActivate(event) {
      console.info('Service worker: Activate');
  
      // Delete unused caches
      const cacheKeys = await caches.keys();
      await Promise.all(cacheKeys
          .filter(key =&gt; key.startsWith(cacheNamePrefix) &amp;&amp; key !== cacheName)
          .map(key =&gt; caches.delete(key)));
  }
  
  async function onFetch(event) {
      let cachedResponse = null;
      if (event.request.method === 'GET') {
          // For all navigation requests, try to serve index.html from cache
          // If you need some URLs to be server-rendered, edit the following check to exclude those URLs
          const shouldServeIndexHtml = event.request.mode === 'navigate';
  
          const request = shouldServeIndexHtml ? 'index.html' : event.request;
          const cache = await caches.open(cacheName);
          cachedResponse = await cache.match(request);
      }
  
      return cachedResponse || fetch(event.request);
  }
  </code></pre>
  </blockquote>
  <p>Rihal.Client csproj file</p>
  <blockquote>
  <pre><code>&lt;Project Sdk=&quot;Microsoft.NET.Sdk.Web&quot;&gt;
    &lt;PropertyGroup&gt;
      &lt;TargetFramework&gt;netstandard2.1&lt;/TargetFramework&gt;
      &lt;RazorLangVersion&gt;3.0&lt;/RazorLangVersion&gt;
      &lt;ServiceWorkerAssetsManifest&gt;service-worker-assets.js&lt;/ServiceWorkerAssetsManifest&gt;
    &lt;/PropertyGroup&gt;
    &lt;PropertyGroup Condition=&quot;'$(Configuration)|$(Platform)'=='Debug|AnyCPU'&quot;&gt;
      &lt;DebugType&gt;embedded&lt;/DebugType&gt;
      &lt;DebugSymbols&gt;true&lt;/DebugSymbols&gt;
    &lt;/PropertyGroup&gt;
  
    &lt;ItemGroup&gt;
      &lt;PackageReference Include=&quot;Microsoft.AspNetCore.Blazor.HttpClient&quot; Version=&quot;3.2.0-preview3.20168.3&quot; /&gt;
      &lt;PackageReference Include=&quot;Microsoft.AspNetCore.Components.WebAssembly&quot; Version=&quot;3.2.0&quot; /&gt;
      &lt;PackageReference Include=&quot;Microsoft.AspNetCore.Components.WebAssembly.Build&quot; Version=&quot;3.2.0&quot; PrivateAssets=&quot;all&quot; /&gt;
      &lt;PackageReference Include=&quot;Microsoft.AspNetCore.Components.WebAssembly.DevServer&quot; Version=&quot;3.2.0&quot; PrivateAssets=&quot;all&quot; /&gt;
      &lt;PackageReference Include=&quot;Microsoft.Authentication.WebAssembly.Msal&quot; Version=&quot;3.2.0&quot; /&gt;
      &lt;PackageReference Include=&quot;Microsoft.Extensions.Http&quot; Version=&quot;3.1.5&quot; /&gt;
      &lt;PackageReference Include=&quot;System.Net.Http.Json&quot; Version=&quot;3.2.1&quot; /&gt;
    &lt;/ItemGroup&gt;
  
    &lt;ItemGroup&gt;
      &lt;ProjectReference Include=&quot;..\Shared\Rihal.Shared.csproj&quot; /&gt;
    &lt;/ItemGroup&gt;
  
    &lt;ItemGroup&gt;
      &lt;ServiceWorker Include=&quot;wwwroot\service-worker.js&quot; PublishedContent=&quot;wwwroot\service-worker.published.js&quot; /&gt;
    &lt;/ItemGroup&gt;
  &lt;/Project&gt;
  </code></pre>
  </blockquote>