Internet Connection lost handelling in webview

Vega Open Beta Q&A
1

App Name: FOxOne
App Link on Amazon Appstore

Hi @Moses @Richa
Can we get a way forward to detect the internet connection lost handelling support in webview ,

Currently when the internet gets lost we see
WebPage not Available error messege

We want it to handle graecfully without reloading the entire the webapp running behind the webview.

https://community.amazondeveloper.com/t/how-to-capture-internet-connection-lost-events/2482/14

3

Hello @amit

Thank you for writing.
Let me discuss this and get back to you.

Warm regards,
Ivy

4

Hey @amit

Thank you for your patience.
You can try something like this in your component NetInfoWebViewExample.tsx

import {WebView} from '@amazon-devices/webview';
import React, {useEffect, useRef} from 'react';
import {View} from 'react-native';
import {useNetInfo} from '@amazon-devices/keplerscript-netmgr-lib';

export const NetInfoWebViewExample = () => {
  const webRef = useRef(null);
  const {isConnected, isInternetReachable} = useNetInfo();

  useEffect(() => {
    webRef.current?.injectJavaScript(`
      window.dispatchEvent(new CustomEvent('nativeNetworkStatus', {
        detail: { isConnected: ${!!isConnected}, isInternetReachable: ${!!isInternetReachable} }
      }));
    `);
  }, [isConnected, isInternetReachable]);

  return (
    <View style={{flex: 1}}>
      <WebView
        ref={webRef}
        javaScriptEnabled
        source={{uri: 'https://www.example.com'}}
      />
    </View>
  );
};

And then in the website, you would need something to handle it (which I’m assuming you already have):

window.addEventListener('nativeNetworkStatus', function (e) {
  var isConnected = e.detail.isConnected;
  var isInternetReachable = e.detail.isInternetReachable;

  if (!isConnected || !isInternetReachable) {
    // handle offline
  } else {
    // handle online
  }
});

Please give it a try and let me know if it worked.

Warm regards,
Ivy

6

Hi @amit ,

Please let us know if the above mentioned workaround works for you.

Thanks,
Rohit