Can Vite-PWA/Workbox and Vite-Module-Federation be used together?

Question

I am currently working on adding PWA functionality (via Vite-PWA/Workbox) to a Vue 3 app that uses microfrontends (via Vite-Module-Federation) and I have a question: Is it possible to cache microfrontends without going to the pages where they are used?

I have already tried the following options:

• Using defineAsyncComponent requires opening pages to load the microfrontend.
• Importing the component as synchronous (import something from microfrontend/page) works, but if at least one of the microfrontends cannot be load, the application doesn't load (white background).

Answer 1

Found a strange but working solution (maybe it will be useful to someone): In the router.js file, you first need to preload the module synchronously (before const routes = [...]):

import ('microfront/page1').catch(...);

And then specify the route component as defineAsyncComponent:

{
    id: "page1",
    path: "/page1",
    name: "Page 1",
    component: defineAsyncComponent({
        loader: () => import("microfront/page1"),
        timeout: 10000,
        loadingComponent: Loading,
        errorComponent: ErrorPage,
    })
}