Django网页端推送通知配置失败求助：按文档操作仍无法运行

问题背景 #

我严格按照官方文档配置网站推送通知，但功能无法正常运行。

后端配置 #

PUSH_NOTIFICATIONS_SETTINGS = {
    "WP_PRIVATE_KEY": BASE_DIR / 'private_key.perm',
    "WP_CLAIMS": {'sub': "mailto: development@example.com"}
}

前端客户端代码（复制自官方文档） #

.....
<h1>Push Notification Example</h1>
<script>
...............
...........

  var applicationServerKey = "....";
  // In your ready listener
  if ('serviceWorker' in navigator) {
    // The service worker has to store in the root of the app
    var browser = loadVersionBrowser('chrome');
    navigator.serviceWorker.register('navigatorPush.service.js?version=1.0.0').then(function (reg) {
      reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
      }).then(function (sub) {
        var endpointParts = sub.endpoint.split('/');
        var registration_id = endpointParts[endpointParts.length - 1];
        var data = {
          'browser': browser.name.toUpperCase(),
          'p256dh': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
          'auth': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
          'name': 'XXXXX',
          'registration_id': registration_id
        };
        console.log(data);
      })
    }).catch(function (err) {
      console.log(':^(', err);
    });
  }
</script>

错误截图 #

排查方向 #

从配置和错误表现来看，可逐一检查以下几点：

• 密钥匹配问题：前端applicationServerKey必须是后端私钥对应的公钥，且为URL安全的Base64编码，不能用占位符....，需确认公钥填充正确。
• Service Worker路径有效性：确认navigatorPush.service.js文件在域名根目录下可访问，建议先去掉版本号查询参数测试注册是否正常。
• 私钥文件权限与路径：验证BASE_DIR / 'private_key.perm'指向的文件存在，且应用进程有读取权限，可打印BASE_DIR实际路径核对位置。
• HTTPS环境要求：生产/非localhost测试环境必须配置有效SSL证书，推送通知仅允许localhost开发环境使用HTTP。
• 浏览器权限与兼容性：检查浏览器是否支持Push API，且已开启网站通知权限。
• urlBase64ToUint8Array函数实现：该函数是公钥转换的关键，需确认是否完整复制文档中的正确实现，缺失或错误会导致订阅失败。
• 后端配置完整性：部分推送库除私钥和claims外，可能需要额外配置（如Chrome/Firefox对应的GCM/FCM密钥），核对官方文档是否有遗漏的必填项。

内容的提问来源于stack exchange，提问作者Sandeep Prasad Kushwaha