How to do I make sure that socket.io does not close connections when the app is in background in a Angular PWA

Question

socket.on('new-notification', function(data) {

  let room_id = data.room_id;
  var receiver_id = data.receiver_id;
  var booking_request_id = data.booking_request_id;
  var message = {
    to: notification_payload,
    collapse_key: 'green',

    notification: {
      title: 'Tittle',
      body: "New message from  User",
      icon: site_url + 'assets/icons/icon- 72x72.png',
      sound: 'default',
      url: redirect_url,
    },
    data: {
      title: 'Tittle',
      body: "New message from  User",
      icon: site_url + 'assets/icons/icon- 72x72.png',
      sound: 'default',
      url: redirect_url,
    }
  };

  fcm.send(message, function(err, response) {
    if (err) {
      console.log("Something has gone wrong!");
    } else {
      console.log("Successfully sent with response: ", response);
    }
  });
}
});
}
else {

}
}
});
});

I have an Angular PWA that is using Socket.io Node and express server for real time messaging and push notifications using Firebase Cloud Messaging. Messaging works fine but the problem is that when ever the user goes out of the app they won't be able to receive notifications but only receive when actively on the app. My assumption is that Socket io is disconnecting when the user leaves the app. So is there any way to make sure that socket remains active even if the app is running in the background. i have attached my notification snippet. Your help will be greatly appreciated

Answer 1

To do this, you will need to set up a service worker for Angular, these run and keep your app alive to do certain tasks when the device would normally put apps into sleep mode.

you can follow the latest Angular documentation on creating service workers HERE