App Inventor has a component called WebViewer. We can load a webpage/website into an app using WebViewer component. To do that, we can just drag the WebViewer component to Screen1 window and set the HomeUrl property of the WebViewer to the webpage we want to view when the app boots up. Note that including a network protocol such as http or https is important, otherwise, the webpage won’t load. If you try www.google.com, it won’t work, but http://www.google.com will work. For our sample app, we will have a text box where a user can specify a URL and press Go button to load the webpage. We will also have previous and next buttons to navigate through pages.
This is how our app would look like-
We can set the HomeUrl either on the viewer/designer window or on the blocks editor. If you’ve taken a look at the blocks snapshot below, we have set the HomeUrl on the blocks editor under Screen1.Initialize event. There, we also set the previous and next buttons Enabled property to false. When a user taps on Go button, we first check if the URL in the text box contains http:// or https://, if it does, we simply load the webpage; if it doesn’t, we append http:// at the beginning of the specified URL and load. Since we were able to load a webpage, we set the previous button’s Enabled property to true. Note that if the text box is empty and user presses Go, the viewer will try to load http:// which obviously is not valid. You can always check if the text box is empty. If empty, don’t load anything. We didn’t here because we want to see the default behavior when a URL is invalid.
When previous button is pressed, we enable the next button since there’s a page we can forward to. We also check if any other pages we can go back to by using CanGoBack procedure of WebViewer component. We do the opposite when next button is pressed.
Download the source of this app CoolWebViewer.
Hardware Back Button Support
So far we have done ok. But, we can only go back by pressing Previous button, not using hardware back button. If we press device back button, app closes. Let’s modify the app. We are going to add another screen. Don’t worry we don’t need to do that. I am doing that because someone asked in the comment section below. First screen will only have a button that opens Screen2 if pressed and Screen2 will have the components we had in the app above. Let’s see what we mean-
Going to Screen2 is easy. On Screen1‘s Button1.Click event we do-
As you can see, we only opened Screen2. open another screen block can be found under Control drawer on Blocks window. We have to modify what we did in our first app above to achieve the functionality we want. Let’s take a look at the complete blocks view on Screen2-
It’s very similar to what we did in our first app above. Changes are – we created a procedure named GoBack so that both PrevButton.Click and Screen2.BackPressed can use it. The only thing you need to pay attention to is Screen2.BackPressed event. We first check if there’s a page to go back to, if we do, we call GoBack procedure. If none, we close the current screen. Hence, we are going to the previous screen as we didn’t close Screen1.
You can Download the modified verion of the app – WebViewerWithScreens.
Thank you very much for your tutorials, it helps a dummy like me to learn and understand the program better. I tried the example above, it works on some sites well but when I go http://www.everythingessential.me I get a zoom effect of the website. Is there any way I can work around this? And how do I change the font size of the website in my screen? I have been looking everywhere for an example or tutorial for this, but have not found it yet. Please help. Thank you.
This should be handled by the website in question. When a webserver receives a request from a mobile device, they can serve a mobile friendly version. For example, you can try viewing this site on a mobile browser and you will see a stream down version of the site. WebViewer component just views the page you request, nothing more.
I have a similar issue and it doesn’t seem like it is the website. Just to test, I created an image with pixel markers every 100px where the size of the whole image is 800x900px and my phone resolution is 1280×720. When I set the URL just to the image (no html) it shows only about 320x550px and there is no way to zoom out to see the whole image. When I open the same URL in the standard Android browser on the same phone, I see the whole image and more, as one would expect.
You might want to report an issue if it is the case-
https://code.google.com/p/app-inventor-for-android/wiki/ReportingBugs?tm=3
Is there a fix for this issue yet? Thx
Hi,
My question is when i am doing drag and drop in viewer then how it create json file automatically and also making some methods in backend like where the souce code is import can u please help me.
Hey I want anything Type text box like mp3 songs. videos not like http://mp3.com It Is Possible But How? Please Tell me
Thanks for the explanation Sajal Dutta, really appreciate it very much.
Hi,Mr.Sajal. i’m nubie in app inventor. Is it possible to send or receive data using webviewer? By the way, how can i make a facebook login using app inventor? Thank you 4 ur attention and answers..
No facebook SDK integration with App Inventor as of the moment. WebViewer as the name implies, displays a web page. For your needs, take a look at Web component. http://beta.appinventor.mit.edu/learn/reference/components/other.html#Web
Hi Mr.Sajal,
i’ve read ur post on Web Component – JSON Response On App Inventor. There is an url for the web component, the we can receive the JSON respond and we can decode for our needs in app inventor. To make a facebook login, in my app, what/where is the url ?
Thank you 4 ur kind attention.
I am afraid you cannot do facebook integration with App Inventor as of the moment.
Hi Sajal,
I have created an app with 2 screens, 1st as a welcome screen and when visitor clicks a button 2nd screen loads where I have put the webviewer option and mh website opens. But when I press back button on website, it sends me back to 1st screen and not on the earlier page. How can I solve this issue?
Thank you
I extended the tutorial above and added “Hardware Back Button Support”.
Hi Mr.Sajal,
Can we get Web view Current Url by
Set global variable to Web view Current Url ?
When i try it, it returns empty string.
Or should i use Set Textbox text to retrieve the value of Web View Current Url?
Thank you
See the second section above (Hardware Back Button Support). On NextButton.Click event and GoBack procedure, I setup text box’s text with the current url.
Dear, I can not able to view youtube videos from the webviewer, any recommendation you can give me? Thank you
It’s a known issue: https://code.google.com/p/app-inventor-for-android/issues/detail?id=2294
hi. i want to be able to choose an image from the Internet and put that image into another screen. is this possible and how?
You just need to use the url of the image as the picture source as an instance.
Hi there Mr Sajal. How can i mask an image that i get from the internet with some coloyred blocks that wen clicked will disappear???
Try using a semi transparent color rectangle as the same as the picture you have and put it on top of the image from blocks window.
Hi Mr. Sajal.I was thinking of making a web browser which could read the text on it.But I am unable to get the text.How can I extract the text from a web page to speak using Text To Speech???
Plz help me.
You should read – https://imagnity.com/tutorials/app-inventor/web-component-json-response-on-app-inventor/
Also, read on “HtmlTextDecode” at http://ai2.appinventor.mit.edu/reference/components/connectivity.html#Web
thanks a lot…
Hi Sajal,
Actually I have two questions. First: I’m trying to build an app for a school, where there’s a class schedule (days and subjects of the day for each classroom), I could create a screen for every day and every classroom, but there would be too many screens. How can I use tinyDB component to make it easier?
Second: When click a link in the webviewer the goback button isn’t enabled.
Thanks in advance.
This might help – http://ai2.appinventor.mit.edu/reference/other/tinywebdb.html
Buon giorno
quando utilizzo web viewer insieme alla pagina nel diplay appare anche il pulsantino di zoom
Posso eliminarlo?
Se si, come faccio?
I have a web with html 5 and h264 videos. All runs perfect with web viewer except to play the videos. Do you know if i can do anythink to solve this?
Thanks
Are those videos playable on pre-loaded phone browser (e.g. Chrome)?
Hi Sajal,
I’ve a question regarding using webviewer in AppInventor.
Is there a way to display the latest url, after the user has clicked other link and opened other webpage than the original webpage that was opened by key-in the UrlTextBox?
Thanks in advance.
Use WebViewer1.CurrentUrl
Hi Sajal
From this tutorial it seems you first developed screen2 and then added screen1. If so, how did you change in App Inventor the Start Screen; i.e. the screen displayed when you open the app?
Thank you in advance
Hi again
Just as a clarification of my question… I mean if you first develop CoolWebViewer screen logic and then add to the project Screen1 logic (renaming CoolWebViewer screen as Screen2), does App Inventor allow to switch Start Screen from CoolWebViewer/Screen2 to Screen1?
BR
First screen is always Screen1 which is your start screen. You can always go from one to another.
Can you explain how to add the id or the words in the link that has been set by the two text boxes and can be displayed via the web viewer?
example:
http://www.example.com/cek.html?id=xxxx&reff=xxx
xxx I want to specify and can be opened with a web viewer
Use Text component’s join block. Check how I built Webfetch.URL using join-
https://imagnity.com/wp-content/uploads/2013/03/WebComponent-JSON-ResponseBlocks-GetData.png
Can you integrate a recipe api with app inventor
This is terrific!
I spent a lot of time checking out “create your own app” options before stumbling across AppInventor (which I wish had happened first).
I have two questions – 1: would it be possible to have the previous/next navigation buttons overlap the web viewer? I have round, semi-transparent icons that I’d love to put in the upper left and right corners.
2: is it possible to have the web-viewer default to a “zoomed-out” mode? I’ve deleted the URL entry part of your sample and used the web-viewer to display a WordPress site. The main page of my theme displays perfectly, but the links (to posts) display zoomed in first. They can be zoomed out – is there a way to make that default?
Before you refer to this maybe being a theme issue, let me say that one of the aforementioned “make-your-own-app” gizmos I tried (don’t ask which one – none of them worked for me so I disregarded each one) displayed the linked pages as “optimized-for-mobile” …meaning the largest elements were zoomed out to fit the screen.
Is it possible to have pages display that way?
1. No. You cannot drag button over web viewer as web viewer is not a container of buttons.
2. Unfortunately you cannot. There’re no properties to manipulate how contents are displayed in the viewer. We are limited to – http://ai2.appinventor.mit.edu/reference/components/userinterface.html#WebViewer
Argh, that is frustrating. When I view the page on my S4’s native browser (not Chrome) it formats the pages perfectly. It’s a wordpress.com site with a responsive ‘optimized for mobile’ theme. Chrome (and some other browsers) show the page zoomed to the first column of text.
Thanks for the reply; looks like I’m going to have to make a suggestion for the developers.
i have a question that i already use app using MIT app inventor2
but i want to know that my website(URL) has some downloading link..
but in web view of android app i can’t download that file directly…
no feedback to follow that URL..
can this Resolved?????
If you open your url on your phone using Chrome/Browser, can you download it?
i am pulling data from a fusion table. I have a data column called URL. How do I make a button that appears and is clickable to load the URL that is part of the data row…for example, city, category, restaurant, url. I have all the other parts build except the url button part.
You should be able to create your custom UI using a text field column showing URLs, another column that says ‘Visit’ to visit the URL.
Hi,
Just would like to check. I already create the the apps using webviewer to my website. I manage to point it to my website. in my website I have few fields for me to input some data.
I manage to input all the text field but when it comes to the image field, the browse button on my website didn’t work. therefor I am not able to upload or capture image from mobile. the browse button doesn’t seem to work.
Appriciate your help on how I can solve this issue.
regards,
Ohs
This sounds like a bug. Can you please file an issue on app inventor site?
Hi,
Is it possible to have an offline map with specific pins in order to zoom in or zoom out, or we have to make it differently as with an image?
For now, no.
Hi Sajal, I made a media app when I use a button that I Rename to (GOBack)from Screen2 to Screen1.
When I use webviewer1 to open the video from youtube It’s work.
BUT the problem when I Press Button Goback to (Screen1) the Sound doesn’t stop it’s still works while I’m in the Screen1.
thankyou
Hi Sajal
I made a media app and use two screen when I’m in the screen2 and the WebViewer is work from youtube or any video or sound website .
BUT when I press the button Goback tho return from the screen2 to screen1 It’s return to the screen1 with the sound .
How Can I Solve This Problem????
thank you
This seems like a bug in app inventor as the screen goes to background for a while and waits for android to decide what to do with it. Please report it to the forum- https://groups.google.com/forum/#!categories/mitappinventortest/specific-programming-issue
Is it possible to use webviewer to browse localhost and have your app essentially browser a website that is all locally stored on the phone? Using something like Palapa webserver?
As long as you can load using normal browser in device, yes it should be possible.
Hi Sajal ,
I have created an app with the Web Viewer. The site which shows the Webviewer has a link that includes a phone number. In the browser on my phone he sees the link as a phone number , but the Webviewer sees the link as a website. How can I ensure that the Webviewer sees the link as a phone number.
This seems like an enhancement to be done on AI web viewer component. You can report it to the AI forum. http://tinyurl.com/ai2forum
I have a webviewer page that allows for URL input and navigation. I have my back and forward buttons enabled to false and a predefined website loading in the webviewer when the page initialises. What I would like to do is have my back button enable if you go to a link within the website and also display that link in the text box I have for the URL.
Is this at all possible? I ask a this would make it feel more like being on a full web browser like Chrome.
Yes, it’s possible. Say your predefined website is google.com. If you want to enable only links within google.com, you can just check if the url they are trying to go back to or forward to contains google.com or the like domains/subdomains.
How can I zoom a image in a buttom.
Basically I want set a image in screen 1, which can be zoomed without using url
Hello sir, how to add my admod on the app. Thanks
Using official version, you cannot. You can take a look at this build- https://amerkashi.wordpress.com/2013/09/15/admob-in-ailivecomplete/
Hi Sajal,
I’ve tried your tutorial to my app. I have a question to you,
How to run Javascript that include in my web can run on webviewer app?
cause some command in my website can’t run properly when I open to these app.
Many thanks.
Unfortunately, JS is limited on AI2’s web viewer. Read this thread: https://groups.google.com/forum/#!msg/mitappinventortest/0XhEz_YDTB4/pC-T7DyJgfgJ
Dear Sajal:
How to get the webview action response as your first sample?
When user press the hyperlink or button of webview content of first sample, then program well go on next screen with the hyperlink or buuton click.
Thanks for your help.
sincerely
yzu1612a
Use ‘open another screen with start value’ block and pass the url link as the value. This covers this: https://imagnity.com/tutorials/app-inventor/list-view-on-app-inventor/
how do I add animation or text while opening a web page.
You can use a Notifier to show a text message. You can use a tiny canvas (e.g. a canvas with 100% width and 10% height) at the bottom to show animation.
Thanks brother, I managed to insert a text notification on my app , but for a loading animation still appear even if the web already performed. sorry for my bad english.. 🙂
Hide the canvas (Visible = false) when ‘CurrentPageTitle’ is not empty and not the same as the previous one or use a Clock and after some seconds, hide the canvas and deactivate the Clock.
Hi My client wishes to havean iOS and Android app when opened it directs to their corporate web site(it is responsive). I believe above is the way to do it? aslo for these type of app can we still have it in app store? I wonder if they will still allow in app store as the app it self is only a outer shell to go to website? can you please advise us?
App Inventor is only for Android. And yes, that’s the way to do it.
Dear Sajal Dutta,
I am going to make an app that sends text and pictures to a web server. Is it possible with App Inventor?
Could you tell me briefly the steps I should do.
THank you so much.
Check this out: http://puravidaapps.com/postfile.php
Hello, Please Do not show the address page on the WebViewer training when not connected to the Internet to tell.
You can remove the text box if you don’t want to show the url.
Not when no Internet Example:
http://velait.persiangig.com/picc/DSC_1116.jpg
Like when you disconnect the message and the page is not displayed.
Help me please….
This will be a bit tricky. What you can do is check if internet connection exists first before you load a url. If no internet, then don’t load any url. To check internet connection, use this tutorial- https://imagnity.com/tutorials/app-inventor/check-internet-connection-in-app-inventor/
Thanks very much my problem was resolved, thanks
hi Sajal dear
Please help me, if it is possible to build a project on the Web Weaver show that when you disconnect another message
Yes, use a notifier to show a message.
Hi thanks for help
Do not show problems of general hardware application menu like example:
about this application
Help me please. Thank
Your post is very effective. Thank you for sharing a good post and knowledge
Hello , I have an application in html5 , jQuery , Bootstrap and php ..
The mistake is in trying to load a local image to the site , he did not open the gallery to choose the photo .
How can I fix this?
Recalling that on my block only has Screen1 inicializer and BackPressed …
Sorry a typo , I’m using google translator
Did you read this – http://appinventor.mit.edu/explore/ai2/concepts/images-and-sounds.html
Hi,
I’m trying to use the web viewer to insert a widget into my app. I have the embed code of the widget in the form of an html. However, I don’t know how to format the Home URL so that it would link to the widget properly.
I tried this:
” :file:///android_asset/index.html” but it didn’t work.
I would appreciate it if you could advise me on that.
Thanks,
Maybe look at this: http://puravidaapps.com/pick.php
I am trying to make a screen that you can type in your employee work id number and it will retrieve and save the QR Code using googles api. I can get it to retrieve the Qr Code but can’t figure out how to save the Qr Code that is named Chart.jpg. Any suggestions…
Maybe this – http://puravidaapps.com/snippets.php#2canvassave
Hi Sajal
I am trying to get app inventor to load an external html5 file with this path:
file:///mnt/sdcard/readmp3withJavaScript01.html
but fails – saying file not found. The file is actually there when I use a file manager on my phone.
Is my path missing something?…
Dear Sajal
Thanks so much for the tutorial and the support you have been giving.
My question was about downloading photos and songs using appinventor2 webviewer.
Their website says “App Inventor doesn’t (yet) include any way to store files on the SD card. It also doesn’t (yet) include a way to list the files on the SDCard. You’ll have to use other applications or the Android phone file manager for that.”
So is there are way to call another application/file manager to store stuff coming through the webviewer?
thanks
See some examples here:
http://puravidaapps.com/save.php
http://puravidaapps.com/pick.php
Hi…how to control ptz ip camera using appinventor app like pan tilt ..zoom
Your phone camera’s behavior has nothing to do with AI2. Can you please explain what you are trying to do?
i didn’t see that is able to use cellular service, is it only for wifi?
hii…how can we send a serial data via Bluetooth till we press the button..and stop sending as soon as the button is unpressed?
Hi Sajal
Wow! a very nice tutorial. Thanks a lot.
Hi Sajal,
Am very greatfull for that well illustrated tutorial.
I am glad you learned something from the tutorial!
Hi.. Need your help.
I am opening a website using webiewer, but when the site opens it does in a desktop version with zoom button, but when I open same site in web browser I get a mobile version of the site. It suggests that website is not able to recognize that request is coming from a mobile device. What can be done ?
ur browser doesn’t support youtube video what is the solution for that
Dear Sawal,
I made an app using appinvent. The app uses Web viewer to fetch my website and display it. But when I tested it, it was working but was responding very slow when ever I tried scrolling the page or pressing next or previous buttons. What could be the possible causes.
i want to add a loading bar. how can i make it
trying to make a browser
hi sajal,
i saw you replied everyone.you are doing great!
MY QUESTION IS- I HAVE SOME DOWNLOAD LINKS ON MY URL,THAT LINKED INTO WEBVIEWER. BUT WHEN I CLICK ON DOWNLOAD LINK THROUGH MIT APP,NOTHING HAPPENS.
CAN IT BE SOLVED?
me too have the same issue
I see you don’t monetize your blog, don’t waste your traffic, you can earn additional bucks every month because you’ve got hi quality
content. If you want to know how to make extra bucks, search for: Mertiso’s
tips best adsense alternative
My web pages display it without problems. If I click on something on the website, for example: a registration, then he does not load the next URL independently.
Tanks very much please help me Im beginner and I want you to show me with a blocks how to call 3 fils audio stored ii media fire to my app player in inventor 2 dont forget me please I’m blocked
No page display.
I want to paste to a web pages textbox any value from app inv 2. I opening web page but i cant paste to web page’s textbox. Can i paste any value from app inv 2 to a textbox of a web page.
Very nice
I have created an app with chat and when i open the app with my phone i can see the chatroom but not to communicate with others.
Is there any optionblocked by mobile’s browser?
Nice app, I tried my website to app, But only issue i m facing is, it get logged out when completely close my app. Means every time, one need to login in app.
Kindly suggest solution.. so that it can be kept logged in app.
How can i save or read HTML cod, which was opened in WebViewer and was receive data? Thanks a lot in advance.
Commentapp inventor, web viewer downloads from microcontroller html page – question – where to find this html code on my phone?
how to mobile back button close drawer in InAppWebView in flutter