Blazor WASM PWA не может изменить значок, нельзя изменить имя

Я борюсь со случаем, когда я хорошо исследовал, как это сделать. Это работает для всех, но не для меня !!

Среда:

  • Microsoft Windows 10 Профессиональная
  • Visual Studio Community Edition 2019

Итак, я создал проект и с самого начала выбрал Progressive Web Application (PWA), чтобы все, что мне нужно, было автоматически сгенерировано. Также размещено приложение ASP.NET Core.

Стартовым проектом является Rihal.Server в автономном режиме (не IIS или Docker).

Когда я запускаю приложение, я получаю запрос по умолчанию в Chrome для установки приложения. Когда я нажимаю значок +, я получаю значок Blazor по умолчанию и имя приложения Rihal. Все идет нормально. Когда я меняю значок и имя, я все равно получаю значения по умолчанию! введите описание изображения здесь

  1. Я пробовал очищать и перестраивать все проекты один за другим, без ошибок.
  2. Я пробовал перезапустить Visual Studio.
  3. Я пробовал изменить другие вещи в манифесте, например цвет фона, чтобы увидеть какие-либо изменения, ничего не меняется.
  4. Я проверил действие сборки (содержимое). По умолчанию для копирования в выходной каталог установлено значение (Не копировать), изменение на (Всегда копировать) не имеет никакого эффекта.

Это похоже на то, что манифест полностью игнорируется.

Я разработал другие части этого приложения, а затем решил изменить значок и имя:

  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>

person Waleed Al Harthi    schedule 02.07.2020    source источник
comment
Вы пытались удалить PWA из своей ОС / браузера и установить его снова после изменения манифеста?   -  person Mihaimyh    schedule 02.07.2020
comment
Привет, да, я пробовал; на Chrome он обычно не позволяет установить, пока вы не удалите тот, который у вас есть. Я полностью закрыл хром и снова открыл его. Теперь значок обновлен, но имя не изменилось! Это меня беспокоит.   -  person Waleed Al Harthi    schedule 02.07.2020
comment
Значок обновлен в Chrome в Windows, но приложение Android по-прежнему показывает старый значок! Имя тоже не обновлялось.   -  person Waleed Al Harthi    schedule 02.07.2020


Ответы (3)


Откройте окно отладки браузеров. Chrome или новый Edge. Пока он открыт, щелкните правой кнопкой мыши кнопку обновления на своей странице и выберите = ›Очистить кеш и выполнить полную перезагрузку.

Я обнаружил, что вы можете сделать это в файле csproj клиентов. Форсирование и обновление в сервис-воркере.


<Target Name="PublishServiceWorker" AfterTargets="CopyFilesToPublishDirectory">
        <WriteLinesToFile File="$(PublishDir)wwwroot\service-worker.js" Lines="/* $([System.Guid]::NewGuid()) */" />
</Target>
person Brian Parker    schedule 02.07.2020
comment
Спасибо. Это решило проблему для меня. Я буду следить за тем, что решает проблему для моих пользователей, не зная об этом. - person Waleed Al Harthi; 03.07.2020
comment
Вы не должны этого делать. Эти элементы должны быть статичными. Вот почему браузеры их не обновляют. Это должно происходить с разработчиками только во время начальной настройки. - person Brian Parker; 03.07.2020
comment
Спасибо. Я пропустил вторую половину ответа! - person Waleed Al Harthi; 16.11.2020

Итак, я столкнулся с этой проблемой в ноябре 2020 года (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);
    }
person Chad Williamson    schedule 14.11.2020
comment
Это кажется правильным решением. Я еще не тестировал, надеюсь, что кто-то прокомментирует. Выбран в качестве ответа до тех пор, пока его вина не будет доказана. - person Waleed Al Harthi; 16.11.2020

Я думаю, что вам нужно увеличивать версию кеша каждый раз, когда вы хотите, чтобы клиент загрузил последние файлы.

В навигаторе зарегистрируйте файл JavaScript, где const CACHE_VERSION = 1.01. Вы можете увеличивать значение всякий раз, когда хотите, чтобы клиент обновил

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

person Frankofoedu    schedule 02.07.2020
comment
Кеш - интересная тема. Я где-то читал, что он должен обновляться автоматически. Это комплексный подход! Должен быть способ попроще. - person Waleed Al Harthi; 02.07.2020