Using webview instead webbrowser from device

[Sho_Xx]

Hi

Unfortunately, I'm stuck here, perhaps someone can help me.
When I click a button, my app opens a compound link in the mobile device's installed browser. I want the links to open in an internal web view browser. The links only return a short line of text as a response. When I execute a link, a small window with the link response should open, which should close automatically after 5 seconds. It's important that I can also define the user agents. How do I put the blocks together so that a small web view window with the attached HTML code (as an example) is displayed?

Summary

Interner Browser * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }

    body {
        background: #2c3e50;
        color: #ecf0f1;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .header {
        background: #3498db;
        padding: 15px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    h1 {
        font-size: 1.4rem;
        font-weight: 500;
    }
    
    .browser-container {
        flex: 1;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }
    
    .browser-window {
        flex: 1;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        background: white;
    }
    
    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    
    .status {
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
        color: #bdc3c7;
    }
    
    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-direction: column;
    }
    
    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #3498db;
        animation: spin 1s ease-in-out infinite;
        margin-bottom: 15px;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    @media (max-width: 600px) {
        h1 {
            font-size: 1.2rem;
        }
        
        .browser-container {
            padding: 10px;
        }
    }
</style>

App Interner Browser

<div class="browser-container">
    <div class="browser-window">
        <iframe id="browserFrame" src="about:blank"></iframe>
    </div>
    <div class="status" id="statusText">Bereit</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const browserFrame = document.getElementById('browserFrame');
        const statusText = document.getElementById('statusText');
        
        // Moderner User-Agent für Android
        const userAgent = 'Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36';
        
        // Funktion zum Laden einer URL
        function loadUrl(url) {
            if (!url) return;
            
            statusText.textContent = "Lade Seite...";
            
            // Stelle sicher, dass die URL mit http:// oder https:// beginnt
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'https://' + url;
            }
            
            // Setze den User-Agent für die Anfrage
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.setRequestHeader('User-Agent', userAgent);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        // Erstelle ein Blob mit dem Inhalt und setze es als Quelle
                        const blob = new Blob([xhr.responseText], { type: 'text/html' });
                        const blobUrl = URL.createObjectURL(blob);
                        browserFrame.src = blobUrl;
                        statusText.textContent = "Geladen: " + url;
                    } else {
                        statusText.textContent = "Fehler beim Laden der Seite";
                    }
                }
            };
            xhr.send();
        }
        
        // Beispiel: Eine URL laden (kann durch App Inventor ersetzt werden)
        // In der Praxis würden Sie diese Zeile entfernen und die URL von App Inventor übergeben
        loadUrl("https://www.example.com");
    });
</script>

current composition of the blocks (works as it should)

Sorry for my bad English, many many thanks in advance for your help.

[TIMAI2]

WebViewExtra ?

You should target a webviewer:

[Sho_Xx]

Thx for fast reply, will take a look at webviewextra.

[TIMAI2]

You might also consider customwebview (which has more "features")

[Sho_Xx]

Okay, thank you very much for the help.
Unfortunately, I'm completely new to this topic. I first need to read up on the functions and how to put the blocks together. My app's internal browser should only display the response (text) from the link and provide support for changing the user agent. What extension do you recommend for this so I can delve deeper into this? Thanks.

i tryed:

that dosnt work, nothing happens

[TIMAI2]

Difficult to test/assist without the full url / html file.

[Sho_Xx]

Unfortunately, I don't have permission to post the original link, but the output is the same as the attached link (without the ad banner). I've tried many configs with "webviewextra" and "customwebview" since yesterday. I did manage to open my links successfully in an internal web view, but as a normal browser view. I just wanted a small centered window in the app that displays the output. Since this is my first App Inventor project, I'm only gradually learning the connections and composition of the blocks. I've attached a screenshot of a scaled-down version of my app. The length of the link output is the same for each button. As I said, I'd like a small centered window in the middle with the output "ok or false" that automatically closes after 5 seconds. What would be the easiest way to implement this? Does it make sense to create the web view window in a screen specifically designed for it, or what's the best way to proceed? I'm just learning by doing at the moment, so I'm very grateful for any help.

link response text example: http://jeremysu.rf.gd/

app small screen:

Summary

edit: I just saw the webviewextra guide on your linked page, also very informative, thanks for that.

[TIMAI2]

Do you mean something like this ?

okfalse.aia (12.3 KB)

You can set a clock timer to dismiss the window after 5 seconds.

[Sho_Xx]

many thanks for your help. will try it out today

[Sho_Xx]

After spending a few hours over the past few days familiarizing myself with the basics, the configuration wasn't that difficult in the end; the integrated web viewer plug-in was perfectly sufficient for my purposes.

(At least for now)

Thanks again to everyone for help.

[TIMAI2]

Integrated webviewer plugin?

[Sho_Xx]

yes the webviewer that comes with appinventor, not customwebview or something else...