Blazor WASM PWA 無法更改圖標，無法更改名稱

Question

我正在努力解決一個我已經對如何做到這一點進行了很好的研究的案例。 它適用於所有人，但不適用於我！

環境：

• 微軟 Windows 10 Pro
• Visual Studio 社區版 2019

因此，我創建了一個項目並從一開始就選擇了漸進式 Web 應用程序 (PWA) 來自動生成我需要的一切。 還托管了應用程序 ASP.NET Core。

啟動項目是獨立模式的 Rihal.Server（不是 IIS 或 Docker）。

當我啟動應用程序時，我會在 Chrome 中收到默認提示以安裝應用程序。 當我單擊“+”圖標時，我會看到默認的 Blazor 圖標和應用程序名稱“Rihal”。 到目前為止，一切都很好。 當我更改圖標和名稱時，我仍然保持默認設置！

1. 我已經嘗試一一清理和重建所有項目，沒有錯誤。
2. 我試過重新啟動 Visual Studio。
3. 我嘗試更改清單中的其他內容，例如背景顏色以查看任何更改，沒有任何更改。
4. 我已經檢查了構建操作（內容）。 默認Copy to Output目錄為（Do Not Copy），更改為（Copy Always）無效。

就像清單被完全忽略一樣。

我已經開發了這個應用程序的其他部分，然后來改變圖標和名稱：

1. 替換了默認圖標（與 192 相同的圖標，分辨率更小）

2. 更新了我的 manifest.json 的 192 尺寸和名稱/短名稱：（我也嘗試添加多個尺寸）。

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

其他相關文件：

Rihal.Client service-worker.js

 // 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', () => { });

Rihal.Client service-worker.published.js

 // 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 => event;waitUntil(onInstall(event))). self,addEventListener('activate'. event => event;waitUntil(onActivate(event))). self,addEventListener('fetch'. event => 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 => offlineAssetsInclude.some(pattern => pattern.test(asset.url))).filter(asset =>.offlineAssetsExclude.some(pattern => pattern.test(asset.url))),map(asset => new Request(asset:url. { integrity; asset.hash })). await caches.open(cacheName);then(cache => 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 => key.startsWith(cacheNamePrefix) && key;== cacheName);map(key => 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); }

Rihal.Client csproj 文件

<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netstandard2.1</TargetFramework> <RazorLangVersion>3.0</RazorLangVersion> <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest> </PropertyGroup> <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'"> <DebugType>embedded</DebugType> <DebugSymbols>true</DebugSymbols> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview3.20168.3" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" /> <PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="3.2.0" /> <PackageReference Include="Microsoft.Extensions.Http" Version="3.1.5" /> <PackageReference Include="System.Net.Http.Json" Version="3.2.1" /> </ItemGroup> <ItemGroup> <ProjectReference Include="..\Shared\Rihal.Shared.csproj" /> </ItemGroup> <ItemGroup> <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" /> </ItemGroup> </Project>

Answer 1

打開瀏覽器調試window。 Chrome 或新的 Edge。 當它打開時，右鍵單擊頁面上的刷新按鈕 select => 清空緩存並硬重新加載。

我發現您可以在客戶端 csproj 文件中執行此操作。 在 service worker 中強制和更新。

<Target Name="PublishServiceWorker" AfterTargets="CopyFilesToPublishDirectory">
        <WriteLinesToFile File="$(PublishDir)wwwroot\service-worker.js" Lines="/* $([System.Guid]::NewGuid()) */" />
</Target>

Answer 2

所以我在 2020 年 11 月遇到了這個問題（VS2019 有所有更新）構建一個新的 Blazor WASM PWA。 我無法獲取該站點或安裝 PWA 來可靠地顯示新內容。 我寫了一個小應用來修改service-worker.js中的離線緩存版本。 我在客戶端和服務器項目的后期構建事件中調用了這個應用程序。 因此，當我發布時，我的緩存版本總是會更新，並且 PWA 也會按照我的預期進行更新。

static void Main(string[] args)
    {
        string startPoint = "const cacheName =";
        string endPoint = ";";
        string fileNameToEdit = args[0];
        string newContents = string.Empty;

        using(var sr = new StreamReader(fileNameToEdit))
        {
            newContents = sr.ReadToEnd();
            int start = newContents.IndexOf("const cacheName = ");
            int end = newContents.IndexOf(";", start) + 1;
            string stringToReplace = newContents.Substring(start, end - start);

            string newString = "const cacheName = 'cache-version-" + $"{DateTime.Now.Ticks}" + "';";

            newContents = newContents.Replace(stringToReplace, newString);

            sr.Close();
        }

        File.WriteAllText(fileNameToEdit, newContents);

        Environment.Exit(0);
    }

Answer 3

我認為您必須在希望客戶端下載最新文件的任何時候增加緩存的版本。

在您的導航器中，注冊一個 JavaScript 文件，其中const CACHE_VERSION = 1.01 。 您可以在希望客戶端更新時增加該值

https://blog.jeremylikness.com/blog/implement-progressive-web-app-hugo/