サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用）
プログラミング サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用）※当サイトにはプロモーションが含まれています。 1. はじめにウェブサーバーから任意のタイミングで、ブラウザにメッセージを送信（プッシュ通知）する方法について説明します。 これを実現するために Push API を使います。この API は、RFC 8030 – Generic Event Delivery Using HTTP Push という「 ウェブブラウザもしくはアプリケーションサーバーと、プッシュサービスとの間のやり取りを可能にする 」を可能にするプロトコル (HTTP Web Push) の使用を前提としてます。 2. 全体像以下の図が、この仕組の全体像を表しています。かなり単純化した図です。 +-------+ +--------------+ +-------------+ |
Reactを使用してPWAにプッシュ通知を実装する方法
プッシュ通知は、ユーザーとのエンゲージメントを強化し、ユーザーがアプリに頻繁に戻るように動機付けるための非常に強力なツールです。私のチームと私は、健康習慣トラッカーを兼ねるモバイルフレンドリーな仮想ペットゲームを作成しました。「水を飲む」、「体を動かす」、「画面から休憩する」など、健康的な日常生活のリマインダーをユーザーに送信したいと考えました。 この機能を実装するために、アプリをプログレッシブWebアプリにすることを決定しました。これにより、プッシュ通知やオフラインアクセスなどのネイティブのような機能とともに、どのデバイスからでもアクセスできるようになります。 調査中に、Service Workerの動作とプッシュAPIの操作の基本について非常に役立つチュートリアルと記事を見つけましたが、デプロイされた環境でReactプロジェクトとどのように連携するかを説明するリソースを見つけるのは困難
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法
Web Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法※当サイトにはプロモーションが含まれています。 1. はじめにウェブページの弱点の一つは、インターネット接続環境でないと見られない（使えない）ことです。 Google は PWA (Progressive Web Apps) というアプリケーション開発手法を提唱しており、これに従えばオフラインでも動作するウェブアプリケーションを作成することができます。但し、かなり面倒ですし、単純なウェブページを作りたいだけの場合はオーバースペックと言ってよいでしょう。 本ページでは、PWA でも使われている Service Worker という技術を使って、ウェブページまたはシンプルなウェブアプリケーションをオフラインでも閲覧できる（動作する）形で作成する方法を紹介します。 2. 今回使用する題材以前作って本サイト
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
インストールが可能になるための最低限のウェブサイト(PWA)を作る
Web インストールが可能になるための最低限のウェブサイト(PWA)を作る※当サイトにはプロモーションが含まれています。 1. はじめにウェブサイト（ウェブアプリ）がインストール可能となるには、基本的には PWA なサイトにマニフェストファイルとアイコンファイルを追加すればよいです。 一応、PWA をインストール可能にするには – プログレッシブウェブアプリ | MDN では、以下の条件が必要であると説明されています。 HTTPS で提供されているウェブサイト（ウェブアプリ）であること。正しくフィールドが入力されたウェブマニフェストが HTML の head 内からリンクされていること。ホームスクリーン上で適切に表示されるサイズのアイコンを持っていること。登録された Service Worker を持っていること（Chrome だけ？）。本ページでは、インストールが可能になるための必要最低
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn PWA | web.dev
