Hurray 🎉🎉! We are finally pleased to introduce Remix PWA v3.0 to the world 🌍. Remix PWA is a PWA framework for building perfomant, enhanced Progressive Web Applications in Remix. Remix 💿 is a web framework for building fast, perfomant and gorgeous sites of all scales with ease and no unnecessary abstractions.
This article will go over what's new in this update (spoiler: a lot), and dive a bit deeper into under-the-hood, our dream of solidifying PWA in Remix; and maybe even native support (who knows?).
Synopsis 🧪
Remix PWA v3.0 is the first real PWA framework (that I know of) built to integrate native PWA enhancements into your web applications. All this is possible thanks to the very fast compiler (powered by esbuild) behind-the-scenes and the separation of concerns pattern we adopted from Remix.
Remix separates its main build process into two via: @remix-run/dev and @remix-run/{adapter}. So it is easy to add adapters on the fly and extend Remix without needing to modify the original compiler.
Remix PWA follows that approach by separating our compilation process into two parts via: @remix-pwa/dev and @remix-pwa/{runtime}.
What's a Runtime?
Runtime can be defined simply as an internal Service Worker. It is your base of operations, the foundation from which Remix PWA builds any other service worker you provide on top. It's quite the thing.
Currently, only a basic javascript runtime adapter is provided by Remix PWA (in the form of @remix-pwa/worker-runtime). Support for other tools like Workbox will be coming along in the coming months.
Now that we've introduced Remix PWA and defined what runtime is, let's keep digging!
Highlights of the day ✨
A lot of new things came out of this update, to avoid spending all day here reading a documentation, I would drop three highlights to satiate your curiosity (Don't forget to check out https://remix-pwa.run too). The main highlights of Remix PWA v3.0 can be surmised as:
- A new compiler has been shipped. Building PWAs just became less of a hassle!
- New package lineup. We shipped quite a few new packages to help with scaling your PWA in a very short time.
- Worker Route API: We brought the service worker directly to your routes 😁!
Compiler ⚙️
Remix PWA v3.0 took things up a notch this time by shipping with a compiler. Previously, it was a simple esbuild script that bundled one file from app to public.
With this update, we decided to go all out (what could go wrong?) and just ship a compiler. Not only does it handle building worker files, but you also get the route APIs, global worker context and more.
New Packages 📦
Remix PWA v3.0 update wasn't just about building a compiler for Service Workers but building a mini-ecosystem for PWAs in Remix. Say hello to @remix-pwa/sync (for Background Sync), @remix-pwa/cache (a supercharged framework-agnostic wrapper for Cache API) and some more.
Our approach with each of these packages was simple: what is the common solution for x? When we find it, we look at their approach and try to replicate the approach for Remix. Thereby lowering the learning curve substantially and making things more familiar and easy.
Worker Route API 🔥
I could definitely go on and on about this one, this is by far one of the biggest highlights of the Remix PWA v3.0 update.
Introducing workerLoader and workerAction. Two new route APIs that behave like your normal Remix loaders and actions. Two different handlers that run on the server and handle a route's request.
workerLoader and workerAction run in the worker thread and act as middleware in your route's communication process. It's no longer a direct client -> server relationship but a client -> worker -> server one and it's as powerful as ever!
That wraps up our highlight ⚡️! There's a whole lot more to unpack and be excited for. Stay tuned for more content and updates.
At the end of the day, Remix PWA is a firm part of the Remix ecosystem and it's our goal (and dream) that some of what you see released would no longer be in v4.0 because it is already shipped with Remix itself.
That's the end of this unofficial announcement post. I hope you are as excited as I am for the future of PWA, not just in Remix but on the World Wide Web as a whole. Am I back to consistent writing? I hope so. Anyway, I would leave you with this one to have explore and fun 🤩. Love you all, see you in the next one 👋!
Top comments (2)
This is what drives progress in the tech industry. Developers like you are continually pushing the boundaries of what web browsers can achieve. Thank you for your dedication, and I'm excited to see the innovative products and solutions you'll create in the future.
Thank you for the kind words 😊. We keep pushing 💪!