Reduxサービス勤務者へのアクセス方法

Question

私はReact、Redux、およびサービスワーカーを自分のアプリケーションで使用しており、サービスワーカーのReduxストアにアクセスしたいと考えています。

マイサービスワーカーは次のとおりです。

function checkCompatibility() { 
    if ('serviceWorker' in navigator && 'PushManager' in window) { 
    console.log('Service Worker and Push is supported'); 

    navigator.serviceWorker.register('./sw.js') 
    .then(function (swReg) { 
     console.log('Service Worker is registered', swReg); 
    }) 
    .catch(function (error) { 
     console.error('Service Worker Error', error); 
    }); 
    } else { 
    console.warn('Push messaging is not supported'); 
    } 
} 

function askForNotification() { 
    if (!('Notification' in window)) { 
    console.log('This browser does not support desktop notification'); 
    } else if (Notification.permission === 'granted') { 
    console.log('Permission granted.'); 
    } else if (Notification.permission !== 'denied' || Notification.permission === 'default') { 
    Notification.requestPermission(function (permission) { 
     if (permission === 'granted') { 
     var notification = new Notification('Permissão de Notificação foi Aceita', { icon: '/favicon.png', badge: '/favicon.png' }); 
     } 
    }); 
    } 
} 

checkCompatibility(); 
askForNotification(); 

誰も私を助けることができますか？

Answer 1

サービスワーカーは、WebワーカーAPIの上に構築されます。 MDN documentation on Web Workersによると：

労働者は現在のウィンドウ

異なる別のグローバルコンテキストで実行すると、このようにサービスワーカーは、あなたのReduxのコードと異なる範囲です。

ただし、postMessage APIを使用して、メインアプリケーションコードとサービスワーカーの間で通信し、必要なデータをこのチャネル経由でReduxから渡すことができます。

インスピレーションのためにコードサンプルhereを見てください。

Answer 2

私の問題を解決したPush.jsが見つかりました。

プッシュ通知をインポートして送信するために使用します。

NPM APIのように、あなたは常に通信を行うためにserviceworkerで扱うエンドポイントを持つことができることを覚えておいてください、また--save push.js

import push from 'push.js' 

push.create('Hello World!', { 
    body: `${your-react-or-redux-var}`, 
});