webviewhybrid-mobile-appcapacitorquasar

Can you port a web app to mobile with Capacitor, without using WebView and server for serving the HTML files?


I am fairly new to Capacitor and mobile apps in general. I am using the Quasar framework for building my front-end web apps.

Until now I was under the impression that Capacitor, would somehow port the HTML/CSS/JS code into native Android and iOS components, that would work without the need for a web server.

Recently I built the the first .apk with Android Web Studio and Capacitor, and during the process I realized that all that Capacitor does, is wrapping my web page in a Web View, basically giving me a browser-like rendering engine wrapped in a mobile app. The mobile app would not work offline, without access to the server.

I tried googling on the subject but most of the answers are how to change the URL from localhost to some remote server, which is not what I want.

Is it possible to build a mobile app, that is not dependent on a server to run?

Maybe the solution can be just to pack the HTML/CSS/JS locally on the mobile app, instead of requesting them via HTTP from a remote server?

I am building the app with quasar with the following command:

quasar dev -m capacitor -T android

The command opens Android Studio, and the build is done from there.

When I install the .apk file on my phone, I get an ERR_ADDRESS_UNREACHABLE, because the phone is trying to reach my development server via a private address.


Solution

  • The problem was that I was building a dev apk that was relient on the quasar dev server:

    quasar dev -m capacitor -T android
    

    Where I should have been doing:

    quasar build -m capacitor -T android
    

    After building for production, you need to zipalign and sign the apk, as specified in the quasar docs:

    https://quasar.dev/quasar-cli-webpack/developing-capacitor-apps/publishing-to-store