Blazor Server 變成 PWA

tags: `Blazor Server`

結果展示

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

參考文件

How to make progressive web apps with Blazor Server Side?
manifest.json介紹：包括icon設定都在manifest.json裡

流程

1. 開啟 Blazor Server 專案

無須任何特別設置動作，開啟需要轉成 PWA的專案即可

2. 建置 Blazor WebAssembly 專案

複製檔案至Blazor Server 專案，用完即可刪除

:star:注意事項：勾選「漸進式Web應用程式」

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

3. 複製檔案

從 Blazor WebAssembly 專案中把以下檔案複製

icon-192.png：此圖檔可事後異動成自訂icon及檔名，這邊先用預設示範
icon-512.png：此圖檔可事後異動成自訂icon及檔名，這邊先用預設示範
manifest.json：應用程式設定檔
service-worker.js
service-worker.published.js

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

4. 貼上複製的檔案

把3的複製檔案放到Blazor Server 專案的wwwroot資料夾

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

5. _Layout.cshtml設置

把以下兩行設置放到_Layout.cshtml中

<link href="manifest.json" rel="manifest" />

<script>navigator.serviceWorker.register('service-worker.js');</script>

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted