はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
5行でわかるプッシュ通知【VAPID】 - Qiita
HTMLとサービスワーカーしかない簡易なサイトを作りました。 ここに通知機能を実装してみてください😸 ソース https://github.com/GitHub30/web-push-study まず、サイトを開いてコンソールを出しましょう。 Chrome ( Ctrl + Shift + J ) Firefox ( Ctrl + Shift + K )
Welcome to Wildebeest: the Fediverse on Cloudflare02/08/2023 This post is also available in 简体中文 and 繁體中文. The Fediverse has been a hot topic of discussion lately, with thousands, if not millions, of new users creating accounts on platforms like Mastodon to either move entirely to "the other side" or experiment and learn about this new social network. Today we're introducing Wildebeest, an open-so
▲これはあくまで例であり、リージョンや使用量によって変わることに注意してください マストドンインスタンス作成の事前準備 基本的には用意された CloudFormation テンプレートをデプロイするだけなのですが、先行して行っておく準備があります。 ドメインの確保 ローカルの Docker 実行環境によるシークレットキー等の生成 SES のサンドボックスからの移動 ドメインの確保 ここで決めたドメイン名でマストドンに接続することになります。 今回わたしは Freenom というサイトでchibayuki.tkというドメインを取得しておきました。詳細な手順は以下エントリが参考になります。 ローカルの Docker 実行環境によるシークレットキー等の生成 Docker コンテナをローカルで実行しシークレットキーやキーを生成しておきます。これが CloudFormation スタック作成時にパラ
Web3 is Bullshit
Web3 is Bullshit If you read tech journalism you’ll probably hear the fuzzy term web3 bandied about in the press. Sprinkled around all these articles are all manner of idealistic and utopian ideas about how we can rebuild the internet to reflect our aspirations of a more humane and egalitarian society. However the journalists never quite drill down into the details on the mechanisms of how the int
はてなブログを更新したら Mastodon に投稿する IFTTT を作る → mstdn.jp 対策に GAS も併用 - Neo's World
はてなブログを更新したら Mastodon に投稿する IFTTT を作る → mstdn.jp 対策に GAS も併用 はてなブログに限らずだが、RSS フィードを発行するブログ等の媒体を更新した時に、その RSS フィードの更新を検知して IFTTT の Webhook が発火し、Mastodon API を使ってブログの更新内容をトゥートする、そんな仕組みを作ってみた。 前半は通常のマストドン・インスタンスで成功するであろう構成で、後半は mstdn.jp 固有の問題を解消するための対策版を紹介する。 目次 準備するモノ Mastodon API の準備をする IFTTT の Applet を作成する mstdn.jp は IFTTT からのリクエストを拒否している模様 GAS を経由して送信する 参考文献 準備するモノ Mastodon のアカウント : 以降の例では mstdn.
はじめに この記事では、Push APIを用いたWeb Pushにおけるアプリケーションサーバーの処理を概観します。 特に重要と思われる以下2つの点を中心に説明します。 VAPID (Voluntary Application Server Identification) Message Encryption 加えて、そのほかにアプリケーションを実装する上で考慮する点をいくつか紹介します。 サーバーサイドの実装ではWeb Push用のライブラリを使うことが多く細かい部分を自分で実装する機会は少ないと思いますが、どのような技術が使われているのか把握しておくことにより、より自信を持って正しく扱えるようになると思います。 対象読者 Push APIを用いたWeb Pushを触ってみたことがあり、大まかの仕組みをイメージできる程度の知識があるのが望ましいです。 「詳しい仕様はよくわからないが、ライ
1. Mastodon（マストドン）とは Twitter社がイーロン・マスク氏に買収された事で、Twitter以外のSNSが話題となっております。 中でもTwitterの代わりとして、オープンソースの分散型SNSであるMastodonが注目されています。 Mastodonは、自分でサーバーを借りて立ち上げることができるため、本記事では、Mastodonをインストールして利用してみようと思います。 2. Mastodon（マストドン）のインストール 今回は 下記ALTUS Isolateシリーズの環境で、Ubuntuテンプレートを利用してインストールをしていきます。 Ubuntu 20.04 LTS プラン：MV4（2CPU メモリ：4G） 仮想サーバーへはグローバルIPを割り当てて、22/80/443ポートを開放してあります。 ※本番で利用の場合は、/appの容量が増えていくので、容量増加
そもそもかっこいい表現使う必要ある？ よく中学校で習う英単語で日常会話は可能だという話を聞きますが、ここでは難易度の高い表現を使うことの利点をいくつかご紹介していこうと思います。 「言葉選び」の重要性 言葉選びで得られる「信頼感」 様々な表現を知っておくこと、またそれを使うことの利点とは何か？ まず一つ目の利点が“信頼感”です。 特にビジネスシーンにおいて言葉選びが話し手に対する信頼感に直接結びついています。非ネイティブであったとしても、会話の中に知的な表現を入れたり、会話の表現の中に様々なバリエーションを持たせることで、聞き手に信頼感を持たせることができます。 また、その言葉選びというのは、相手の話を聞く態度にも影響します。相手に信頼感を持たせることができれば、相手が話を聞く態度をもポジティブに帰ることができます。 「自信」と「モチベーション」 また、ビジネスシーンだけでなく、英語学習に
Mastodon メンテナンスメモ(移植版)
Qiitaにて公開されていた記事ですが、都合によりZennへ移行しました。 備忘録として残しておきます Mastodon専用ユーザにて、Mastodonのインストールディレクトリにて操作することを前提にしています。 (非Dockerならliveディレクトリ) 参考資料 他の記事、ウェブサイトへのリンク集 GitHubリポジトリ tootsuite / mastodon 公式ドキュメント Mastodon documentation インストール手順 Installing from source - Mastodon documentation 公式ドキュメント。Ubuntuにインストールするならこの手順に従う。 Mastodon構築手順・非Docker版 非公式・手前味噌ドキュメント。RHEL系なら参考になるかも。 アップデート手順 Upgrading to a new release -
Meet Web Push for Safari - WWDC22 - Videos - Apple Developer
Streaming is available in most browsers, and in the WWDC app. Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We'll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers. Resources Have a question? Ask with tag wwdc2022-10098 Learn more about bug reporting
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（３）Firebaseでプッシュ通知に必要なトークンを処理する｜虹色ミツバチ
前回までの記事で、PWA化にはmagnifest.jsonとserviceworker.jsが必要と解説し、そのサンプルを掲載しました。 今回からは目標だったプッシュ通知について解説します。 プッシュ通知の仕組みとFirebaseを利用することにした経緯 PWAを使ったプッシュ通知では、ブラウザで「プッシュ通知を受け取る」設定をした時に、「トークン」が発行されます。 これはブラウザ単位で発行されるので、PCのGoogle ChromeとスマホのAndroidでは別々のトークンが発行されます。 この「トークン」に対して、PWAを利用したサイト（ウェブアプリ）の管理者がサーバーからCurlコマンドを叩くことでプッシュ通知を送信します。 すなわち、「トークン」をどこかに保存しておく必要がありそうです。 トークンを取得したとしても、プッシュ通知を１件１件送っていくのは時間がかかりそうな気がします。
作ったもの https://ramen-sender.vercel.app どんなアプリ？ プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している自分も含めたユーザ全員にラーメン画像のプッシュ通知を送りつけることが出来ます。 また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。 送られてくるラーメン画像はすべて私が撮ったものです。 なんで作ったの？ iOSのsafariのPWAでもPush通知ができるようになる！ iOS16で実装される！ みたいな情報があったから、iOS16出たしなんか作ってみよう！って思ってたんだけど 実際に使えるようになるのは2023年中(予定)らしい。 はい解散！ ではなく、その代わり？というか前段なのかな、MacOS 13 Venturaのsafari16でプッシュ通知が対応した1らしい！っていうのを見つけ
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ページを開く
iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
Welcome to Wildebeest: the Fediverse on Cloudflare
マストドン(Mastodon)のインスタンスを AWS でホストしてみた | DevelopersIO
Web Pushのサーバーサイドの処理〜VAPIDとMessage Encriptionを中心に〜
Mastodon（マストドン）サーバーの立て方を分りやすくご紹介！
かっこいい英単語15選!ネイティブに驚かれるクールで使える英語表現を伝授します。
ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った - Qiita