Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です！うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。 本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。 WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クラ
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法 お初にお目にかかります(？) chot Inc. で Web エンジニアをしているすてぃんです。 もう 1 ヶ月前ですが iOS Safari でプッシュ通知に対応したバージョンのベータ版が発表されましたね。 Web のプッシュ通知は、シェアの大きい iOS が対応してくれなかったのであまり実用的ではありませんでしたが、これからは Web でも多くのユーザーに能動的に新着情報を伝えることができるようになります。 本記事では Firebase Cloud Messaging(以降 FCM と表記) を用いた Web Push 通知の実装方法を、架空のメディアサイトを実装しながら紹介します。 FCM 以外には microCMS と Next.js を使用します。m
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた | Tech Blog | CRESCO Tech Blog
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた
iPhone Safariでプッシュ通知を送信可能に（iOS 16.4のSafari 16.4がWeb Pushをサポート）
iPhone の Safari がプッシュ通知を正式にサポートしました。 iOS/iPadOS 16.4 で Web Push Apple は先日、iOS および iPadOS の最新バージョンとなる 16.4 をリリースしました。 このアップデートにはいくつもの新機能や更新、セキュリティ修正が含まれますが、最も注目に値するのは、Safari 16.4 での Web Push（プッシュ通知）のサポートです。 Web Push を有効にすると、ユーザーがブラウザでサイトを訪問していないときでも通知を送信できます。 プッシュ通知は、更新記事や最新ニュース、重要なお知らせなどをユーザーに即座に伝えるために非常に有効なツールです。 スマートフォンの多くのネイティブアプリが実装しています。 Web Push は、ネイティブアプリではなく、（ブラウザで閲覧する）ウェブサイトでプッシュ通知を実現する機能
Amazon Pinpoint を使った Web Push 通知の送信方法 | Amazon Web Services
Amazon Web Services ブログ Amazon Pinpoint を使った Web Push 通知の送信方法 AWS のメッセージングツールを使って、任意の Web サイトへプッシュ通知を送信する方法 Web Push 通知は、ブラウザで受信する Web サイトからのメッセージです。これらのメッセージは、リッチでコンテキストに沿っており、かつタイムリーにパーソナライズされたもので、Web サイト訪問者のエンゲージメント、リエンゲージメント、リテンションを最適にすることを目的としています。例えば、Web サイトのオーナーは Web Push 通知を利用して、販売情報や重要なアップデート、新コンテンツなどをユーザーに通知することができます。 Web Push 通知と、ネイティブアプリの Push 通知の違い ネイティブアプリの Push 通知は、ユーザーのモバイルアプリケーション
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Push for Web Apps on iOS and iPadOS
iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
オープンな技術で開発進む通知システム「WebPush」を簡単に使ってみるJavaScriptプログラム