ASP.NET Core 3 - Angular SPA PWA

Question

我正在尝试在 ASP.NET Core 3 中创建一个 Angular SPA。所以我开始了一个新项目，使用了 Angular 模板并将所有包更新到 Angular 8.2.9 版。到目前为止一切顺利，获得了一个很好的到 Azure 的 CI/CD 管道，网站运行起来很吸引人。

但是，现在我正在尝试向应用程序添加 PWA 功能。所以我根据 angular (ng add @angular/pwa) 的文档添加了 PWA，一切似乎都很好。有一个不错的 manifest.webmanifest 文件，所有预期的更改都按预期应用。但是，当我运行该事物并开始审核时，使 PWA 可安装的要求失败了。

我得到的错误： - 此页面由 Service Worker 控制，但是没有找到 start_url，因为没有获取清单。- 失败：未获取清单。

看起来清单文件确实被提取了，但是 MIME 类型有问题（text/html）。欢迎在这里提出任何建议...

Answer 1

找到了！事实上，ASP.NET Core 使用错误的内容类型提供 manifest.webmanifest 文件实际上是问题所在。要解决此问题，请移动启动类的 configure 方法并创建一个新的 FileExtensionContentTypeProvider。然后还为具有 webmanifest 扩展名的文件添加映射，并告诉它以 application/manifest+json 文件的形式提供这些文件。

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

然后向下滚动，如果你（像我一样）选择了 Angular 项目模板，你会发现这段代码：

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

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

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

差不多就是这样……你现在可以开始了！