Service Worker does not get registered

[thedivac]

First of all thanks for working on a remix template for vite-pwa!

I'm currently converting a CRA SPA into a remix app. I've followed the starting guide, this is my vite.config.js:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import { execSync } from "child_process";
import { installGlobals } from "@remix-run/node";
import { RemixVitePWA } from "@vite-pwa/remix";
import fixReactVirtualized from "esbuild-plugin-react-virtualized";

const COMMIT_HASH = execSync("git rev-parse HEAD").toString().trim();
installGlobals();

const { RemixVitePWAPlugin, RemixPWAPreset } = RemixVitePWA();

export default defineConfig({
  plugins: [
    remix({
      ssr: false,
      presets: [RemixPWAPreset()],
    }),
    RemixVitePWAPlugin({
      registerType: "autoUpdate",
    }),
  ],
  define: {
    __COMMIT_HASH__: JSON.stringify(COMMIT_HASH),
  },
  optimizeDeps: {
    include: ["@mui/material/Tooltip"],
    esbuildOptions: {
      plugins: [fixReactVirtualized],
    },
  },
});

The guide makes it sound like this is all it takes to create and register the web worker?

I can see that the service worker gets generated and there is a registerSW.js file in the build, but this file never gets called. Do I need to import the registerSW.js file somewhere manually? Or how is this supposed to work?

Thankful for a pointer in the right direction!

[userquin]

@thedivac I'm preparing @vite-pwa/create-pwa template for remix, I'm fixing some problems with latest remix-run release (2.9)

[thedivac]

Hi @userquin, I gave the latest version of @vite-pwa/create-pwa a try and the service worker installs right away in the built app👍

I think the reason why it is not working out of the box for me is because I am using a remix app in SPA mode. I can see the registerSW gets called in the build/server/index.js file in your template (which never gets created in SPA mode).

I've published a simple repo created with npx create-remix@latest --template remix-run/remix/templates/spa and added the pwa setup. The service worker gets created but isn't installed in the build. (I assume we need to put the code to register the sw either in the index.html or the entry.client.ts)

https://github.com/thedivac/remix-spa-pwa

[userquin]

I'll check it later, in the meantime try to include pwa assets and badge in your components folder (copy/paste them from the pwa template) and add it to your root.tsx.

Since we don't have the index.html entry, there is no way to add the sw registration, you need to use worbox window (via any virtual pwa module, vanillajs or react).

[thedivac]

I don't know where I copied this from, but right now I am using a pwa.js file:

//pwa.js
import { registerSW } from "virtual:pwa-register";

registerSW({
  immediate: true,
  onRegisteredSW(swScriptUrl) {
    console.log("SW registered: ", swScriptUrl);
  },
  onOfflineReady() {
    console.log("PWA application ready to work offline");
  },
  onNeedRefresh() {
    // This will be called when a new service worker is ready to take control
    // You can prompt user to refresh the page here
    console.log(
      "A new service worker is ready to take control, refreshing the page"
    );
    window.location.reload();
  },
});

And I'm importing this file in entry.client.js. It seems to be doing its job. However, I am curious what the ideal setup would look like.

[userquin]

Try creating a new project via @vite-pwa/create-pwa, follow the prompts and check the generated project: registerSW.js shouldn't be generated, you need injectRegister: false in your pwa configuration.

PWA assets can be found in the remix template => beware, it is not a template, just a few resources to copy after running remix-run template from the create-pwa cli.

[userquin]

Remix customizations can be found here: https://github.com/vite-pwa/create-pwa/blob/main/src/customize/remix.ts

EDIT: will run after running remix-run template, this one https://github.com/vite-pwa/create-pwa/blob/main/src/prompts.ts#L96

We can also add more templates like SPA... (PR welcome ;) )