<h1 id="webpush">
<a class="header-anchor-link" href="#webpush" aria-hidden="true"></a> WebPush</h1>
<h1 id="push%E9%80%9A%E7%9F%A5%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#push%E9%80%9A%E7%9F%A5%E3%81%A8%E3%81%AF" aria-hidden="true"></a> push通知とは</h1>
<p>ブラウザ経由でpush通知を行うweb pushを使用する。<br>
※　シークレットモードまたはプライベートブラウザモードでは機能しない。</p>
<h1 id="%E5%90%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AEweb-push%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81">
<a class="header-anchor-link" href="#%E5%90%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AEweb-push%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> 各ブラウザのweb push対応状況</h1>
<h2 id="chrome">
<a class="header-anchor-link" href="#chrome" aria-hidden="true"></a> <a href="https://support.google.com/chrome/answer/3220216" target="_blank" rel="nofollow noopener noreferrer">chrome</a>
</h2>
<p>Android：可、iPhone：不可</p>
<h2 id="safari">
<a class="header-anchor-link" href="#safari" aria-hidden="true"></a> <a href="https://www.suzukikenichi.com/blog/web-push-is-coming-to-safari-16-on-macos-ventura/" target="_blank" rel="nofollow noopener noreferrer">Safari</a>
</h2>
<p>iPhone：不可→2023年に可能になる。（iOS16以降）</p>
<h1 id="%E4%BB%95%E7%B5%84%E3%81%BF">
<a class="header-anchor-link" href="#%E4%BB%95%E7%B5%84%E3%81%BF" aria-hidden="true"></a> 仕組み</h1>
<p>サービスワーカーを経由して、ブラウザからアプリケーションサーバーと通信を行い通知を出す。</p>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Push_API" target="_blank" rel="nofollow noopener noreferrer">Push API</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API" target="_blank" rel="nofollow noopener noreferrer">通知 API の使用</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API" target="_blank" rel="nofollow noopener noreferrer">サービスワーカー API</a></li>
<li><a href="https://qiita.com/tomoyukilabs/items/2ae4a0f708a1af75f13e" target="_blank" rel="nofollow noopener noreferrer">Web Pushでブラウザにプッシュ通知を送ってみる</a></li>
<li><a href="https://www.npmjs.com/package/web-push" target="_blank" rel="nofollow noopener noreferrer">web-push</a></li>
</ul>


WebPush

push通知とは

各ブラウザのweb push対応状況

chrome

Safari

仕組み

参考

Discussion