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







<p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE5avojQC4sVS83b4AZXWCg6GEz_zXbqExaA&amp;s" alt="iPadOS Safari ReferenceError: Can’t find variable: Notification">
  
  
</p>






  
    





  


<div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="iPadOS Safari ReferenceError: Can’t find variable: Notification">
    <meta itemprop="description" content="현상">
    <meta itemprop="datePublished" content="2026-06-07T15:49:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

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


        </header>
      

      <section itemprop="text">
        
        <h2 id="현상">현상</h2>

<ul>
  <li>iPad Safari 탭으로 접속 시 useEffect 안에서 ReferenceError: Can’t find variable: Notification 발생</li>
  <li>데스크톱(Chrome·Safari·Firefox)에선 정상, 실제 iOS/iPadOS Safari 탭에서만 발생.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification">MDN</a>에서는 Notification 지원 한다고 했는데 왜??</li>
</ul>

<h2 id="원인">원인</h2>

<ul>
  <li>iOS/iPadOS의 일반 Safari &amp; WebView 에서는 browser의 Notification API 를 지원하지 않는다.</li>
  <li>MDN에서는 Notification API 를 지원한다고 되어 있지만 정확히 말하자면 일부 지원이다… 16.4+에서 홈화면 PWA에만 지원한다.</li>
</ul>

<p>주석에는 이렇게 적혀 있다.</p>
<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은 caniuse 의 한계(MDN의 주석까지는 확인하지 않는다)로 Notification 미지원 문제를 잡아내지 못 한다</li>
  <li>Playwright e2e webkit test는 데스크톱 엔진이라 이 오류를 못 잡는다.</li>
</ul>

<h2 id="조치">조치</h2>

<p>typeof 가드 추가</p>

<div><pre><code><span>if</span> <span>(</span><span>typeof</span> <span>Notification</span> <span>===</span> <span>'</span><span>undefined</span><span>'</span><span>)</span> <span>return</span><span>;</span>
</code></pre></div>

<h2 id="재발-방지-대책">재발 방지 대책</h2>

<ul>
  <li>lint: no-restricted-globals로 전역 Notification 직접 접근 금지</li>
  <li>테스트: 단위 테스트에서 사용하는 jsdom은 Notification이 없다. 그러니 Notification을 stub하지 않으면 쉽게 이 오류를 테스트 할 수 있다.</li>
</ul>

<h2 id="3줄-요약">3줄 요약</h2>

<ol>
  <li>iOS/iPadOS Safari 는 Notification API를 일부(!) 지원</li>
  <li>no-restricted-globals lint로 직접 접근 금지 + 테스트로 부재 분기 커버해 재발 방지</li>
  <li>MDN을 자세히 읽어야 한다.</li>
</ol>

<p>20260608</p>

        
      </section>

      

      


      
  


    </div>

    
      
        

      
    
  </article>

  
  
    


  
  
</div>

      
    </div></div>

Never test

현상
iPad Safari 탭으로 접속 시 useEffect 안에서 ReferenceError: Can’t find variable: Notification 발생
데스크톱(Chrome·Safari·Firefox)에선 정상, 실제 iOS/iPadOS Safari 탭에서만 발생.
MDN에서는 Notification 지원 한다고 했는데 왜??
원인
iOS/iPadOS의 일반 Safari & WebView 에서는 browser의 Notification API 를 지원하지 않는다.
MDN에서는 Notification API 를 지원한다고 되어 있지만 정확히 말하자면 일부 지원이다… 16.4+에서 홈화면 PWA에만 지원한다.
주석에는 이렇게 적혀 있다.
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은 caniuse 의 한계(MDN의 주석까지는 확인하지 않는다)로 Notification 미지원 문제를 잡아내지 못 한다
Playwright e2e webkit test는 데스크톱 엔진이라 이 오류를 못 잡는다.
조치
typeof 가드 추가
if (typeof Notification === 'undefined') return;
재발 방지 대책
lint: no-restricted-globals로 전역 Notification 직접 접근 금지
테스트: 단위 테스트에서 사용하는 jsdom은 Notification이 없다. 그러니 Notification을 stub하지 않으면 쉽게 이 오류를 테스트 할 수 있다.
3줄 요약
iOS/iPadOS Safari 는 Notification API를 일부(!) 지원
no-restricted-globals lint로 직접 접근 금지 + 테스트로 부재 분기 커버해 재발 방지
MDN을 자세히 읽어야 한다.
20260608

iPadOS Safari ReferenceError: Can’t find variable: Notification

댓글