Question

问题

如果我在没有服务工作者的情况下加载页面，一切都很好，但是当我引入服务工作者时，该页面不会第一次加载（在线时），因为它缺少我的捆绑文件，这会导致CSS和脚本问题。如果刷新页面，则一切正常，因为服务工作者会在提取请求时缓存它们。

设置

说我有一个捆绑包，例如

bundles.Add(new ScriptBundle("~/js/main").Include(
    "~/Scripts/jquery-3.3.1.min.js",
    "~/Scripts/moment.min.js",
    "~/node_modules/sweetalert/dist/sweetalert.min.js"));

和我的根目录中的服务工作者，例如

var cacheName = 'v1:static';

self.addEventListener('install', function (e) {
e.waitUntil(
    caches.open(cacheName).then(function (cache) {
        return cache.addAll([
            '/images/keypad/number 0.png',
            '/',
            '/Menu/MainMenu',
            '**TODO: Cache Bundles**'
        ]).then(function () {
            self.skipWaiting();
        });
    })
);
});


self.addEventListener('fetch', function (event) {
    if (event.request.method != "POST") {
        event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                return response;
            }

            fetch(event.request).then(function (fetchResponse) {
                caches.open(cacheName).then(function (cache) {
                    cache.put(event.request, fetchResponse.clone());
                });

                return fetchResponse;
            });
        })
    );
}
});

问题

我如何在Debug和Release模式下将捆绑的文件缓存在我的服务工作者中，因为debug将它们显示为单独的文件，而Release将它们组合在一起，而我不知道捆绑的URL？

其他想法

您不能在此文件中放置Razor @ ...，因为它不是cshtml。

我不想在两个地方都列出每个文件并同时维护两个文件。

我曾考虑过使用服务器端处理程序来生成我的service-worker.js文件，但我想知道是否存在一种真正的干净方法来做到这一点而不发疯。

谢谢！

Answer 1

@ Scripts.Url（“〜/ bundles / yourBundleName”）使用此方法从那里获取URL的绝对URL，您可以将捆绑包名称映射到一个变量中，并在service worker安装事件中使用该变量，以便资产会在加载本身时进行缓存。

注意： 我曾经做过的一个错误另外请不要将serviceworker.js文件直接引用到index.html中，这将从sw-registration.js文件注册时加载

如何使用MVC捆绑+服务工作者缓存

1 个答案: