アプリケーションがバックグラウンドのときにWeb Appユーザーインターフェイスを更新するFCM

Question

FCMを使用して通知を処理していますが、WebアプリケーションがバックグラウンドのときにUIを更新する必要があるまで機能します。

1. 私の最初の質問は次のとおりです。（ユーザーがWebアプリケーションに焦点を当てていない場合）には、そうであれば、どのように、第二に

2. サービスワーカーによるバックグラウンドで私のWebアプリのUIを更新することが可能です？私はいくつかのことを試して、それが動作していない、明らかに何か間違っていると働くので、私のWebアプリケーションはフォアグラウンドにあります。私は間違って何をしていますか？

マイコードは以下のとおりです。ペイロードを受けた私のメインのJavaScriptファイルでは、

my-firebase-service-sw.js

// [START initialize_firebase_in_sw] 
// Give the service worker access to Firebase Messaging. 
// Note that you can only use Firebase Messaging here, other Firebase 
libraries 
// are not available in the service worker. 
importScripts('https://www.gstatic.com/firebasejs/4.1.1/firebase-app.js'); 
importScripts('https://www.gstatic.com/firebasejs/4.1.1/firebase-messaging.js'); 


// My Custom Service Worker Codes 
var CACHE_NAME = 'assembly-v0.1.3.1'; 
var urlsToCache = [ 
    '/', 
    'lib/vendors/bower_components/animate.css/animate.min.css', 
    'lib/vendors/bower_components/sweetalert/dist/sweetalert.css', 
    'lib/css/app_1.min.css', 
    'lib/css/app_2.min.css', 
    'lib/css/design.css' 
]; 
var myserviceWorker; 
var servicePort; 


// Install Service Worker 
self.addEventListener('install', function (event) { 
    console.log('installing...'); 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
    .then(function (cache) { 
    console.log('Opened cache'); 
    return cache.addAll(urlsToCache); 
    }) 
    ); 
    console.log('installed...'); 
}); 

    // Service Worker Active 
    self.addEventListener('activate', function (event) { 
    console.log('activated!'); 
    // here you can run cache management 
    var cacheWhitelist = [CACHE_NAME]; 

    event.waitUntil(
    caches.keys().then(function (cacheNames) { 
     return Promise.all(
     cacheNames.map(function (cacheName) { 
      if (cacheWhitelist.indexOf(cacheName) === -1) { 
      return caches.delete(cacheName); 
      } 
     }) 
    ); 
    }) 
); 
}); 


self.addEventListener('fetch', function (event) { 
    event.respondWith(
    caches.match(event.request) 
     .then(function (response) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 

     // IMPORTANT: Clone the request. A request is a stream and 
     // can only be consumed once. Since we are consuming this 
     // once by cache and once by the browser for fetch, we need 
     // to clone the response. 
     var fetchRequest = event.request.clone(); 

     return fetch(fetchRequest).then(
      function (response) { 
      // Check if we received a valid response 
      if (!response || response.status !== 200 || response.type !== 'basic') { 
       return response; 
      } 

     // IMPORTANT: Clone the response. A response is a stream 
     // and because we want the browser to consume the response 
     // as well as the cache consuming the response, we need 
     // to clone it so we have two streams. 
     var responseToCache = response.clone(); 

     caches.open(CACHE_NAME) 
      .then(function (cache) { 
      cache.put(event.request, responseToCache); 
      }); 

     return response; 
     } 
    ); 
    }) 
); 
}); 

self.addEventListener('message', function (event) { 
    console.log("SW Received Message: " + event.data); 
    // servicePort = event; 
    event.ports[0].postMessage("SW Replying Test Testing 4567!"); 
}); 

myserviceWorker = self; 


// Initialize the Firebase app in the service worker by passing in the 
// messagingSenderId. 
firebase.initializeApp({ 
    'messagingSenderId': '393093818386' 
}); 

// Retrieve an instance of Firebase Messaging so that it can handle background 
// messages. 
const messaging = firebase.messaging(); 
// [END initialize_firebase_in_sw] 

// If you would like to customize notifications that are received in the 
// background (Web app is closed or not in browser focus) then you should 
// implement this optional method. 
// [START background_handler] 
messaging.setBackgroundMessageHandler(function (payload) { 
    console.log('[firebase-messaging-sw.js] Received background message ', payload); 
// Customize notification here 
// send to client 
console.log('Sending data to notification'); 
try { 
     myserviceWorker.clients.matchAll().then(function (clients) { 
     clients.forEach(function (client) { 
     console.log('sending to client ' + client); 
     client.postMessage({ 
      "msg": "401", 
      "dta": payload.data 
     }); 
    }) 
    }); 
} catch (e) { 
    console.log(e); 
} 
const notificationTitle = payload.data.title;; 
const notificationOptions = { 
    body: payload.data.body, 
    icon: payload.data.icon, 
    click_action: "value" 
}; 

return self.registration.showNotification(notificationTitle, 
notificationOptions); 
}); 
// [END background_handler] 

。アプリケーションがフォアグラウンドにあるときに受信します。私の大きな関心事と問題は、アプリケーションがバックグラウンドにあるときにペイロードを受け取ることです。フォアグラウンド上のすべてのアクティビティは正常に動作します。

Answer 1

あなたのウェブサイトが開かれているがフォーカスが外れていても、UIを更新することは可能です。
すべてのクライアントリストを取得すると有効化オプションincludeUncontrolledを追加するだけです。
例：あなたのメインページで

messaging.setBackgroundMessageHandler(function (payload) { 
    console.log('[firebase-messaging-sw.js] Received background message ', payload); 
    self.clients.matchAll({includeUncontrolled: true}).then(function (clients) { 
     console.log(clients); 
     //you can see your main window client in this list. 
     clients.forEach(function(client) { 
      client.postMessage('YOUR_MESSAGE_HERE'); 
     }) 
    }) 
}); 

、単にサービスワーカーからのメッセージのリスナーを追加します。
例：

navigator.serviceWorker.addEventListener('message', function (event) { 
    console.log('event listener', event); 
}); 

詳細はClients.matchAll()を参照してください。