OneSignal Web SDK在本地PHP环境无订阅按钮和通知如何解决

问题排查与对应解决方法 #

• 协议不兼容问题
  原因：OneSignal 网页推送能力要求站点必须使用 HTTPS 协议，仅 localhost 本地开发环境可豁免 HTTP 限制，你当前使用的 http://a.test 不属于豁免范畴，会导致 SDK 初始化失败，无法渲染推送相关组件。
  解决方法：本地开发阶段可将测试域名修改为 localhost 进行调试，或给 a.test 配置自签名 SSL 证书切换为 HTTPS 访问；线上环境必须部署正规可信的 SSL 证书。
• 初始化配置缺失
  原因：typical site 典型站点集成模式下，默认不会自动展示订阅弹窗/按钮，需要在初始化参数中显式配置 UI 触发规则，你当前仅填写了 appId 缺少相关配置项。
  解决方法：补充初始化配置参数，参考如下代码修改初始化逻辑：

  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  <script>
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
      OneSignal.init({
        appId: "app_id_here",
        // 启用右下角固定订阅按钮
        notifyButton: {
          enable: true
        },
        // 配置页面加载自动弹出订阅滑窗
        promptOptions: {
          slidedown: {
            prompts: [
              {
                type: "push",
                autoPrompt: true,
                text: {
                  actionMessage: "是否允许接收站点通知？",
                  acceptButton: "允许",
                  cancelButton: "稍后"
                }
              }
            ]
          }
        }
      });
    });
  </script>
  

• 浏览器权限与缓存问题
  原因：如果之前在该站点下选择过禁止通知权限，或是浏览器缓存了旧的错误配置，都会导致订阅弹窗不会重复触发。
  解决方法：打开浏览器站点权限设置，将 a.test 的通知权限修改为「询问」状态，也可直接重置该站点的所有权限，之后清空浏览器缓存并硬刷新页面重试。
• 后台配置与本地环境不匹配
  原因：OneSignal 后台配置的站点 URL、自定义 label 需和实际测试环境完全一致，否则会触发 SDK 校验失败，无法正常加载组件。
  解决方法：登录 OneSignal 后台核对对应应用的配置项，确认站点 URL 填写为 http://a.test、自定义 label 填写为 atest.os.tc，同时检查本地 hosts 文件是否添加了 127.0.0.1 atest.os.tc 的映射规则。

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