2

我正在努力解决一个我已经对如何做到这一点进行了很好的研究的案例。它适用于所有人,但不适用于我!

环境:

  • 微软视窗 10 专业版
  • Visual Studio 社区版 2019

因此,我创建了一个项目并从一开始就选择了渐进式 Web 应用程序 (PWA) 来自动生成我需要的一切。还托管了应用程序 ASP.NET Core。

启动项目是独立模式下的 Rihal.Server(不是 IIS 或 Docker)。

当我启动应用程序时,我会在 Chrome 中收到默认提示以安装应用程序。当我单击“+”图标时,我会看到默认的 Blazor 图标和应用程序的名称“Rihal”。到现在为止还挺好。当我更改图标和名称时,我仍然保持默认设置! 在此处输入图像描述

  1. 我已经尝试一一清理和重建所有项目,没有错误。
  2. 我试过重新启动 Visual Studio。
  3. 我尝试更改清单中的其他内容,例如背景颜色以查看任何更改,没有任何更改。
  4. 我已经检查了构建操作(内容)。默认复制到输出目录是(不复制),更改为(始终复制)无效。

就像清单被完全忽略一样。

我已经开发了这个应用程序的其他部分,然后来改变图标和名称:

  1. 替换了默认图标(与 192 相同的图标,分辨率更小) 在此处输入图像描述

  2. 为 192 大小和名称/短名称更新了我的 manifest.json:(我也尝试添加多个大小)。

{
  "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>
4

3 回答 3

4

打开浏览器调试窗口。Chrome 或新的 Edge。当它打开时,右键单击页面上的刷新按钮,选择 => Empty cache and hard reload。

我发现您可以在客户端 csproj 文件中执行此操作。在 service worker 中强制和更新。


<Target Name="PublishServiceWorker" AfterTargets="CopyFilesToPublishDirectory">
        <WriteLinesToFile File="$(PublishDir)wwwroot\service-worker.js" Lines="/* $([System.Guid]::NewGuid()) */" />
</Target>
于 2020-07-02T12:17:33.337 回答
1

因此,我在 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);
    }
于 2020-11-14T23:01:41.970 回答
0

我认为您必须在希望客户端下载最新文件的任何时候增加缓存的版本。

在您的导航器中,注册一个 JavaScript 文件,其中const CACHE_VERSION = 1.01. 您可以在希望客户端更新时增加该值

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

于 2020-07-02T11:16:42.730 回答