Flutter web not working on iOS web (13.5.1)

[eliluong]

Steps to reproduce

I found this issue in the past (#104646), and it was marked as resolved.

I compiled an app with flutter build web and uploaded to a web server. It currently loads on various Chrome desktop and Chrome mobile, and iOS 15+. I have a mobile device running iOS 13.5.1 and it fails to load (just a blank page). If I insert text into index.html prior to the <script> tag in the body, I see the text appear. I do not have a desktop Safari on a similar version in order to see what it outputs to the console. I understand the older browsers only make a small fraction of current browser share. Is there a workaround I can use?

I read the post, #104646 (comment), and I created a new project (same Flutter version as my project), and moved flutter.js over to my project build directory, but it still does not load on the older browser.

I followed instructions here (https://forums.macrumors.com/threads/how-do-i-check-logs-on-ios-safari-if-i-use-windows.2373059/post-31794304) and it output the following:

WARNING Exception while loading service worker: Error: Service Worker API unavailable. DEBUG Injected <script> tag. Using callback. DEBUG Flutter Web Bootstrap: Programmatic. LOG ReferenceErrror: Can't find variable: WeakRef LOG Another exception was thrown: Instance of 'minified:eN<void>'

Additionally, I followed suggestion here to run a Flutter web app (#140786 (comment)), and one of the warnings in the console on desktop Chrome browser was this (the web app still loads and functions):

flutter.js:362 Exception while loading service worker: Error: Service Worker API unavailable. The current context is NOT secure. Read more: https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts at FlutterServiceWorkerLoader.loadServiceWorker (flutter.js:130:11) at FlutterLoader.loadEntrypoint (flutter.js:360:33) at (index):59:23

Please let me know if there is a workaround for this issue, or if it is not planned to be fixed due to old browser and tiny market share. Thank you.

Expected results

Able to load on older browsers.

Actual results

Not loading on older browers.

Code sample

Code sample

[Paste your code here]

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[!] Flutter (Channel stable, 3.16.9, on Debian GNU/Linux 12 (bookworm) 6.1.0-17-amd64, locale en_US.UTF-8)
    • Flutter version 3.16.9 on channel stable at /home/eliluong/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (5 weeks ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[huycozy]

Hi @eliluong

WARNING Exception while loading service worker: Error: Service Worker API unavailable

Does this log come from iOS's Chrome browser inspector?

Additionally, I followed suggestion here to run a Flutter web app (#140786 (comment)), and one of the warnings in the console on desktop Chrome browser was this (the web app still loads and functions):

It seems you can reproduce this on your end on desktop Chrome browser as well. What is the Chrome version? Could you share the entire stack trace?

[eliluong]

Yes, to get access to those messages in iOS Chrome, I navigate to chrome://inspect and enable the logging, then visit the website.

As for the desktop Chrome browser, I can't seem to generate that warning again (even after running build again). I am on Chrome 109.0.5414.120.

I want to note that I have a copy of the web build from September 2023, which does load on my iOS Safari. I ran flutter build web again with the code from this particular time, but it does not load on iOS Safari (it does load on Chrome desktop), I do not know if Flutter or Dart had been updated since then on the machine that I initially ran build on.

[huycozy]

Okay, I would like to summary this as follows:

On Flutter version (3.16.9) build:

• iOS Chrome, iOS Safari: the issue appears on iOS 13.5.1.
• Desktop Chrome browser ver 109.0.5414.120: the issue appeared only one time and then disappeared.

Could you also share the iOS Chrome and iOS Safari's browser version on iOS 13.5.1 device? Per Browser compatibility, WeakRef is only supported on Safari iOS 14.5+ (also see #134317 (comment))

[eliluong]

Thank you for helping. I want to clarify, I believe there are two issues that are separate.

One (I am not sure if it is important) is the warning about no service worker available. This specific issue appeared one time on Chrome desktop and disappear, like you said. I can also confirm on iOS Chrome this error (Service Worker API unavailable) is still present. But I am not sure if this warning is what is making the entire Flutter web app not function on iOS. iOS Chrome is 74.0.3729.121. I can't tell what Safari version it is, but it is whatever comes with 13.5.1 because it is not updatable without software update. I can also confirm Flutter web app does not load on similar iPad OS.

The second issue is Flutter web app not loading on older iOS browser. I reviewed the link you provided, and will try their workaround.

Would an easy solution be to change Flutter version to something lower and flutter build web from it?

[huycozy]

Would an easy solution be to change Flutter version to something lower and flutter build web from it?

As you mentioned the build on September 2023 can load on iOS Safari, it could be a regression issue on Flutter. It would be helpful if you can do git bisect to find the bad commit on your device (I don't have a such device with that OS version so I can't check this). You can check this tutorial as an example for bisecting regression issue on Flutter.

Meanwhile, I will label this for other's thoughts.

[eliluong]

Thanks. I am not sure a git bisect would be useful, because I build from the same code I had in September 2023 (had not touched the code until recently). I'm not 100% sure, but feel pretty confident there were no changes to the code since that time. I copied the codebase and did some code edit on a new development machine, and this was when I encountered the issue where iOS Flutter web app would not load. I made a copy of the old code on the old development machine, and ran build but the issue persists (assuming I had not updated anything Flutter-related).

After having a chance to read through the WeakRef comment you posted, I followed the recommendation in #134317 (comment) and I can confirm my Flutter web app now loads in both iOS Safari and Chrome (in addition to desktop Chrome). So your idea of WeakRef being the issue is correct. Since I am a casual developer, this is fine as a workaround, as I am not making anything that serves millions of users.

[huycozy]

but feel pretty confident there were no changes to the code since that time.

I meant git bisect in Flutter source code that help to find which is bad commit causes the issue since that time. Compare that to that time(September 2023), which probably corresponds to the stable releases (3.13.3 ... 3.13.6). So do bisect on Flutter source between that version and your current version (3.16.9) is the idea. You can refer to the tutorial I shared above for the detail.

As the solution shared at #134317 (comment) can solve the issue, @ditman Do you think this issue can be safely closed?

[yjbanov]

According to https://docs.flutter.dev/reference/supported-platforms, Safari 13 is no longer supported by newer versions of the Flutter SDK. It may work, but we don't test on Safari 13 any more. The following options are available:

• Use an older Flutter SDK, if supporting old browsers is important.
• Remove the service worker from the Safari 13 build of the app (it is optional). There's no guarantee that everything else will work, but it might get the service worker issue out of the way.

[ditman]

The alternative that OP used was to use a WeakRef polyfill. See their comment:

• Flutter web not working on iOS web (13.5.1) #144170 (comment)

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.