Hello,
I am making a mobile app with Capacitor + Ionic + Vue and I need some elements of it to work offline.
In order to test the offline functionality I went into the network tab on Firefox and changed the throttling from No Throttling to Offline. This works for some situations but also prevents Vue components being imported over the network, meaning I can’t switch to pages that aren’t cached and have to go back online to get any changes.
I also tried blocking my API URL but that doesn’t cause capacitor network API to detect it as offline.
Is there a good way of testing apps offline?
Since you are using Vue, assuming you are using Vite? And it sounds like you are just running the app in the browser? You could try running a production build preview by using the command npx vite preview.
Thanks for the response.
Yes I am using vite and viewing it in a browser.
From what I just tried vite preview has the same downsides as the vite local development server. I still have to go into Offline on Firefox to test it and it still prevents the loading of assets like components and CSS files when I do this.
Ah, true. I was just thinking about the JS modules it loads individually in dev mode.
It looks like in both Chrome and Firefox you can right click on a request in the Network tab and block the URL. In Firefox, you can edit the pattern after blocking a full URL.
I tried blocking the calls to our API but the problem was the capacitor network API still recognises that its the program is online. Currently the program checks if its online before making calls and loads previous data if not, maybe I should change it to also try the offline methods if a request fails.
Currently the most effective way I’ve found of testing offline mode is adding a “return true” into my isOffline function. This is not an elegant solution but it works for my use case.
I’m surprised there isn’t more tools for testing this sort of thing. I imagined this would be a common problem.
Another option which is probably better is to test using the iOS or Android emulator. Disabling the network there isn’t gonna affect loading local assets because everything is local within the app build.