<div id="readability-page-1" class="page"><div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <h2 id="symptom">Symptom</h2>

<ul>
  <li>On iPad Safari (a regular tab), a ReferenceError: Can’t find variable: Notification is thrown inside a useEffect.</li>
  <li>Works fine on desktop (Chrome·Safari·Firefox); only happens on a real iOS/iPadOS Safari tab.</li>
  <li>MDN says Notification is supported — so why??</li>
</ul>

<h2 id="cause">Cause</h2>

<ul>
  <li>On iOS/iPadOS, regular Safari tabs and WebViews do not expose the Web Notification API.</li>
  <li>MDN lists it as supported, but to be precise it’s only partial support… on 16.4+, and only for home-screen PWAs.</li>
</ul>

<div><pre><code>Safari on iOS 16.4 (Release date: 2023-03-27)

Partial support: The Notification interface is undefined, unless the page is a web app saved to the home screen. The app's manifest must have a non-default display value.
</code></pre></div>

<ul>
  <li>eslint-plugin-compat can’t catch the missing Notification API issue, because of caniuse’s limitation (it doesn’t check MDN’s notes).</li>
  <li>Playwright’s webkit e2e test runs the desktop engine, so it doesn’t catch this error either.</li>
</ul>

<h2 id="fix">Fix</h2>

<p>Add a typeof guard:</p>

<p>if (typeof Notification === ‘undefined’) return;</p>

<h2 id="preventing-recurrence">Preventing Recurrence</h2>

<ul>
  <li>Lint: forbid direct access to the global Notification via no-restricted-globals.</li>
  <li>Test: the jsdom environment used in unit tests has no Notification. So if you don’t stub Notification, you can easily test the branch where it’s unavailable.</li>
</ul>

<h2 id="tldr">TL;DR</h2>

<ol>
  <li>iOS/iPadOS Safari supports the Notification API only partially (!).</li>
  <li>Prevent recurrence with a no-restricted-globals lint rule (ban direct access) + a test covering the unavailable-Notification branch.</li>
  <li>Read MDN carefully.</li>
</ol>

<p>20260608</p>

        
      </section>

      

      


      
  


    </div></div>

Never test

Symptom
On iPad Safari (a regular tab), a ReferenceError: Can’t find variable: Notification is thrown inside a useEffect.
Works fine on desktop (Chrome·Safari·Firefox); only happens on a real iOS/iPadOS Safari tab.
MDN says Notification is supported — so why??
Cause
On iOS/iPadOS, regular Safari tabs and WebViews do not expose the Web Notification API.
MDN lists it as supported, but to be precise it’s only partial support… on 16.4+, and only for home-screen PWAs.
Safari on iOS 16.4 (Release date: 2023-03-27)
Partial support: The Notification interface is undefined, unless the page is a web app saved to the home screen. The app's manifest must have a non-default display value.
eslint-plugin-compat can’t catch the missing Notification API issue, because of caniuse’s limitation (it doesn’t check MDN’s notes).
Playwright’s webkit e2e test runs the desktop engine, so it doesn’t catch this error either.
Fix
Add a typeof guard:
if (typeof Notification === ‘undefined’) return;
Preventing Recurrence
Lint: forbid direct access to the global Notification via no-restricted-globals.
Test: the jsdom environment used in unit tests has no Notification. So if you don’t stub Notification, you can easily test the branch where it’s unavailable.
TL;DR
iOS/iPadOS Safari supports the Notification API only partially (!).
Prevent recurrence with a no-restricted-globals lint rule (ban direct access) + a test covering the unavailable-Notification branch.
Read MDN carefully.
20260608

iPadOS Safari ReferenceError: Can’t find variable: Notification

댓글