Gotchas

Like all things in life, there are some nopesies and ah-ahs that you should be very aware of when using Remix PWA.

Introducing a compiler, a runtime, route worker functions and many more could potentially lead some to take some hazardous routes/shortcuts/decisions that break the app unintentionally. And as I like to say:

If you're going to break it, break it good!

Sorry, not that quote. I meant:

A broken service worker is worse than no service worker at all.

Your Service Worker acts as an intermediary, a server of sorts to your client. Break that and your client becomes a sad, unusable panda. To avoid that outcome, here are a few surprises to take note of.

​

Never override fetch

Can't state this enough. The fetch event is an important event in a Service Worker's lifecycle. As part of the Remix PWA ecosystem, the handling of the fetch event is delegated to runtimes (or entry workers) that are responsible for not just handling events from the user worker, but route worker apis as well (workerLoader/workerAction).

Overriding this can lead to some disastrous results. So, please, don't do it. If you want to customise it, feel free to build a custom runtime that does exactly what you want.

​

workerLoader behaviour

This is another one. The workerLoader don't run on initial loads anymore, a process that I am still trying to optimise. They currently load on client-side navigations only (which are subsequent navigations after first load). If you want to force them to run on first load, you can via Remix useRevalidator hook. Hook it up in your app root route, and use a useEffect, revalidate on first render

import { useRevalidator } from "@remix-run/react";
import { useEffect } from "react";

export default function App() {
  const revalidator = useRevalidator();

  useEffect(() => {
    revalidator.revalidate();
  }, []);

  // Rest of your app
}

​

Caching non-GET requests

Simply put, you can't. The Cache API is built to handle only GET requests and not built to handle the intricacies of other request methods. If you want to cache other request methods, I would recommend taking a look at the IndexedDB API. A powerful API that allows you to store data in the browser in a database-like manner.