Workaround for Blazor Hybrid on older Android devices

[Eilon]

I've published a workaround for supporting Blazor Hybrid on older Android devices that have older WebView components. Those older WebViews support only older JavaScript versions, and are incompatible with the latest Blazor Hybrid scripts.

Here are some of the reports of this issue:

• Unexpected Syntax Error in blazor.webview.js on iOS lower than v17 in .NET 9 Pre7 #24278
• [.NET 9] BlazorWebView fails to load on older Android devices Uncaught SyntaxError: Unexpected token . aspnetcore#53699

The problem and the fix

The official version in .NET 9 has code that targets ES2022, which can produce JavaScript code that is not compatible with older Android devices. The suggestion was to target ES2019, which is compatible with older devices. One of the suggestions in those issues was to compile the blazor.webview.js file (which is written in TypeScript) to target that older EcmaScript (ES) version.

The fix I made was to change the build of the blazor.webview.js file to use ES2019. To do that I changed these two versions from ES2022 to ES2019: https://github.com/dotnet/aspnetcore/blob/ecfaab9e762b14e35fc29fe2799ca458a057c14f/src/Components/Shared.JS/tsconfig.json#L3-L5

And then I produced a local build of the blazor.webview.js JavaScript file, and included it in my .NET MAUI Blazor Hybrid app. And it worked!

How to apply the fix to your app

To use the new ES2019-compatible script I followed these steps:

1. Create a new folder in your .NET MAUI Blazor Hybrid project called wwwroot\scripts
2. Go to https://github.com/Eilon/MauiBlazorHybridES2019/blob/main/MauiBlazorHybridES2019/wwwroot/scripts/blazor.webview.es2019.js and download that file (using the download button ) into the folder you just created
3. Open wwwroot\index.html and at the bottom of that file change this line:

    <script src="_framework/blazor.webview.js" autostart="false"></script>

   To this:

   <script src="scripts/blazor.webview.es2019.js" autostart="false"></script>

4. Note: Check your source control to make sure that the CSPROJ file did NOT change

And that's it!

How I tested the fix

For informational purposes, here's what I used to confirm the original bug reproduces, and then verify the fixed version.

• I created an Android emulator using a Nexus 5 with Android 10.0 / API 29
• Created .NET MAUI 9 Blazor Hybrid app
• I ran in the emulator to verify that out-of-the-box the bug reproduces
• And sure enough I got these errors:

  Uncaught SyntaxError: Unexpected token .
  VM14:2  Uncaught ReferenceError: Blazor is not defined
      at <anonymous>:2:8
  

• And this is what it looked like when I ran it:
  
• I then applied the fixed JS file per the instructions above, and then ran the app again, and it worked:
  
• And in the Web Dev Tools I confirmed that there are no errors.

[LuohuaRain]

Hi Eilon, thanks for your excellent work.

But I tried compiling the blazor.web.js to ES2019, and it worked partially. However, some devices (especially iPhones) still show white blank.

And the version of blazor.web.js in .NET 8 works fine.

[timmac-qmc]

not compatible with older Android devices

Just wanted to chip in and say it affects iOS devices too. I've had several complaints about issues on older iPhones such as the iPhone 7.
In terms of the fix, using a local 2019 compiled version has resolved the issue.

[angelofb]

same problem, the workaround worked

[AndyMine12]

This worked perfectly! Thank you so much!!
Tested in a physical Android 10 device