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 文件提供了错误的内容类型是问题所在。要解决这个问题，请移动启动类的配置方法并创建一个新的 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
    });
}

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