Angular + Firebase 托管：如何在網站根目錄中使用 static js 文件？

Question

我正在使用 Angular 和 Firebase 制作 PWA。 使用 StackBlitz 進行開發。

當用戶在瀏覽器中打開我的應用程序時，我想讓“添加到主屏幕”Chrome 標准建議起作用，但我無法從我的代碼中正確調用“服務工作者”JS ...

我在項目的 /src 文件夾中創建了 sw.js。 我已將其添加到 .angular-cli.json 和 .angular.json 中的“腳本”和“資產”部分。 在 StackBlitz 中一切正常！

但是，當我將項目部署到 Firebase（使用 Stackblitz 內置功能）時，沒有任何效果......似乎服務器在預期的目錄（/src/sw.js）中看不到文件......有人遇到同樣的問題嗎？

Answer 1

我認為沒有辦法解決它，我很確定問題出在 stackblitz 服務器上。 但幸運的是 firebase 工程師制作了一個簡單的節點腳本來替換單個文件。 它對我有用。 如鏈接所述，只需安裝 git 和節點，然后在命令提示符下運行以下命令：git

1. git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase -hosting-deploy-file
2. cd firebase-hosting-deploy-file
3. npm安裝
4. 然后將您的 javascript 文件添加到它在 stackblitz 中的同一文件樹中，對我來說它在 src/assets/scripts/alert.js 中，所以我創建了一個帶有腳本文件夾的資產文件夾，其中包含我的 js 文件。 在 firebase-hosting-deploy-file 目錄中執行所有這些操作。
5. 在提示符下運行：“node deployFile.js [commit]”，對我來說，我的文件結構是“node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit”

附加信息：

我嘗試復制您的問題，如果鏈接有效，請告訴我。 https://stackblitz.com/edit/angular-epvm8w 。 基本上就在 index.html 中。 js 文件只有 alert("alert"); 在里面。 它像你說的那樣工作，但部署時我認為 stackblitz 服務器正在用 html 替換內容。 我認為這是因為在源代碼下的 chrome 開發人員面板中，js 文件與來自 stackblitz 的 github 的索引模板具有相同的 html。 讓我覺得這只是一個錯誤。 css 文件也發生了同樣的事情。