Issue in IE11 when importing plugins from @capacitor/core

The following produces an error in IE11 about proxy not being defined:

import { Plugins } from '@capacitor/core'
const { Device } = Plugins
console.log(Device)

The error message in the console in my swedish IE11 says: “Proxy har inte definierats” (Proxy has not been defined).

Will this be fixed?

[mlynch]

I responded in another issue, but we’re strongly leaning towards not supporting IE 11. By supporting it, we’ll have to invest time on IE 11 instead of making Capacitor better for all the other platforms we support. Also, IE 11 does not support any PWA APIs.

Various stats show IE 11 usage at < 3% worldwide, and once we get into production ready status that number should drop even more.

It’s time to move on.

[laurentgoudet]

I responded in another issue, but we’re strongly leaning towards not supporting IE 11. By supporting it, we’ll have to invest time on IE 11 instead of making Capacitor better for all the other platforms we support.

I think there’s a difference between not supporting IE11, and actively breaking it. Unfortunately Proxy is one of those rare JavaScript API that can’t be polyfilled on older engines. For instance, the only viable polyfill requires you to know the properties you want to proxy at creation time, which is effectively the same as defining lots of Object property getters, and can’t be used in Capacitor’s case.

Also, IE 11 does not support any PWA APIs.

IMO PWAs are more than a set of APIs: the “Progressive” part means that the web apps get progressively better on newer engines, yet still work across all devices, as per the first sentence from Google’s PWA checklist:

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

The “Works in any browser” part is re-stated as item #2 in that same checklist.

Various stats show IE 11 usage at < 3% worldwide, and once we get into production ready status that number should drop even more. It’s time to move on.

As much as I’d love to agree with you, the sad reality is that those few percents often include the most valuable consumers for many businesses, as a large part of fortune 500s are still running IE11, often because they also have to support legacy IE11-only web apps in parallel.

Don’t get me wrong: we all hate IE11 here, but unfortunately most of us don’t have the luxury of just ignoring it.

I was able to conditionally require capacitor’s Geolocation plugin as follows

The issue with using a conditional import is that it works until it doesn’t: I was doing the same trick, until Webpack code-splitting algorithm saw that that import are required from multiple places, and decided to optimize it by inlining the code into the main app bundle, effectively silently breaking IE11.

In addition, while on the surface Capacitor looks like a modern ES module-based library, the simple fact of importing Capacitor (import { Capacitor } from '@capacitor/core';) creates a counter-intuitive side-effect (effectively breaking tree-shacking) by instantiating CapacitorWeb & exposing it on the global object, which I’d argue is another problem in itself.

Anyway, since Capacitor’s use of Proxy is limited to throwing a Promise rejection when trying to access an unavailable plugin, I’d argue that said use should just be guarded: it means that trying to access an unavailable plugin will throw in IE11 (instead of returning a Promise rejection), but at least Capacitor won’t throw a global Syntax Error on import anymore (and not trying to use an unavailable plugin can be controlled on the caller side, i.e. by the user).