I am currently working on enhancing the offline capabilities of my Ionic 5 app. To achieve this, I have implemented a strategy where data is stored in SQLite while the app is connected, and then retrieved from SQLite when offline instead of making HTTP requests.
obtenerVisitaDetalle(idVisita: number): Observable<any> {
if (this.networkService.getCurrentNetworkStatus() == ConnectionStatus.Offline) {
return from(this.getLocalData(`Visita/${idVisita}`));
} else {
return this.http.get<any[]>(environment.UrlBaseApi + `Visita/${idVisita}`, this.httpOptions).pipe(
tap(res => {
this.setLocalData(`Visita/${idVisita}`, res);
})
)
}
}
While this approach has been effective so far, I have encountered a specific challenge:
https://github.com/ionic-team/ionic-framework/issues/20859
Essentially, the issue arises when I try to access components like modals while offline, as they have not been preloaded. Suggestions on the linked thread propose using a service worker to prefetch the necessary chunks/assets in advance.
Any advice or examples on how to implement this preloading strategy would be greatly appreciated. Thank you
Edit: In response to the initial suggestion, I am including a portion of the routing file.
{
path: 'pago',
canActivate: [UserAuthenticatedGuard],
loadChildren: () => import('./Pages/pago/pago.module').then( m => m.PagoPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})