Technical Explanantion

This document attempts to answer the simple, yet not-so-simple question of: "What on earth did Remix PWA v3 become?", or in more formal terms: "What are the technical details of Remix PWA v3.0?". This document is intended for developers who want to understand the technical details of Remix PWA v3.

I like to describe Remix PWA as one of such:

• A compiler
• A CLI (Command Line Interface) executable
• A service worker framework

​

Technical Details

​

Compiler

Everything in Remix PWA starts with a compiler: remix-pwa build. Using esbuild, this does a few things:

• Using your selected worker runtime, it compiles your worker code into a single file using the remix.config.js file as the configuration.
• Exposes the worker thread to your Remix routes. This is done by emptying out all routes save for the workerLoader and workerAction functions, and then building a map out of that. This map is then used by the worker thread to know which route to load for a given request as well as replicate Remix's parent-child relationships that loaders & actions have.
• Builds all your Remix routes (based on a manifest graph), extracts all workerLoader and workerAction functions, then bundles them into the built worker file.
• Creates a worker build. By default, this is in public/entry.worker.js (can be changed from your Remix configuration file).
• Creates a worker routes and asset manifest. This is a global map available to the worker thread that allows it to know which route to load for a given request as well as generate a dependency graph and resource map for the worker to use.

​

CLI

The CLI is a simple executable that is used to run the compiler, as well as a few other things:

• remix-pwa init: Creates a new Remix PWA project. Alternatively, you can use new or create as well. This is the default command (soon to be deprecated).
• remix-pwa build: Runs the compiler in build mode.
• remix-pwa dev: Runs the compiler in dev mode. This is a special mode that is used to run the compiler in watch mode, as well as reloads your application (via @remix-pwa/sw LiveReload component)

Check out the full guide here

​

Service Worker Framework

Service Worker Framework is a term that hasn't been officially defined yet, but it's a term I use to describe Remix PWA.

It is a framework in the sense that you have a compiler that builds your service worker, a set of configurations that decide how your service worker is built and behaves, as well as an output which is the built product in the form of a service worker in the public directory.

Remix PWA offers you all these three at the basic level as well as high level APIs that assists you in building your ultimate service worker.

​

Runtimes

​

Vanilla JS Runtime

The vanilla JS runtime is the default runtime for Remix PWA. It is packed into @remix-pwa/worker-runtime and is used by default when you run remix-pwa build (to change this, update the worker file in your remix.config.js file).

This is comprised of a few things, the most important of which are:

• A defaultFetchHandler function that is used to handle all fetch requests by default, when a workerLoader or workerAction isn't found.
• A getLoadContext generator function that is used to generate context for a given request.
• A defualtErrorHandler function that is used to handle all errors by default. You can override them by the way by exporting from your own service worker file.
• Finally, and most importantly, a ServiceWorkerGlobalScope fetch event listener. This is the main event listener that is used to handle all requests.

Please, whatever you do or see, never override the fetch event listener.

​

Workbox Runtime

This is a runtime for using Workbox with Remix PWA v3.0. It is currently in development and will be released soon (idk how soon though).