fix: use legacy Safari push path only for existing legacy subscribers

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OneSignal Dev</title>
+    <title>OneSignal Dev — SDK-4180 Safari VAPID Test</title>
     <style>
       .in-app-notification {
         position: fixed;
@@ -20,63 +20,108 @@
         animation: slideIn 0.3s ease-out;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
-      .in-app-notification h4 {
-        margin: 0 0 8px 0;
-        font-size: 16px;
+      * {
+        box-sizing: border-box;
       }
-      .in-app-notification p {
-        margin: 0;
-        font-size: 14px;
-        opacity: 0.9;
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        max-width: 720px;
+        margin: 40px auto;
+        padding: 0 20px;
+        color: #1a1a2e;
       }
-      .in-app-notification .close-btn {
-        position: absolute;
-        top: 8px;
-        right: 12px;
-        background: none;
-        border: none;
-        color: white;
-        font-size: 20px;
-        cursor: pointer;
-        opacity: 0.7;
+      h1 {
+        font-size: 22px;
+        margin-bottom: 4px;
       }
-      .in-app-notification .close-btn:hover {
-        opacity: 1;
+      .subtitle {
+        color: #666;
+        margin-bottom: 24px;
       }
-      @keyframes slideIn {
-        from {
-          transform: translateX(100%);
-          opacity: 0;
-        }
-        to {
-          transform: translateX(0);
-          opacity: 1;
-        }
+      .card {
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 16px;
       }
-      .demo-section {
-        margin: 20px 0;
-        padding: 16px;
-        background: #f5f5f5;
-        border-radius: 8px;
-      }
-      .demo-section h3 {
+      .card h3 {
         margin-top: 0;
       }
-      .toggle-btn {
+      button {
         padding: 10px 20px;
         font-size: 14px;
         cursor: pointer;
         border: none;
         border-radius: 6px;
-        margin-right: 10px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+      }
+      .btn-primary {
+        background: #e63946;
+        color: white;
+      }
+      .btn-primary:hover {
+        background: #c1121f;
       }
-      .toggle-btn.active {
-        background: #667eea;
+      .btn-secondary {
+        background: #457b9d;
         color: white;
       }
-      .toggle-btn:not(.active) {
-        background: #ddd;
-        color: #333;
+      .btn-secondary:hover {
+        background: #1d3557;
+      }
+      #log {
+        background: #1a1a2e;
+        color: #a8dadc;
+        font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+        font-size: 12px;
+        padding: 16px;
+        border-radius: 8px;
+        max-height: 300px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      #log .error {
+        color: #e63946;
+      }
+      #log .success {
+        color: #2a9d8f;
+      }
+      #log .info {
+        color: #e9c46a;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 14px;
+      }
+      td {
+        padding: 6px 0;
+      }
+      td:first-child {
+        font-weight: 600;
+        width: 200px;
+      }
+      .tag {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .tag-legacy {
+        background: #ffc9c9;
+        color: #c92a2a;
+      }
+      .tag-vapid {
+        background: #b2f2bb;
+        color: #2b8a3e;
+      }
+      .tag-unknown {
+        background: #e0e0e0;
+        color: #666;
       }
     </style>
     <script>
@@ -86,11 +131,7 @@
 
       window.OneSignalDeferred = window.OneSignalDeferred || [];
       OneSignalDeferred.push(async function (OneSignal) {
-        // for testing consent required
         OneSignal.Debug.setLogLevel('trace');
-        // OneSignal.setConsentRequired(true);
-
-        // for testing, normally this is set on (temporary) in the database client
         OneSignal._isNewVisitor = true;
 
         OneSignal.init({
@@ -99,16 +140,134 @@
           notifyButton: {
             enable: true,
             prenotify: true,
-            showBadgeAfter: 0, // show immediately instead of waiting 300ms
+            showBadgeAfter: 0,
           },
         });
-
-        // OneSignal.setConsentRequired(true);
       });
     </script>
   </head>
   <body>
+    <div class="card">
+      <h3>Browser & Safari Push Info</h3>
+      <table>
+        <tr>
+          <td>User Agent</td>
+          <td id="ua">—</td>
+        </tr>
+        <tr>
+          <td>window.safari exists</td>
+          <td id="safari-exists">—</td>
+        </tr>
+        <tr>
+          <td>Legacy permission state</td>
+          <td id="legacy-perm">—</td>
+        </tr>
+        <tr>
+          <td>Legacy deviceToken</td>
+          <td id="legacy-token">—</td>
+        </tr>
+        <tr>
+          <td>Notification.permission</td>
+          <td id="notif-perm">—</td>
+        </tr>
+        <tr>
+          <td>PushSubscriptionOptions</td>
+          <td id="vapid-support">—</td>
+        </tr>
+        <tr>
+          <td>Expected push path</td>
+          <td id="push-path">—</td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="card">
+      <h3>Actions</h3>
+      <button class="btn-primary" id="request-perm">Request Permission</button>
+      <button class="btn-secondary" id="refresh-info">Refresh Info</button>
+    </div>
+
+    <div class="card">
+      <h3>Log</h3>
+      <div id="log"></div>
+    </div>
+
     <script type="module" src="/src/entries/pageSdkInit.ts" defer></script>
-    <!-- <h1>OneSignal Dev</h1> -->
+    <script>
+      const $ = (id) => document.getElementById(id);
+      const log = (msg, cls = '') => {
+        const el = $('log');
+        const span = document.createElement('span');
+        if (cls) span.className = cls;
+        span.textContent = `[${new Date().toLocaleTimeString()}] ${msg}\n`;
+        el.appendChild(span);
+        el.scrollTop = el.scrollHeight;
+      };
+
+      function refreshInfo() {
+        $('ua').textContent = navigator.userAgent;
+
+        const hasSafari =
+          typeof window.safari !== 'undefined' &&
+          typeof window.safari.pushNotification !== 'undefined';
+        $('safari-exists').textContent = hasSafari ? 'Yes' : 'No';
+
+        if (hasSafari) {
+          try {
+            const safariWebId =
+              OneSignal?.config?.safariWebId ||
+              'web.onesignal.auto.6187ce57-f346-4a86-93e4-7d70d494c000';
+            const perm = window.safari.pushNotification.permission(safariWebId);
+            $('legacy-perm').textContent = perm.permission;
+            $('legacy-token').textContent = perm.deviceToken || '(null)';
+
+            if (perm.permission === 'granted' && perm.deviceToken) {
+              $('push-path').innerHTML =
+                '<span class="tag tag-legacy">Legacy Safari Push</span> (existing subscriber)';
+            } else {
+              $('push-path').innerHTML =
+                '<span class="tag tag-vapid">Standard VAPID Push</span> (new user)';
+            }
+          } catch (e) {
+            $('legacy-perm').textContent = 'Error: ' + e.message;
+            $('legacy-token').textContent = '—';
+          }
+        } else {
+          $('legacy-perm').textContent = 'N/A (not Safari)';
+          $('legacy-token').textContent = 'N/A';
+          const isVapid = typeof PushSubscriptionOptions !== 'undefined';
+          $('push-path').innerHTML = isVapid
+            ? '<span class="tag tag-vapid">Standard VAPID Push</span>'
+            : '<span class="tag tag-unknown">Push not supported</span>';
+        }
+
+        const vapidSupport = typeof PushSubscriptionOptions !== 'undefined';
+        $('vapid-support').textContent = vapidSupport ? 'Supported' : 'Not available';
+        $('notif-perm').textContent =
+          typeof Notification !== 'undefined' ? Notification.permission : 'N/A';
+      }
+
+      $('request-perm').addEventListener('click', async () => {
+        log('Requesting push permission...', 'info');
+        try {
+          await OneSignal.Notifications.requestPermission();
+          log('Permission granted!', 'success');
+        } catch (e) {
+          log('Error: ' + e.message, 'error');
+        }
+        refreshInfo();
+      });
+
+      $('refresh-info').addEventListener('click', refreshInfo);
+
+      window.OneSignalDeferred = window.OneSignalDeferred || [];
+      OneSignalDeferred.push(() => {
+        log('OneSignal initialized', 'success');
+        refreshInfo();
+      });
+
+      // Initial info on page load
+      setTimeout(refreshInfo, 500);
+    </script>
   </body>
 </html>

package.json

@@ -76,12 +76,12 @@
     },
     {
       "path": "./build/releases/OneSignalSDK.page.es6.js",
-      "limit": "42.22 kB",
+      "limit": "42.28 kB",
       "gzip": true
     },
     {
       "path": "./build/releases/OneSignalSDK.sw.js",
-      "limit": "12.28 kB",
+      "limit": "12.35 kB",
       "gzip": true
     },
     {