Capacitor: Service Worker

Capacitor
1

In the capacitor app we are developing for Android we load the entire app from a url using server.url in capacitor.config.json .

Our app is a single-spa application which loads angular apps as multiple microfrontends. We build our app using the commands:

  1. npm run build (this builds the root config for single-spa)
  2. npx cap sync android
  3. npx cap open android
  4. then build APK using Android Studio

Then we try doing the following code in one of our angular components. It is done to conditionally implement some platform specific logic in component.

In our case the Capacitor.isNative field changes from being true to false after reloading using chrome debugger or closing and opening app again. Is there something extra we have to do to make sure that Capacitor recognizes the App as a native app? Anybody has any idea as to why the Capacitor object changes after we reload the page?

We have tried using other Capacitor APIs for detecting platform like Capacitor.getPlatform() and Capacitor.platform . Both of these change from “android” to “web” after reopening app or reloading the page using chrome debugger.

We have also seen similar behavior when trying to load other Capacitor Plugins wherein the plugin object changes its structure(i.e. presumably the web implementation gets loaded instead of Android specific implementation) after the page is reloaded or app is restarted. Has anybody faced issues similar to this?

1 Like
2

check my answer on this issue

3

The issue is not with SW registration that is working fine.
Due to SW the request dont have “text/html” header inside it, because of which Capacitor.isNative not working in Android App

4

The solution is the same, if you use service workers the Capacitor code is not injected, so you use the web version of the plugins instead of the native version, and Capacitor.isNative returns false, unless you do what I said on that answer.