問題タブ [push-api]

この記事に従って、プッシュ通知に Service Worker を使用しています。Chrome ではすべてが機能しますが、Firefox (v.44.0.2) では奇妙な問題が発生します。アプリへのログインに成功したら、プッシュ イベントを待機するだけの Service Worker を登録します。正しく登録されていることがわかります（いくつかのログとabout:serviceworkersから）。ここで、ページを更新すると (CTRL+R)、この Service Worker が原因ですべての POST に CORS の問題 ( Access-Control-Allow-Originヘッダーがない) があり、ユーザーはログイン ページにリダイレクトされます。これ以降、同じ理由ですべての POST が機能しなくなります。逆に、ログインしたら Service Worker の登録を解除してからリフレッシュ、まったく問題ありません。何が起こっているのか分かりますか？繰り返しますが、サービスワーカーはプッシュイベントを処理するだけで、キャッシュは行われず、他の処理は行われず、Chrome で完全に動作します。

これが私のService Workerコードです（ SOME_API_URL は、Service Workerの登録後に問題が発生するため、テスト目的では必要のない実際のAPIを指しています。プッシュイベントは必要ありません）

serviceWorkerRegistration.pushManager.subscribeServiceWorkerのメソッドを使用しているときに、作成された の文字列の末尾に「/undefined」endpointが含まれることがあります。

たとえば、Chrome ServiceWorker を介して:https://android.googleapis.com/gcm/send/xxx...xxx/undefined

私は有効なAndroid Sender IDを持っていると言わなければなりません。この余分な部分を削除すると、ユーザーにプッシュを送信できます。

最後になりましたが、この状況はChromeとFirefoxの両方のサブスクリプションで発生しています。

メッセージ付きのプッシュ (フェッチ経由) だけでなく、非表示のプッシュ (つまり、通知をまったく表示しない) を送信して、まだサブスクライブしているユーザーの数とプッシュの受信速度を確認したいと考えています。

このコードを試しました。動作しているように見えますが、一部のデバイスでは「このサイトはバックグラウンドで更新されました」というメッセージが表示され、混乱します。

ブラウザに何も表示されないようにするにはどうすればよいですか?

PushManager.getSubscription()

既存のプッシュ サブスクリプションを取得します。既存のサブスクリプションの詳細を含む PushSubscription オブジェクトに解決される Promise を返します。既存のサブスクリプションが存在しない場合、これは null 値に解決されます。

[...]

PushManager.subscribe()

プッシュ サービスにサブスクライブします。プッシュ サブスクリプションの詳細を含む PushSubscription オブジェクトに解決される Promise を返します。現在の Service Worker に既存のサブスクリプションがない場合は、新しいプッシュ サブスクリプションが作成されます。

pushManagerMDN のドキュメントによると。メソッドはほとんど同じですがgetSubcription()、null 値で解決される可能性がある点が異なります。

私は基本的に、単に使用できることを理解してsubscribe()おり、Service Worker は利用可能な場合はサブスクリプションを取得しようとし、利用できない場合は新しいサブスクリプションを作成します。

=>しかし、私は別のことをしようとしていました。nullI will tr​​y to subscribe itで解決した場合は、最初にサブスクリプションを取得してみます。

しかし、その後、エラーが発生しました：

Uncaught (in promise) DOMException: サブスクリプションが失敗しました - アクティブな Service Worker がありません

紛らわしいので、これが Service Worker の Push API での Chrome の制限であるか、バグである可能性があるのではないかと疑っています。この奇妙な振る舞いについて何か情報を持っている人はいますか?

私は Service Worker に不慣れで、それを学ぼうとしています。Service Workerを利用してプッシュ通知を実装しています。サーバー側でプッシュし、Web アプリケーションを開発する際のリファレンスとしてクライアント側で通知を受信するための簡単なデモ コードを探しています。提案は非常に役に立ちます。実装にはnode.jsを使用しています。

ありがとうございました。

次の HTML5 API の組み合わせを使用して実行できると主張するこのチュートリアルを見つけました。

• 通知 API
• サービスワーカー API
• プッシュ API

どうやらこれが機能するには 3 つすべてが必要ですが、caniuse で検索すると、3 つすべての API をサポートするモバイル ブラウザはないようです。これについて別の方法はありますか？

私は PushPad を統合し、それを静的な Push で動作させることができました。今、私はそれをいくつかのPHPおよびJavascript関数と組み合わせて動的にしたいと考えました。これが私のコードです：

一見すると、すべてが正常に機能します。初めてサイトにアクセスすると、「UID」アラートまでのすべてのアラートがポップアップ表示されます。次に、Chrome からプッシュ通知を受け入れるように求められます。許可をクリックすると、「登録済み」というアラートが表示されます。

ここでサイトを更新すると、「登録済み」アラートまですべてが繰り返されます (ただし、Chrome によるプッシュ通知を許可するよう求められることはもうありません)。以前に購読したことがあるので、「購読済み」というアラートが表示されるはずだと思っていましたが、そうではありません。

誰かが助けてくれれば幸いです:-)

この質問は、次の質問の結果です (コメント セクションを参照)。

PushPad: サイトの更新後に購読が削除されました

PushPad の使用に問題があります。プロジェクトを作成し、コードを実装しました。私の問題は、送信したプッシュ通知(デスクトップ版とモバイル版)が Chromeに表示されないことです。Firefox を使用すると、すべて正常に動作します。送信した瞬間に通知が表示されます。

しばらくして、Chrome 開発者ツール (リソース -> サービス ワーカー) で「プッシュ イベントのエミュレート」という機能を見つけました。このボタンをクリックすると、以前に送信したプッシュ通知が Chrome に表示されました。

では、プッシュ通知は PushPad によって送信され、受信されたように見えますが、Service Worker によってキューに入れられているかのように、自動的に表示されませんか? しかし、私の Web サイトのユーザーは、通知を受け取るために開発者コンソールにアクセスしてそのボタンをクリックする必要はありません (Firefox の場合のようにする必要があります)。

「プロジェクト ID」と「プロジェクト番号」 (Google プロジェクトから) をGCM Sender IDとして使用しようとしました。どちらも上記の問題を引き起こします。また、新しい API キーを生成し、プッシュパッド プロジェクトで変更しましたが、何も変更されませんでした。

Pushpad DEMOを使用して、公式の Pushpad-Homepage からデモ通知を送信すると、同じ問題が発生することにも気付きました。また、キューに入れられ、開発者コンソールでボタンを押したときにのみ表示されます。

2 台の異なる PC と Chrome を搭載した 1 台の Nexus 4 ですべてのテストを試しましたが、常に同じ問題です。

何か提案はありますか？おそらく (推測にすぎませんが) Pushpad が提供する Service Worker に何らかの問題があるのでしょうか (彼らの HP でも同様です)。