MAUI Blazor Hybrid App 'Twitter Timeline' Issue #14990

seanrco · 2023-05-09T04:09:37Z

seanrco
May 9, 2023

I am working on a MAUI Blazor Hybrid App and everything is going great, but we would like to include a Twitter Timeline on a page and running into an issue on iPhone iOS. When deploying to iOS Local Device the Twitter Timeline is launching in the external default browser and will not load directly in the app. See screenshots below:

Code Samples

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>MauiBlazorTwitterTest</title>
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="MauiBlazorTwitterTest.styles.css" rel="stylesheet" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <!-- Twitter Widget -->
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>

</html>

Index.razor:

@page "/"

<h1>Twitter Timeline</h1>
<p>Testing embedded Twitter timeline on MAUI Blazor Hybrid app iOS.</p>

<TwitterTimeline DataTweetLimit="2"></TwitterTimeline>

TwitterTimeline.razor:

@using Microsoft.JSInterop

@((MarkupString)"<a class=\"twitter-timeline\" href=\"https://twitter.com/dotnet?ref_src=twsrc%5Etfw\" data-tweet-limit=\"2\" data-chrome=\"noheader nofooter\">Tweets by TwitterDev</a>")

@code {

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    [Parameter]
    public string DataTweetLimit { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("twttr.widgets.load");
        }
    }
}

I have also setup a very basic app repo that reproduces the issue here:

https://github.com/seanrco/maui-blazor-hybrid-twitter-timeline

This is currently the main issue gating release of the app and any help tracking down this issue would really be appreciated!

Answered by crui3er

May 17, 2023

On Main page you can subscribe to blazorWebView.UrlLoading event and there define loading strategy.

_blazorWebView.UrlLoading += OnUrlLoading;
private void OnUrlLoading(object? sender, UrlLoadingEventArgs eventArgs)
{
    eventArgs.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
}

By default, it opens in webview only urls that belong to host '0.0.0.0' (hybrid blazor host).

View full answer

Xyncgas · 2023-05-09T10:56:22Z

Xyncgas
May 9, 2023

Probably because IOS opens a new tab instead of showing directly in app, there's probably some parameter to configure on IOS platoform

1 reply

seanrco May 9, 2023
Author

That is my guess as well, but not sure what the parameter would be at this point. I tried the obvious, setting html a target to self or parent and adding onclick return false, but did not have an effect.

crui3er · 2023-05-17T06:32:28Z

crui3er
May 17, 2023

On Main page you can subscribe to blazorWebView.UrlLoading event and there define loading strategy.

_blazorWebView.UrlLoading += OnUrlLoading;
private void OnUrlLoading(object? sender, UrlLoadingEventArgs eventArgs)
{
    eventArgs.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
}

By default, it opens in webview only urls that belong to host '0.0.0.0' (hybrid blazor host).

1 reply

seanrco May 17, 2023
Author

@crui3er Thank you so much! I was not able to use your exact code example, but it pointed me in the right direction. I found the following code example on https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/routing?view=aspnetcore-7.0&pivots=maui:

blazorWebView.UrlLoading +=
        (sender, urlLoadingEventArgs) =>
        {
            if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
            {
                urlLoadingEventArgs.UrlLoadingStrategy =
                    UrlLoadingStrategy.OpenInWebView;
            }
        };

And added that to MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
	public MainPage()
	{

        InitializeComponent();

        blazorWebView.UrlLoading +=
        (sender, urlLoadingEventArgs) =>
        {
            if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
            {
                urlLoadingEventArgs.UrlLoadingStrategy =
                    UrlLoadingStrategy.OpenInWebView;
            }
        };

    }

}

Adding that resolved the issue and the Twitter Timeline is loading in the main webview correctly now! Again, thank you so much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

MAUI Blazor Hybrid App 'Twitter Timeline' Issue #14990

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

MAUI Blazor Hybrid App 'Twitter Timeline' Issue #14990

Uh oh!

seanrco May 9, 2023

Replies: 2 comments · 2 replies

Uh oh!

Xyncgas May 9, 2023

Uh oh!

seanrco May 9, 2023 Author

Uh oh!

crui3er May 17, 2023

Uh oh!

seanrco May 17, 2023 Author

seanrco
May 9, 2023

Replies: 2 comments 2 replies

Xyncgas
May 9, 2023

seanrco May 9, 2023
Author

crui3er
May 17, 2023

seanrco May 17, 2023
Author