ASP.NET核心三角SPA PWA [英] ASP.NET Core 3 - Angular SPA PWA

问题描述

我正试图在ASP.NET Core 3中创建一个ANGLE SPA。因此，我启动了一个新项目，使用了ANGLE模板，并将所有包更新到了ANGLE的8.2.9版本。到目前为止一切顺利，有一个很好的CI/CD管道连接到Azure，网站运行得很棒。

然而，现在我正在尝试将PWA功能添加到应用程序中。因此，我根据ANGLING的文档添加了PWA(ng Add@Angel/pwa)，一切看起来都很好。 我得到了一个很好的清单文件，并且所有预期的更改都会如期应用。但是，当我运行该程序并开始审核时，使PWA可安装的要求失败。

我收到的错误： -此页面由服务工作人员控制，但由于未获取清单，因此找不到任何start_url。 -失败：未获取清单。

看起来确实提取了清单文件，但MIME类型(Text/html)有问题。欢迎在此提出任何建议...

推荐答案

找到了！ 事实上，ASP.NET Core使用错误的内容类型来提供清单文件才是问题所在。要解决此问题，请移动启动类的配置方法并创建一个新的FileExtensionContent TypeProvider。然后，还要为扩展名为WebMANIFEST的文件添加映射，并告诉它将这些文件作为应用程序/清单+json文件提供服务。

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".webmanifest"] = "application/manifest+json";

然后向下滚动，如果您(像我一样)选择了角度项目模板，您将找到这段代码：

app.UseStaticFiles();
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

现在，对于UseStaticFiles和UseSpaStaticFiles，您需要添加文件扩展名内容类型提供程序，以便为文件提供正确的内容类型，如下所示：

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles(new StaticFileOptions
    {
        ContentTypeProvider = provider
    });
}

差不多就是这样..。您现在可以开始了！

这篇关于ASP.NET核心三角SPA PWA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！