SolidJSS
SolidJS•4mo ago•
10 replies
Overdrive8911

SolidStart PWA Support

Posting this here since this should be search indexable, right? Becasue there's almost nothing useful relating to this topic >~<...

The main issue is that the manifest and service worker aren’t auto injected since SolidStart's way of bundling is different.

Getting your web app recognized as a PWA

- Install vite-plugin-pwa as a dev dependency and follow this guide.
- Also install @solidjs/meta since it's the recommended way of adding <link>s.
- Add import "vite-plugin-pwa/info"; import "vite-plugin-pwa/solid"; to src/global.d.ts (so typescript will be able to detect some Vite virtual modules we’ll import later).
- Add import { useRegisterSW } from "virtual:pwa-register/solid"; import { pwaInfo } from "virtual:pwa-info"; import { MetaProvider, Link } from "@solidjs/meta"; to your App.tsx file, and edit the main component like this:

export default function App() {
    useRegisterSW({ immediate: true });
      
      return (
        <MetaProvider>
          {/* check for and add a link for the webmanifest */}
          {pwaInfo?.webManifest?.href ? (<Link rel="manifest" href={pwaInfo.webManifest.href}/>):(“”)}

          {/* Other stuff in the `App` Component */}
        </MetaProvider>
    );
}


- And that should do it, although, note that this doesn’t give offline functionality (that will take a few more tweaks). You may still get terminal warnings but it works well enough for now.
Was this page helpful?