I’m not a developer, but I do work on some small coding projects for my wife’s company. I’ve built a vehicle inspection SPA app in vanilla JS Ionic. A key requirement is that the app continue to work offline, and sync / submit collected data when a connection is restored. Her company has a dedicated PHP / MySQL developer who handles all the back-end functionality.

My app is largely working, but the offline portion isn’t. I created a service worker which was mostly working, but Ionic files weren’t getting properly cached if I linked to the files using the CDN links in my index.html file. I was able to get the app working and caching properly by copying all the files in my node_modules Ionic directory locally, but only by placing them in my public directory and not having them processed by Vite. I read that this likely wasn’t the best approach for app performance, and did notice a slight degradation. But at least it was working as expected, and I may revert back to that…

I’ve been going down a rabbit hole the last two days trying to import the Ionic components I’m actually using in my project into a JS module. That is partially working, but none of my components are having the hydration class applied. I basically have an app that is just a white screen, but if I inspect the HTML in dev tools all is working as expected, just not hydrating.

I’m wondering if it is possible to get this working by importing components, or if there is some way to cache local versions of the files served by the Ionic CDN as users interact with my app? Here’s a simplified / stripped down version of how I’m trying to import the components:

import { IonApp } from '../../node_modules/@ionic/core/components/ion-app.js';
import { IonContent } from '../../node_modules/@ionic/core/components/ion-content.js';

customElements.define('ion-app', IonApp);
customElements.define('ion-content', IonContent);

initialize();