Django PWA项目中serviceworker.js引用indexPWA.html的正确路径写法

核心原因 #

Django的templates目录是服务端模板存储目录，默认不会直接对外开放前端访问权限，你在serviceworker.js中填写的路径是浏览器可访问的URL路径，不是项目内部的文件系统路径，所以直接写indexPWA.html无法匹配到资源。
当前你的serviceworker.js的默认前端访问路径为/static/pwa/serviceworker.js，走Django静态资源路由规则。

两种解决方案 #

方案1：保留模板渲染逻辑（需要后端动态填充内容时使用） #

• 第一步：在pwa应用的views.py中添加视图函数，渲染目标模板

  from django.shortcuts import render
  
  def index_pwa(request):
      return render(request, 'indexPWA.html')
  

• 第二步：在pwa应用的urls.py中绑定可访问的路由规则，示例配置：

  from django.urls import path
  from . import views
  
  urlpatterns = [
      # 可自行修改路由规则，最终serviceworker里填绑定的前端路径即可
      path('pwa-index/', views.index_pwa, name='pwa_index'),
  ]
  

• 第三步：修改serviceworker.js中的引用路径：

  // 路径和你上一步绑定的路由完全一致即可
  var filesToCache = ["/pwa-index/"]
  

  如果你的Django服务部署在子路径前缀下，比如站点根路径是/my-site/，对应修改为"/my-site/pwa-index/"即可。

方案2：作为纯静态文件访问（不需要后端渲染时使用） #

直接把indexPWA.html从templates目录移动到pwa/static/pwa/目录下，不需要额外配置路由，直接修改serviceworker.js中的路径即可：

var filesToCache = ["/static/pwa/indexPWA.html"]

内容的提问来源于stack exchange，提问作者rivercity