ASP.NET 核心 3 - Angular SPA PWA

Question

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

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

我遇到的错误： - 此页面由 service worker 控制，但未找到 start_url，因为未获取任何清单。 - 失败：未获取任何清单。

看起来清单文件确实已提取，但 MIME 类型有误 (text/html)。欢迎在这里提出任何建议...

Answer 1

找到了！ ASP.NET Core 为 manifest.webmanifest 文件提供内容类型错误的事实实际上是问题所在。要解决此问题，请移动启动的配置方法 class 并创建一个新的 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
    });
}

差不多就这些了...您现在可以开始了！

ASP.NET 核心 3 - Angular SPA PWA

ASP.NET Core 3 - Angular SPA PWA

progressive-web-apps

asp.net-core

angular

asp.net-core-3.0