SolidJS•6mo ago•

10 replies

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

vite-plugin-pwa

as a dev dependency and follow this guide.
- Also install

@solidjs/meta

@solidjs/meta

since it's the recommended way of adding

<link>

<link>

s.
- Add

import "vite-plugin-pwa/info"; import "vite-plugin-pwa/solid";

import "vite-plugin-pwa/info"; import "vite-plugin-pwa/solid";

src/global.d.ts

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";

import { useRegisterSW } from "virtual:pwa-register/solid"; import { pwaInfo } from "virtual:pwa-info"; import { MetaProvider, Link } from "@solidjs/meta";

to your

App.tsx

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>
    );
}

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.

SolidJS•6mo ago•

10 replies

Overdrive8911

SolidStart PWA Support

vite-plugin-pwa

vite-plugin-pwa

as a dev dependency and follow this guide.
- Also install

@solidjs/meta

@solidjs/meta

since it's the recommended way of adding

<link>

<link>

s.
- Add

import "vite-plugin-pwa/info"; import "vite-plugin-pwa/solid";

import "vite-plugin-pwa/info"; import "vite-plugin-pwa/solid";

src/global.d.ts

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";

import { useRegisterSW } from "virtual:pwa-register/solid"; import { pwaInfo } from "virtual:pwa-info"; import { MetaProvider, Link } from "@solidjs/meta";

to your

App.tsx

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>
    );
}

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.

SolidStart PWA Support

Similar Threads

SolidStart PWA Support

Similar Threads

Similar Threads

Similar Threads