Check internet connection - The better way to create an app for any website

webviewer
solved
beginner
internet
connection

#1

This is a tutorial about checking the internet connection of a device (Scroll down for the solution)
Advantages:

  1. Can detect a webpage is still loading
  2. Check network connection.
    3.A meaningful method where the view of the screen is moderated based on the network available.

The Extension used:WebviewTools extension by LukeGackle - You can find the extension here - https://thunkableblocks.blogspot.com/2017/06/webviewtools-extension-for-app-inventor.html?m=1

_You can have a look at what we are going to create by watching the below video: _

The problem when the internet connection is not available is that the web viewer displays an ugly message, which shows the user that the app was actually loading a URL in a browser. But, we want the app to be different and do not want the user to understand that we were actually loading a URL. Below you can see the difference between (google play store, youtube ) and a web viewer app built with app inventor when the internet connection is not available.


So, clearly, by now you should understand that we need a mechanism by which we can hide that ugly error message and replace it with a beautiful image or text as in google play store or youtube app. And to do so please watch the complete video posted below.

Solution:


In this long video, I have patiently described how you can replace an ugly error message due to no internet connection of web viewer component with the one you like. It may be an image, text or animation.
The concept is very simple but, in order to help even those who do not know anything regarding Thunkable or Appybuilder or App inventor, everything has been explained in detail.
Be patient and watch the complete video.

When cannot connect to the internet click the button show notification and when connect to the internet click the button another screen is not open
Webview try again button internet connect and no internet connection background images add
How to show no internet connection on app