如何使用Fetch API在部分视图MVC中包含CSS文件和脚本文件

Question

我正在努力在我的Asp.net MVC Web应用程序中添加服务工作者。使用@Layout.cshtml中的@ Style.Render和@ Scripts.Render包含CSS文件和JS文件。如何使用fetch API包含这些文件。我想借助过滤掉获取请求来缓存我的js文件和CSS文件。我尝试下面的代码。它返回成功消息。但文件不包括在内。有什么建议吗？

<script type="text/javascript">
    fetch('/Content/Site.css')
        .then(function (response) {
            console.log('script loaded successfully');
        })
        .catch(function (ex) {
            console.log('failed', ex);
        });
</script>

Answer 1

我没有确切的答案，但更多的建议。

MVC部分视图在概念上类似于具有app shell（思考母版页），可能是布局，然后是页面内容，然后可以具有子组件（如部分视图）。

现在，MVC在客户端上呈现，因此呈现的页面将被发送到网络中，并且应该没有必要在服务工作者中组合页面....

但是，对于某些应用程序，我在服务工作者中呈现页面。我发布了一个例子，如果这个技术在过去的春天为费城代码营安排我做的PWA，https://love2dev.com/blog/phillycc-service-worker/。

基本上我预缓存了appshell，布局和其他核心标记组件。在此示例中，我通过拦截HTML请求来获取JSON。如果我有缓存的HTML响应我返回它，如果不是我获取JSON。当JSON响应时，我使用它来渲染（我使用胡子）标记与页面的shell，布局等。最终我渲染标记并将其缓存为响应。

我还可以返回appShell，appShell + Layout等（根据需要）然后在客户端线程中渲染，这有点像SPA，只是没有gnarly hashchange处理。这也很容易做到，target.innerHTML = template.render（...）。