web-Push
モジュールとangular service worker
を使用して通知サブスクリプションをプッシュしたい。私はこれらのリンクからの指示に従いました: Angular Push Notifications:a Complete Step-by-Step Guide and Push Notifications with Angular&Express =まだ通知プロンプトが正しく表示されませんでした。swPush
オブジェクトを確認したところ、有効になっていないことがわかりました。また、angular/pwa
のインストール手順を正確に実行したのに理由がわかりませんそれらのリンクが言ったように、ここで誰かが助けてくれることを願っています。どうもありがとう!
アプリケーションは、http-server
モジュールではなく、独自のNodejs
サーバーで実行します。
ここに私のプッシュサブスクリプションコードがあります:
readonly VAPID_PUBLIC_KEY =
'BIfDkegCvhzctX06rYvwQImhbfAymWYE3wtcog9E4Zj7LOgX6TQFS6fZSqLCt01zBZtc1-jSwpZrZEmTQ2i95V8'; // key generated with web-Push
constructor(
private user: UserService,
private httpClient: HttpClient,
private router: Router,
private auth: AuthService,
private swPush: SwPush
) {
this.swPush.requestSubscription({
serverPublicKey: this.VAPID_PUBLIC_KEY
})
.then(subcription => {
console.log('Send ' + subcription + ' to server');
})
.catch(console.error);
}
返されたエラー:
エラー:サービスワーカーが無効になっているか、このブラウザーではSwPush.Push ../ node_modules/@angular/service-worker/fesm5/service-worker.js.SwPush.requestSubscription(service-worker.js:146)at new DashboardComponent(dashboard.component.ts:40)at createClass(core.js:9311)at createDirectiveInstance(core.js:9186)at createViewNodes(core.js:10406)at createRootView(core.js:10320)at callWithDebugContext(core .js:11351)ObjectFactory.debugCreateRootView [as createRootView](core.js:10838)at ComponentFactory_.Push ../ node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create(core.js:8666) ComponentFactoryBoundToModule.Push ../ node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create(core.js:3315)で
期待される結果:
このエラーは、Service Workerがng serve
で動作しないという理由により発生しました。 http-server
で実行すると、正常に動作します。 Angular service worker のように:
Ng serveはService Workerでは機能しないため、プロジェクトをローカルでテストするには、別のHTTPサーバーを使用する必要があります。任意のHTTPサーバーを使用できます