fix(webapp): api delStream keeplive

webapp/components/layout.tsx

@@ -50,9 +50,19 @@ export default function Layout(props: { meetingId: string }) {
     const cleanup = () => {
       delStream(props.meetingId, localStreamId)
     }
-    // Need to set separate Browser Events Parameters for Firefox refresh and browser termination
-    window.addEventListener('beforeunload', cleanup) // Used to monitor the browser termination of Firefox event
-    window.addEventListener('unload', cleanup) // Used to monitor Firefox refresh event
+    // NOTE:
+    // https://github.com/binbat/woom/pull/27
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
+    // `unload` event is Deprecated, But Firefox need `unload`
+    //
+    // event                        | Chrome                    | Firefox                   | Safari
+    // ---------------------------- | ------------------------- | ------------------------- | -----
+    // `beforeunload`               | ok                        | console error, no request | console error, request ok
+    // `unload`                     | console error, no request | ok                        | console no request log, no request
+    // `beforeunload` + `keepalive` | ok                        | console error, no request | console error, request ok
+    // `unload` +  `keepalive`      | console error, request ok | ok                        | console no request log, request ok
+    window.addEventListener('beforeunload', cleanup)
+    window.addEventListener('unload', cleanup)
     return () => {
       window.removeEventListener('beforeunload', cleanup)
       window.removeEventListener('unload', cleanup)

webapp/lib/api.ts

@@ -114,6 +114,7 @@ async function delStream(roomId: string, streamId: string): Promise<any> {
       'Authorization': `Bearer ${token}`,
     },
     method: 'DELETE',
+    keepalive: true,
   })
 }