Django PWA网站首页显示serviceworker.js代码问题求助

访问我的Django PWA网站首页时，页面直接展示serviceworker.js的代码，代码如下：

var staticCacheName = 'djangopwa-v1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '/base_layout'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
    if (requestUrl.origin === location.origin) {
      if ((requestUrl.pathname === '/')) {
        event.respondWith(caches.match('/base_layout'));
        return;
      }
    }
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
});

每次执行强制刷新（CTRL + F5或CTRL + R）后，网站会显示正常首页，且网址无任何变化。推测问题与Nginx配置相关，但无法确定具体错误点。以下是相关配置文件内容：

settings.py #

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'static/scripts', 'serviceworker.js')

...

PWA_APP_NAME = 'Timetable Ease'
PWA_APP_DESCRIPTION = "Timetable Ease PWA"
PWA_APP_THEME_COLOR = '#3D36FF'
PWA_APP_BACKGROUND_COLOR = '#aaaadd'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': 'static/images/logo.png',
        'sizes': '160x160'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': 'static/images/logo.png',
        'sizes': '160x160'
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': 'static/images/logo.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'
PWA_APP_DEBUG_MODE = False

项目urls.py #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('base.urls')),
    path('', include('pwa.urls')),
]

应用urls.py #

from django.urls import path
from .views import home

urlpatterns = [
    path('', home.home, name='home'),
]

home.py #

@login_required(login_url='login')
def home(request):
    return render(request, 'index.html')

layout_base.html #

<!DOCTYPE html>
{% load static tags %}
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load pwa %}
    {% progressive_web_app_meta %}

...

Nginx配置 #

server_tokens               off;
access_log                  /var/log/nginx/timetableease.access.log;
error_log                   /var/log/nginx/timetableease.error.log;

server {
  server_name               .timetableease.com;
  listen                    80;
  return                    307 https://$host$request_uri;
}

server {
  location / {
    proxy_pass              http://localhost:8000;
    proxy_set_header        Host $host;
    proxy_set_header        X-Forwarded-Proto $scheme;
  }

  location = /favicon.ico {
    access_log off;
    log_not_found off;
  }

  location /static {
    autoindex on;
    alias /home/ubuntu/timetableease/static/;
    expires off;
  }

  location /service-worker.js {
    alias /home/ubuntu/timetableease/static/scripts/serviceworker.js;
  }

  listen 443 ssl;
  ssl_certificate /etc/ssl/ssl-bundle.crt;
  ssl_certificate_key /home/ubuntu/server.key;
}

问题原因与修复方案 #

核心原因

问题出在Service Worker缓存逻辑错误 + Nginx未正确设置Service Worker响应头：

1. Service Worker中缓存了/base_layout，但当首页请求/时直接返回该缓存，若缓存的/base_layout意外指向了serviceworker.js，就会导致首页显示代码；
2. Nginx返回serviceworker.js时未设置正确的Content-Type，浏览器无法正确识别脚本类型，加剧缓存混乱；
3. 旧Service Worker缓存未更新，强制刷新绕过缓存后才能正常显示。

修复步骤

1. 修正Service Worker缓存逻辑
   修改serviceworker.js，确保缓存正确资源并处理首页请求：

   var staticCacheName = 'djangopwa-v2'; // 更新版本号强制更新
   
   self.addEventListener('install', function(event) {
     event.waitUntil(
       caches.open(staticCacheName).then(function(cache) {
         // 缓存首页和必要静态资源，避免错误路径
         return cache.addAll([
           '/',
           '/static/css/main.css', // 替换为你项目的静态资源
           '/static/js/app.js'
         ]);
       })
     );
   });
   
   self.addEventListener('fetch', function(event) {
     var requestUrl = new URL(event.request.url);
     if (requestUrl.origin === location.origin) {
       if (requestUrl.pathname === '/') {
         // 优先从网络获取首页，再更新缓存
         event.respondWith(
           fetch(event.request).then(function(response) {
             caches.open(staticCacheName).then(cache => cache.put('/', response.clone()));
             return response;
           }).catch(() => caches.match('/'))
         );
         return;
       }
     }
     // 其他请求走缓存优先逻辑
     event.respondWith(
       caches.match(event.request).then(response => response || fetch(event.request))
     );
   });
   

2. 修复Nginx配置
   修改/service-worker.js的location块，添加正确的响应头：

   location = /service-worker.js {
     alias /home/ubuntu/timetableease/static/scripts/serviceworker.js;
     add_header Content-Type 'application/javascript';
     add_header Cache-Control 'no-cache, no-store, must-revalidate';
     add_header Pragma 'no-cache';
     add_header Expires '0';
   }
   

   • 用=精确匹配路径，避免误匹配
   • 设置Content-Type确保浏览器识别为JS脚本
   • 添加缓存控制头，禁止浏览器缓存旧的Service Worker

3. 更新并重新注册Service Worker

   • 修改缓存版本号后，重启Django和Nginx
   • 打开浏览器开发者工具（F12），进入Application > Service Workers，点击Unregister清除旧服务 worker
   • 强制刷新页面，让新的Service Worker完成注册

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