ASP.NET 核心 3 - Angular SPA PWA

Question

I'm trying to create an Angular SPA in ASP.NET Core 3. So I started a new project, used the Angular template and updated all packages to version 8.2.9 of Angular. 到目前為止一切順利，獲得了一條通往 Azure 的不錯的 CI/CD 管道，該網站運行起來就像一個魅力。

但是，現在我正在嘗試將 PWA 功能添加到應用程序中。 所以我根據 angular (ng add @angular/pwa) 的文檔添加了 PWA，一切看起來都很好。 得到了一個不錯的 manifest.webmanifest 文件，所有預期的更改都按預期應用。 但是，當我運行這個東西並開始審計時，使 PWA 可安裝的要求失敗了。

我得到的錯誤： - 此頁面由服務人員控制，但是沒有找到 start_url，因為沒有獲取清單。 - 失敗：未獲取清單。

看起來清單文件確實被提取了，但是 mime 類型（文本/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
    });
}

差不多就是這樣......你現在可以開始了！