error injecting head tag with Remix vite plugin about vite-plugin-pwa

[userquin]

I Will try to add an example and include remix in the docs...

[userquin]

spa pwa changes can be found here with some configuration changes: userquin/remix-pwa#1

[userquin]

@xstevenyung we need a custom plugin for remix, this weekend I'll try to create it: @vite-pwa/remix with similar logic and a few options to customize the build.

[userquin]

importing virtual:pwa-info not working? https://github.com/vite-pwa/vite-plugin-pwa/blob/main/info.d.ts

[userquin]

check this sveltekit example: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/src/routes/%2Blayout.svelte#L6

[kirbysayshi]

In case this helps, this seems to be working for me in Remix:

import { pwaInfo } from 'virtual:pwa-info';
// ....
// ....
        {pwaInfo ? (
          <link rel='manifest' href={pwaInfo.webManifest.href} />
        ) : null}
      </head>

It did take me a while to figure that out though :)

[xstevenyung]

just tested out, and yes both approaches works. maybe we could document this with an example similar to the sveltekit one ?

[userquin]

You can also check astro integration examples, check the default layout.

[userquin]

So, remix doesn't have an html entry point, that's why the manifest cannot be injected, and so we need to add it to the layout or root tsx component/entry point.

I'm going to play with it on my local to test also custom sw in dev mode and the pwa assets generation integration.

[xstevenyung]

thanks for the quick response, happy to help if you need any assistance for this!

[userquin]

like a beast, custom sw on dev server with pwa assets generator on the fly:

[userquin]

build also working:

[userquin]

@xstevenyung remix not generating html page, this can be a problem, we need a navigate fallback page for offline handler

[userquin]

how can I run the build locally? node build/server/index.js seems to be not working...

[userquin]

Here the repo: https://github.com/userquin/remix-pwa

[userquin]

https://discord.com/channels/770287896669978684/1214618561851686983

[userquin]

pnpm start 🤦‍♂️

[userquin]

Using SPA mode (ssr: false in remix plugin) remix build seems to generate the entry pont (index.html) after pwa plugin builds the service worker and so missing from the sw precache manifest (the index.html seems to be generated by the remix cli not by the plugin, vite-plugin-pwa should be called last in the pipeline, I'm going to test changing the priority in the build plugin to confirm the behavior).

It seems we can use SPA or SSR app, there is no hybrid mode.

[userquin]

The sw being generated during client build, the SSR build and the SPA mode using another custom Vite build, I'll check if we can include the plugin in that build ( from remix CLI (?) ).

[userquin]

Generated on writeBundle hook, checking if the file is there when running the buildEnd hook, maybe the globPatterns and/or globDirectory are wrong.

[userquin]

@xstevenyung @kirbysayshi just found buildEnd remix plugin hook, with SPA mode we can now include the entry point in the sw precache manifest.

I'm going to update the PR and merge into main, SSR App will require some additional work.

About SSR app, we'll need a new integration in ViteOrg for Remix.

[userquin]

SPA mode in main https://github.com/userquin/remix-pwa

I'm going to add a new branch for SSR app.

[userquin]

@xstevenyung you can check the hack for SSR in main: https://github.com/userquin/remix-pwa/blob/main/vite.config.ts

[xstevenyung]

just implemented, seems to work but i have to admit, i have a limited understanding on what's going on in the vite.config.ts

[xstevenyung]

thanks so much for your work 🙏