Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Spotify Web Player not working in WebView on iPadOS but on iOS

mksm_klsnkmksm_klsnk USMember ✭✭
edited January 20 in Xamarin.Forms

Hello,

I am trying to load Spotify Web Player in a WebView (open.spotify.com).
On my iPhones (7 and XS) everything works fine.
However, my iPad (6th generation) says that the web play is not supported.
Safari also loads the web player correctly on the iPad.

Can you guys tell me why this is not working on the iPad?

All devices have iOS / iPadOs 14.3 installed.

This is how i'm using the WebView in my Xamarin.Forms project.

<WebView HorizontalOptions="FillAndExpand"
                   VerticalOptions="FillAndExpand"
                   Source="https://open.spotify.com"/>

Thanks a lot!!


Best Answer

  • mksm_klsnkmksm_klsnk USMember ✭✭
    Accepted Answer

    I found a solution: Simply change the user agent on the iPad...
    In my WKWebviewRenderer i use this code

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
            {
                base.OnElementChanged(e);
    
                if (e.NewElement != null)
                {
                    NavigationDelegate = new CustomNavigationDelegate();
                    LoadUrl("https://open.spotify.com");
                }
            }
    

    And in the WKNavigationDelegate extension i replaced "iPad" by "iPhone", set the CustomUserAgent property on the WKWebView, cancel the ongoing request, and send a new one with the iPhone User-Agent.

    public class CustomNavigationDelegate : WKNavigationDelegate
    {
        public override void DecidePolicy(WKWebView webView, WKNavigationAction navigationAction, Action<WKNavigationActionPolicy> decisionHandler)
        {
            if (navigationAction.Request.Headers.ContainsKey(new NSString("User-Agent")))
            {
                var agent = navigationAction.Request.Headers["User-Agent"];
                var agentString = agent?.ToString();
                if (!string.IsNullOrWhiteSpace(agentString) && agentString.Contains("iPad"))
                {
                    agentString = agentString.Replace("iPad", "iPhone");
                    webView.CustomUserAgent = agentString;
                    decisionHandler(WKNavigationActionPolicy.Cancel);
                    webView.LoadRequest(new NSUrlRequest(new NSUrl("https://open.spotify.com")));
                }
                else
                {
                    decisionHandler(WKNavigationActionPolicy.Allow);
                }
            }
        }
    }
    

    This code leads to the desired result. If there are better ways, let me know :).

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    This is Spotify's policy , It's currently not possible to use the full version of Spotify via the web player on iPad: if you go to open.spotify.com, you can only listen to 30-second previews of songs .

    Check https://community.spotify.com/t5/Other-Partners-Web-Player-etc/Web-browser-on-iPad/td-p/2619913 .


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • mksm_klsnkmksm_klsnk USMember ✭✭
    edited January 21

    Thanks for your research ColeX.
    I saw that post too, however the web player works in Safari (iPadOs)!
    Only in the WebView apparently not.

  • ColeXColeX Member, Xamarin Team Xamurai

    There may be some limitations on WebView , you can try to use SFSafariViewController to replace WebView to show the website (within custom renderer ) .

    And Consider raising issue on the spotify site for better support (The post was 1 year ago ,maybe something has updated).

  • mksm_klsnkmksm_klsnk USMember ✭✭
    Accepted Answer

    I found a solution: Simply change the user agent on the iPad...
    In my WKWebviewRenderer i use this code

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
            {
                base.OnElementChanged(e);
    
                if (e.NewElement != null)
                {
                    NavigationDelegate = new CustomNavigationDelegate();
                    LoadUrl("https://open.spotify.com");
                }
            }
    

    And in the WKNavigationDelegate extension i replaced "iPad" by "iPhone", set the CustomUserAgent property on the WKWebView, cancel the ongoing request, and send a new one with the iPhone User-Agent.

    public class CustomNavigationDelegate : WKNavigationDelegate
    {
        public override void DecidePolicy(WKWebView webView, WKNavigationAction navigationAction, Action<WKNavigationActionPolicy> decisionHandler)
        {
            if (navigationAction.Request.Headers.ContainsKey(new NSString("User-Agent")))
            {
                var agent = navigationAction.Request.Headers["User-Agent"];
                var agentString = agent?.ToString();
                if (!string.IsNullOrWhiteSpace(agentString) && agentString.Contains("iPad"))
                {
                    agentString = agentString.Replace("iPad", "iPhone");
                    webView.CustomUserAgent = agentString;
                    decisionHandler(WKNavigationActionPolicy.Cancel);
                    webView.LoadRequest(new NSUrlRequest(new NSUrl("https://open.spotify.com")));
                }
                else
                {
                    decisionHandler(WKNavigationActionPolicy.Allow);
                }
            }
        }
    }
    

    This code leads to the desired result. If there are better ways, let me know :).

Sign In or Register to comment.