# Blazor Server 變成 PWA ###### tags: `Blazor Server` ## 結果展示 ![](https://hackmd.io/_uploads/HknuAeJto.gif) ## 參考文件 * [How to make progressive web apps with Blazor Server Side?](https://stackoverflow.com/questions/64387591/how-to-make-progressive-web-apps-with-blazor-server-side) * [manifest.json介紹](https://medium.com/front-end-augustus-study-notes/pwa-minifest-6943b5fc65a9)：包括icon設定都在manifest.json裡 ## 流程 ### 1. 開啟 Blazor Server 專案 > 無須任何特別設置動作，開啟需要轉成 PWA的專案即可 ### 2. 建置 Blazor WebAssembly 專案 > 複製檔案至Blazor Server 專案，用完即可刪除 :star:注意事項：勾選「漸進式Web應用程式」 ![](https://hackmd.io/_uploads/ryimdAC_s.png) ### 3. 複製檔案 > 從 Blazor WebAssembly 專案中把以下檔案複製 * icon-192.png：此圖檔可事後異動成自訂icon及檔名，這邊先用預設示範 * icon-512.png：此圖檔可事後異動成自訂icon及檔名，這邊先用預設示範 * [manifest.json](https://medium.com/front-end-augustus-study-notes/pwa-minifest-6943b5fc65a9)：應用程式設定檔 * service-worker.js * service-worker.published.js ![](https://hackmd.io/_uploads/HyH-EyJYi.png) ### 4. 貼上複製的檔案 > 把3的複製檔案放到Blazor Server 專案的wwwroot資料夾 ![](https://hackmd.io/_uploads/S1xsFkJKs.png) ### 5. _Layout.cshtml設置 把以下兩行設置放到_Layout.cshtml中 ```htmlembedded! <link href="manifest.json" rel="manifest" /> ``` ```htmlembedded! <script>navigator.serviceWorker.register('service-worker.js');</script> ``` ![](https://hackmd.io/_uploads/rk4yok1Fs.png)