WebSocketでブラウザをリロードせずにデータの受け渡しをしたい

実現したいこと

Socket.IOを利用し、WebSocketでデータを受信したらブラウザに通知を出すということを実現させたいです

現在できていること

サーバーとブラウザ間はSocket.IOを用いて接続することができました。
Push.jsを利用したブラウザ通知のテストも問題なく飛ばせている状態です

できていないこと

データをサーバー側から送信した際、ページをリロードすればブラウザ側で通知が出るのですがリロードしていない状態では通知が出ません。
どのようにすればリロードしていない状態で通知を飛ばせる(Socketのイベントを発火させる)ことができるかお教えいただけますと幸いです。

またページを閉じた状態で通知が出せるサイトなどもありますがそのようなサービスはどのようにして実現できるかもお分かりの方はお教えいただけますと幸いです。

よろしくお願いいたします。

ソースコード(クライアント側):

js
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>TEST</title>
6    </head>
7    <body>
8        <p>This is an example page.</p>
9        <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>
10        <script src="/socket.io/socket.io.js"></script>
11        <script>Push.Permission.request();</script>
12        <script>
13        const socket = io();
14        socket.on('msg', msg => {
15           console.log(msg)
16           Push.create("データが更新されました", {
17            body: msg,
18           });
19        });
20        </script>
21    </body>
22</html>