Blazor 客户端 UI 更新未反映

Question

我正在使用 Nginx 作为代理开发在 Ubuntu 中托管的 Blazor WebAssembly 应用程序。但是，当我发布应用程序并将其上传到服务器时，我所做的任何 UI 更改都不会反映在客户端上。该应用程序是一个 PWA。

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

服务-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);
}

/* updated 2020-12-22 11:19 */

我尝试了以下方法来获取要在浏览器中更新的更改：

删除了服务器上所有已发布的文件，上传了新文件，并重新启动了服务器
重启网站服务
为服务添加了一个时间戳-worker.published.js 每次我上传网站的新版本时。
使用清除存储功能删除了应用程序缓存并确保select所有复选框。

不确定如何让网站在发布后刷新我的更改。非常感谢任何帮助。

Answer 1

经过多次挫折后，发现 _framework 文件夹中的文件也必须更新，这些文件也是由 Visual Studio 中的发布功能生成的。我希望这可以帮助人们避免漫长而令人沮丧的一天。

Blazor 客户端 UI 更新未反映

Blazor client side UI updates are not reflected

blazor

blazor-server-side

blazor-client-side