Can we run a Capacitor PWA app offline?

Question

i just created an Ionic project and i added capacitor on it ( with a "npx cap init" ), i set up my service worker ( i just left the <--- ...... ---> in my index.html ). Then i run " ionic serve " from my laptop, and i tried to access it from my mobile phone ( so basically i did a personnal hotspot with my mobile internet, i mean my laptop and mobile phone have the same internet connection ), and it works. I can access to my ionic app from my mobile whereas it is runt on my laptop, but now i'd like to add/download this app on my mobile phone and use it offline.

Do you know any way i can do that ? Thanks a lot !

Answer 1

Capacitor works by serving your static assets (like javascript and HTML) from a self-hosted web server, whose behavior is dependent on your capacitor.config.json. This behaviour is most obvious if you look at the source code.

• If you have server.url specified in capacitor.config.json, Capacitor's self-hosted server will act as a proxy for the server you point to.

• If you do not have server.url specified, Capacitor's self-hosted web server will serve the files that were bundled with your native app.

Based on this, when you are creating the build for your phone, you will need to remove the server url property from your capacitor.config.json. You may also need to generate the capacitor.config.json on the fly in order to separate your development and production needs.

Note that the Ionic Framework and Capacitor have two completely different deployment paths; this answer assumes that you use Capacitor to create your builds.