部署时找不到服务人员（404）：React-Django-Heroku答案

【问题标题】：Service worker not found (404) on deployment: React-Django-Heroku部署时找不到服务人员（404）：React-Django-Heroku
【发布时间】：2020-12-28 06:59:13
【问题描述】：

我正在尝试让我的第一个 Service Worker 在 Heroku 应用上注册。前端使用 create-react-app 构建，后端使用同一服务器上的 Django。我制作了一个基本的“hello world”服务工作者，它在开发中工作，但在生产中出现 404 错误。我想我可能误解了我在生产中使用的基本文件系统。

我的本地目录中的文件系统基本上如下所示：

root
 - public
    - index.html
    - sw.js
    static
     - manifest.json
 - src
    - app.js
    - serviceWorker.js
...

serviceWorker.js 检查浏览器，然后尝试注册服务工作者：

...
navigator.serviceWorker
  .register(`${process.env.PUBLIC_URL}/sw.js`)
  .then(registration => {
...
//process.env.PUBLIC_URL returns http://localhost:3000/ in development, and https://www.mydomain.app/ in production

sw.js 只包含虚拟代码：

self.addEventListener('install', function(event) {
  console.log("Hello World")
})

当它部署到 Heroku 时，yarn build 将所有内容打包到一个构建目录中，如下所示：

build
 - index.html
 - sw.js
 - service-worker.js // added automatically by web-pack
 - asset-manifest.json // added automatically by web-pack
 - precache-manifest.xyz.js // added automatically by web-pack
 - static
    - css
    - js
    - manifest.json

在生产中，在 register() 函数期间找不到文件 sw.js。自动生成的 service-worker.js 也发生了同样的错误，它在开发中有效，但在生产中无效 (404)：

"TypeError: Failed to register a ServiceWorker for scope ('https://www.mydomain.app/') with script ('https://www.mydomain.app/sw.js'): A bad HTTP response code (404) was received when fetching the script."

我认为我对 PUBLIC_URL 的使用是正确的，因为它在开发和生产中可以在<link rel="manifest" href="%PUBLIC_URL%/static/manifest.json" /> 找到 manifest.json。我使用 heroku run bash 检查了文件系统，一切似乎都在正确的位置，我错过了什么？

【问题讨论】：

标签： reactjs heroku django-rest-framework service-worker

【解决方案1】：

找到答案here，也许这对其他人有帮助。

我需要将 sw.js 文件作为带有 django url 的视图提供：

from django.views.generic.base import TemplateView
urlpatterns = [ 
    ...   
    path('sw.js', TemplateView.as_view(template_name="sw.js", 
    content_type='application/javascript'), name='sw.js'),
    ...
]

【讨论】：