[英]Blazor WASM PWA Cannot Change Icon, Cannot Change Name
I'm struggling with a case where I've done good research on how to it.我正在努力解决一个我已经对如何做到这一点进行了很好的研究的案例。 It works for everyone but not for me!!它适用于所有人,但不适用于我!
Environment:环境:
So I've created a project and selected Progressive Web Application (PWA) from the get-go to have everything I need auto-generated.因此,我创建了一个项目并从一开始就选择了渐进式 Web 应用程序 (PWA) 来自动生成我需要的一切。 Also made the app ASP.NET Core hosted.还托管了应用程序 ASP.NET Core。
The startup project is Rihal.Server in standalone mode (not IIS or Docker).启动项目是独立模式的 Rihal.Server(不是 IIS 或 Docker)。
When I launch the application I get the default prompt in Chrome to install app.当我启动应用程序时,我会在 Chrome 中收到默认提示以安装应用程序。 When I click the "+" icon I get the default Blazor icon and the app's name "Rihal".当我单击“+”图标时,我会看到默认的 Blazor 图标和应用程序名称“Rihal”。 So far so good.到目前为止,一切都很好。 When I change the icon and name, I still keep getting the defaults!当我更改图标和名称时,我仍然保持默认设置!
It's like the manifest is completely ignored.就像清单被完全忽略一样。
I've developed other parts of this app and then came around to change the icon and name:我已经开发了这个应用程序的其他部分,然后来改变图标和名称:
Replaced the default icon (same icon used for 192 at a smaller resolution)替换了默认图标(与 192 相同的图标,分辨率更小)
Updated my manifest.json for the 192 size and name/short name: (I've also tried adding multiple sizes).更新了我的 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" } ] }
Other files if relevant:其他相关文件:
Rihal.Client service-worker.js 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 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 file 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>
Open the browsers debug window.打开浏览器调试window。 Chrome or the new Edge. Chrome 或新的 Edge。 While it is open right click the refresh button on your page select => Empty cache and hard reload.当它打开时,右键单击页面上的刷新按钮 select => 清空缓存并硬重新加载。
I found you can do this in the clients csproj file.我发现您可以在客户端 csproj 文件中执行此操作。 Forcing and update in the service worker.在 service worker 中强制和更新。
<Target Name="PublishServiceWorker" AfterTargets="CopyFilesToPublishDirectory">
<WriteLinesToFile File="$(PublishDir)wwwroot\service-worker.js" Lines="/* $([System.Guid]::NewGuid()) */" />
</Target>
So I was running into this problem in November of 2020 (VS2019 with all updates) building a new Blazor WASM PWA.所以我在 2020 年 11 月遇到了这个问题(VS2019 有所有更新)构建一个新的 Blazor WASM PWA。 I could not get the site or installed PWA to show new content reliably.我无法获取该站点或安装 PWA 来可靠地显示新内容。 I wrote a small app to modify the offline cache version in the service-worker.js.我写了一个小应用来修改service-worker.js中的离线缓存版本。 I call this app in my post build events for client and server projects.我在客户端和服务器项目的后期构建事件中调用了这个应用程序。 So when I publish, my cache version always gets updated and the PWAs update as I would expect.因此,当我发布时,我的缓存版本总是会更新,并且 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);
}
I think you have to increment the version of the cache anytime you want the client to download the latest files.我认为您必须在希望客户端下载最新文件的任何时候增加缓存的版本。
In your navigator, register a JavaScript file where const CACHE_VERSION = 1.01
.在您的导航器中,注册一个 JavaScript 文件,其中const CACHE_VERSION = 1.01
。 You can increment the value whenever you want the client to updatee您可以在希望客户端更新时增加该值
https://blog.jeremylikness.com/blog/implement-progressive-web-app-hugo/ https://blog.jeremylikness.com/blog/implement-progressive-web-app-hugo/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.