Remix PWA

[lone solar]

ah, maybe that was merged after you'd already branched off to work on Vite compat

[midnight steeple]

He did. It's just not released as latest (still in pre-release state). To use it, run npm i @remix-pwa/sw@dev @remix-pwa/cache@dev 👍

Actually, @remix-pwa/cache@latest

[lone solar]

hmm, doesn't seem to help

[midnight steeple]

Welp, would just go ahead and make them all compatible in the coming days 😅

[lone solar]

yeah haha sounds good - go to bed! 🙂

[midnight steeple]

Released 2.1.0-dev.3. Should fix the scope issue, also removed logs in build cause I can't fix the multiple vite running thing. Now, vite build runs in production mode (albeit multiple times). Would now go to bed 😂

[midnight steeple]

Interesting. So remix build style now means you have one production and one development worker. No longer in the same place

Just realised remix is strict about route exports so workerLoader and workerAction don't work 🤦‍♂️

For more info: https://remix.run/docs/en/main/future/vite#strict-route-exports

Hopefully, Remix would give official support for workerLoader/Action

[midnight steeple]

On a second note, how about I solve worker export issues myself and bring support sooner 😁

[midnight steeple]

https://github.com/remix-pwa/monorepo/pull/129

[midnight steeple]

One more tiny fix before they come online tho, just learned Remix approach to fetching has changed seriously so I am not sure how to differentiate loader and action fetches from other fetches yet, but once I do 👍

[midnight steeple]

Mini-update regarding docs:
Done some mini work on the site including the ground work for versioning (multiple versions now have separate docs)
Also, got Remix PWA v2 a sub-domain: https://v2.remix-pwa.run

[weary coral]

Hey @midnight steeple! Thanks for all the work you've been doing. Is this subdomain updated to work with vite?

[midnight steeple]

Do you mean wether v2 is built with vite or v2 contains doc info on PWA + Vite?

The site isn't built with Vite. I haven't updated it and it still uses Remix v1.smthg.

It also doesn't contain any info on Vite in Remix PWA. Remix PWA is currently at v3, the v2 docs is the old docs. I just changed the url from a vercel subdomain to a remix PWA subdomain.

[weary coral]

Ah sorry, then I misunderstood

[midnight steeple]

Regarding why no unofficial doc is out yet, the Remix team is on holiday and I have one major issue I am still trying to figure out. Regarding route workers. Namely how loaders and actions are fetched in the newer versions of vite

[midnight steeple]

No problem 😃

[weary coral]

The reason I've been pretty insistent with vite support is because it's blocking a rather large update to my project. https://github.com/IgnisDa/ryot/pull/478

(I don't say this to egg you. I just thought you should know the reason why I've been following that issue closely)

[midnight steeple]

Would go at it again later today

[midnight steeple]

@weary coral Do you have a mini project (sandbox) you currently use to test out Vite + Remix? Asking cause I just discovered smthg weird I added into Remix PWA. Try using workerLoader/Action without exporting it.

// no `export` keyword
const workerLoader = () = {...}

I want to confirm it isn't an anomaly and it's been released

If it works, I need to release a new eslint package telling ESLint to shut up about unused functions and bypass worker route apis being unused

If it works, then yeah, that wraps up major pre-release and that means all past features has been successfully migrated to Vite

[weary coral]

Not really. Just a huge project where I can try it out. I don't really plan to use the worker actions etc. i just want the app to be installable as a pwa and cache remote images.

[midnight steeple]

Only one of two would be out in the near future (installability + remix pwa vite). The other one (caching) would take me a while due to an extensive re-write of sw and removal of cache from remix pwa stack. But in the meantime, you can handle caching with @remix-pwa/[email protected] instead of 2.x.x as that doesn't make use of any of the new technologies and is much simpler.

I don't want to rush releasing a package that hasn't been fully dusted and tested. Last excuse for this delay is work just got hectic af. And it's prob. gonna stay that way for most of January too. Again, sorry for the delay 🙏

[weary coral]

No issues. Thank you for the update

[midnight steeple]

I am ~85% done with the new caching system 😆. Remaining testing and a few things to patch and finally JSDocs. You can have a look here:
https://github.com/remix-pwa/monorepo/tree/feat/vite/packages/sw/src/cache. Thx @ IgnisDa for the push

Built from the ground up with no dependencies, integrates well with vite and much faster than former approaches due to a more concise interface between your app and the cache

Also introducing EnhancedCache, a universal cache that I went wild with. Ships with about 7 utilities rn (with more on the way) including precaching and cache versioning (still polishing this)

I am also re-writing precaching and JiT caching. That one isn't out yet though

[midnight steeple]

@still wadi Hola 👋! I am currently writing the new precache handler for remix pwa and I am accounting use cases like the one you raised earlier (fully offline app), I tried going through your service worker to have an idea of how you did it but tbh, I am getting lost pretty easily.
Did you just fetch the entire Remix route manifest on activation? Or did you take a separate approach?

I am thinking of an API that looks roughly like this:

new Precache({
  offline: true, //automatically tags your app as offline-first?
  blackListRoutes: [], // routes to automatically remove (that require live data, for example)
  routes: [], // if you don't prefer offline and just want to precache some assets
  cache: string | EnhancedCache, // would honestly prefer enhanced cache here - probs enforce i
})

Still thinking the DX out. It might turn out better or worse than this 😂

[midnight steeple]

Would be waiting for a helping hand regarding that (precaching).
As for useSWEffect, it's unfortunately going nowhere. Tho, I have reduced the SW reliance on it and it's size, but it's still critical for caching documents (html). I tried injection via vite but it started to get very complicated and I am not going there.

[still wadi]

Hi @midnight steeple , I did inject the manifest in the service worker and intercepted it for NavigateRequest and DataRequest.
On full refresh the html will be rewritten to find the matching routes and replace them via the matchRoutes, createRoutes, getKeyedLinksForMatches etc methods provided in the manifest and react router.
This is similar to everything in remix-react/components.tsx. Only then can we provide offline support for any page without pre-rendering.

By default on the first visit it will precache /?shell=true which will return an html template identifying what needs to be replaced. It will then be replaced in the service worker and returned.

[midnight steeple]

Thx a lot, looking at your implementation tho, you ran the fix-sw script when building, how did you ensure offline capabilities during dev?

Wow! I commend your project 👍. It is very good and contains quite a lot of smart solutions

[still wadi]

My use case currently does not require offline access in dev, which seems unnecessary.

If I want to have the ability of service worker, I think I will use const worker = new Worker('my_worker.js') regardless of whether it is a PWA or not.

[midnight steeple]

Preview of EnhancedCache 😁. I wish I could release this much sooner but the lack of access to assets in dev environment makes caching one sided (you have to be in production mode - build everytime - to test caching), and as such, incomplete imo

[midnight steeple]

Auto versioning now being shipped too 👍. Cleanup old caches with ease

More features in the pipeline, current obstacle to a release is Remix team still stabilizing Remix Vite API. Would release nightly versions soon so you can also test

|| Very early announcement: || Thanks to Ray again, a new runtime is coming soon 🎉! @remix-pwa/precache-runtime. Includes a few new APIs compared to the current runtimes, best suited for offline-first/local-first PWAs as well as full offline support. I have also figured out (mostly) how to wrap workbox into a runtime. So we should hopefully see smthg on Workbox in Remix Q1 this yr

[midnight steeple]

Currently experimenting with removing the need for the self.addEventListener('message', (e) => {...}) and so far, it works! Plus, it's really easy to build yours. Simple instantiate the handler in your service worker and that's all. Remix PWA now takes care of the rest

I would be doing a nightly this week for sw package and deprecating the strategy and cache package later this month

With this working, having a PrecacheController or PrecacheHandler is much easier!

[midnight steeple]

Bonus, auto-versioning also extends to the message handlers 👍

[midnight steeple]

https://github.com/remix-pwa/monorepo/pull/133
Whew! Phase One done. Now to work on the precache runtime

[midnight steeple]

Merged

[midnight steeple]

At this point, Remix PWA is good to go for non-precache use cases in vite 👍. Ciao

[limber escarp]

has anyone published a remix pwa to the app store?

[midnight steeple]

I don't think so. Tried to do so once but the amount of work Google wanted to drive me through wasn't worth it imo (it was for a demo)

But I have generated signed APKs with remix-pwa before via https://pwabuilder.com

[midnight steeple]

Merging the current to main should occur later this month (hopefully). precaching comes out in the next major release after (delayed) 😬, I would also be working on the docs in the meantime.

# Current versions to use/test the latest features
- @remix-pwa/sw: 2.2.0-dev.2  # dependency
- @remix-pwa/dev: 2.1.0-dev.5  # devDependency
- @remix-pwa/worker-runtime: 2.1.0-dev.1  # devDependency

sw now ships with sub-module imports for better treeshaking. For example:

import { useSWEffect } from '@remix-pwa/sw/use-sw-effect'

// ...

export default function App() {
  useSWEffect()
} 

Speaking of useSWEffect. It now ships with a new API:

type UseSWEffectOptions = {
    cacheType?: 'jit';
} | {
    cacheType?: 'precache';
} | {
    cacheType: 'custom';
    eventName: string;
    payload?: any;
};

// defaults to `useSWEffect({ cacheType: 'jit' })` if nothing is passed
function useSWEffect(options?: UseSWEffectOptions): void;

You now specify your caching method via the hook. It can additionally be used to send custom messages to the worker when a navigation or document refresh occurs (everytime a user moves around your site). For example:

useSWEffect({
  cacheType: 'custom', // reading this again, this should be named smthg else
  eventName: 'MY_CUSTOM_EVENT', // name of your custom event - should be unique
  payload: { usersOnline: 4_029 } // custom info that would be send to the worker too
})

Would expantiate more on this in the documentation which should be shipping out around the time the releases are merged to main.

Regarding the worker, there a few new chnges. Most important is the removal of the need for the message listener. Just a navigation handler and you are good to go. Btw, the API ships with the following:

type NavigationHandlerOptions = {
  allowList?: string[] | RegExp[]; // by default, all routes are allowed
  denyList?: string[] | RegExp[]; // banned routes. they won't be interacted with at all
  documentCache: EnhancedCache | string; // name of the cache to cache the HTML of your routes. If a string is passed, would be converted
};

The worker-runtime now takes care of calling it at it's appropriate time, creating your own message interceptor is easy, just includes extending the abstract MessageHandler class, registering your custom event, and now useSWEffect would send your custom event and the runtime would handle the rest. Docs incomming (hopefully)

The major deprecation incoming is the cache and strategy package. By simplifying the process more (I must say, the previous methods were complex), not only do we get better UX but also perfomance and speed 😁. Worker loader and actions still retain the same APIs, no new changes incoming on that end.

Though, I am still deciding wether precache runtimes should support them or discard them? I am trying to create multiple use cases and they seem to just complicate the caching process more and more. Maybe there's something I am not factoring in? Would love to hear inputs from anyone interested. Btw, if you still use Remix Esbuild (non-vite), the new versions still support and would keep supporting them. remix-pwa CLI support would be dropped soon (or I might just revamp it, idk). Work schedule is quite hectic atm so I would be doing things in small steps for the time being. Contributions are welcomed, thank you in advance!

[idle valley]

Nice work man.
I only use caches API (to cache my offline.html), so, not the best to help here 😄

[lone solar]

@midnight steeple is there an example entry.worker.ts that works with the new Vite/dev stuff? I found the playground one included in your big PR but it has registerQueue from @remix-pwa/sync and some database thing, etc. - not sure what's safe to strip out

[midnight steeple]

Check the feat/vite branch. It's more tailored for testing dev. You can remove registerQueue and getLoadContext, it's doesn't have side effects or impact the SW. I was using it in two specific use cases

[midnight steeple]

It's actually the same with the dev branch. Strip out anything that has to do with context and database stores, as well as the sync stuffs

Only the cache, navigation handler and the install and activate listeners are included

[midnight steeple]

Still heavily a WiP, docs should start releasing soon enough 👍

[lone solar]

If I remove assetCache.preCacheUrls(['/entry.worker.css']) (as I don't have entry.worker.css) then assetCache is unused and can also be removed. Is that okay? Will remix-pwa cache my assets automatically or something similar?

[midnight steeple]

Yeah, remix PWA can't cache assets in dev anymore as vite doesn't expose them.

Assets are only cached in prod

I'm still figuring out the tiny details left for asset caching in dev, even if it's a minor caching

But in the service worker, you can remove it and your app would still work

[lone solar]

Are you seeing this in VSCode by chance? Seems to work, so not sure why it's crying.

[midnight steeple]

Ctrl+Shift+P - Reload Window. Sometimes, TS gets weird for no reason

If it is still there, can just import from /sw

[lone solar]

yeah I've tried all the usual things like that 😅

[lone solar]

yeah this works, was just curious if I'd miss out on a smaller bundle

[midnight steeple]

Well, importing from /sw/use-sw-effect imports only the hook file and typings instead of the whole thing. By default, Vite treeshakes, but sometimes, tiny extras can creep in

So, it depends on how vite decides to remove unwanted imports. The exports are structured so they can easily be stripped by a bundler

But you can never say just how much would be stripped

[lone solar]

just tested both ways, doesn't appear to make a difference 👍

[midnight steeple]

Seems to treeshake very well, 👍. Nice to know Vite has a fantastic tree-shaking

[midnight steeple]

Remix PWA site is down. Seems I broke deployment and can't even figure it out (yet)

[sturdy swallow]

Ah the right of passage

[midnight steeple]

Yayyy! We are back online. Now has versioning (dev is a WiP). The whole site is still undergoing some changes but the docs are now rolling out
https://remix-pwa.run/

Wtf is that image

or 2

The site is still broken. I seem to have made it worse 😂, can I rollback on fly? Hope so

Rollback successful.

[solar wave]

Wish I could be able to follow more all the updates and the work you've been doing with Remix PWA @midnight steeple! Added my little grain of salt to your GitHub sponsors! Keep it up mate!

[midnight steeple]

Thanks Daniel 🎉! Very grateful for the support ❤️

[idle valley]

Any EU devs here?
I just saw that on X

https://x.com/mysk_co/status/1754978973417672794?s=46&t=ARgI_m0V-2Wi03uNIulYxQ

[midnight steeple]

Remix + Swift incoming

Jk, you would need to bribe me and hold me at gunpoint to create an OSS project for Apple ecosystem

[sturdy swallow]

Aka dead on arrival source 😂

[midnight steeple]

https://medium.com/@dannymoerkerke/apple-wants-to-kill-pwas-0895be2e497b

RiP 🕊️

[idle valley]

Crisis call yesterday with my client. Let's see what happens.
Fallback is an expo app, using Remix and or Hono as API

Or trying to bundle a pwa in a native shell 🤣🤣

[modest holly]

painn

i like pwas personally

like as a "user"

[idle valley]

new favorite meme unlocked.

[midnight steeple]

Kent mentioned Remix in React Native. Might just look at that

[idle valley]

I still can't believe it is definitive 😅

[midnight steeple]

What is definitive?

[idle valley]

Hum, missing some 'could' in this sentence lol

[midnight steeple]

I'm confused 😭

[midnight steeple]

https://twitter.com/gregberge_/status/1756181206654476635?t=5o0FIOEMb3AHFaNhAeGoqg&s=19

Back to good news

Greg Bergé (@gregberge_) on X

React v19 will support Web Components. https://t.co/p4cXI5cbIj

Twitter · Feb 10, 2024, 5:00 AM

[modest holly]

wh yis it good

[midnight steeple]

Not related to PWA, generally building in JSX. Web components allow for versatility with custom elements and behaviors. Think reusable behavior in HTML

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

I haven't played around with it, but I hope to dive in once it gets to nightly

[midnight steeple]

https://thenewstack.io/introduction-to-web-components-and-how-to-start-using-them

A great starting point that showcases the potential of web components

[idle valley]

PWAs are dead in EU on iOS... All these months of work lost...

[midnight steeple]

https://twitter.com/mysk_co/status/1758196103470628983?t=jmYLwetM5cF2_0_P_BnsRQ&s=19

Beat me to it, was about to post the devastating news myself

Mysk 🇨🇦🇩🇪 (@mysk_co) on X

It's official. iOS will not support Progressive Web Apps in the EU.

It would be great if Apple provides the basis of this claim:

"We expect this change to affect a small number of users"

Twitter · Feb 15, 2024, 6:26 PM

Not the end of the road imo, I've seen a small project integrating Vite with React Native. I'm exploring it, since Remix is just a vite plugin, how easy would it be to just fuse them?

[idle valley]

Tomorrow, I have to announce that to my client. 1,5 years building his project...

[midnight steeple]

Sht. That's a long time 😞

[idle valley]

Bye invested money (and a part from EU 😂). An me who told him to trust me, PWA was the future....

I can't even guarantee that a native app will be accepted by Apple 🙄

[midnight steeple]

PWA should be the future. I mean I RT'd a tweet yesterday about using Unreal Engine 5 in the browser. The web is the platform, not multiple apps for multiple platforms

I would be patching Remix PWA but would start exploring Remix Native

Apple users are too many to ignore

[zenith pulsar]

Trust me getting ur flutter app accepted by apple is a nightmare so native apps might be next ?

[zenith pulsar]

Start saas converting react code to react native?

[idle valley]

Previously I was a React Native Expo dev. My first submission was ... 😂

I LOVE so much Remix. I can't imagine starting from scratch on something else

My loaders, actions, fetchers 😭

[zenith pulsar]

Yup feels bad

It might be hard now but we have to move forward

All the best 💯

[midnight steeple]

Not really, being able to build native and web apps with the same codebase. Using remix vite

I have a few ideas already 😂

Not sure how possible it is cause integrating native code with JS and React has always been an issue

But I would try 😄

[zenith pulsar]

🫡 hats off to you loads of dedication

[idle valley]

React Native is the hard part 😬

Expo has announced they wanted to evolve to something primitive based. Who knows... maybe something to watch?

Their router v3 looks like Remix ft Next. They plan something for their router v4.
https://youtu.be/qsRI8T5V99g?si=eGQ7swK52hS2TGPa

Then they'll discuss the v4 road map which aims to unify the server-client connection and introduce server components. They also touch on the future of Expo Web and its separation from the core native platform.

[midnight steeple]

Yeah, saw the part of their file based routing too. Are they free @idle valley? That would mean hopefully less work

[idle valley]

I think all is open source. Even their build server (with some limitations)

New pricing is also... well they have to earn money. Looks like Vercel for native app 😇

The benefits they provide is great, so, I would be happy to subscribe again.

[midnight steeple]

🤔 hmmm. Would check them out and more this week

What apple did isn't cool

[idle valley]

Shopify should buy expo. Problem solved

[smoky fossil]

Rename Remix to React Router Server and Expo to React Router App.

[midnight steeple]

That would be a monopoly 😂

People already love remix for the web. Imagine a remix dedicated to native? Shopify would just be the new Meta

If they make that move, remind me to buy more Shopify shares 🔥

[idle valley]

EU is watching you 😂😂

[smoky fossil]

Would this count as Insider Trading? Asking for a friend.

[midnight steeple]

Obviously not 😂. It's called having a good lunch 🤣

[modest holly]

that guy

he is a badassx eng

such sharp engs are so motivating

[idle valley]

Will try https://www.pwabuilder.com/ and report back (if my client is ok to continue my mission ........)

[idle valley]

It builds and starts, with safearea padding issues. I'm not able to test on physical device (no Apple developer paid account yet).
So I don't know for push notifications (pwa builder implements Firebase notifications)

[idle valley]

My innovative new app: a Remix PWA 😂

[idle valley]

Push notifications (iOS) require an extra work :/

It requires a bridge swift <> wrapped PWA and using Firebase FCM (the most used in examples). Not an easy conversion (I'm using web push, so maybe I can opt for FCM)

For iOS only (admitting you want to wrap your PWA only for it): https://github.com/khmyznikov/ios-pwa-wrap?tab=readme-ov-file

[midnight steeple]

👍

[idle valley]

My client is not sure about that. But I have already lost 99€ lol so I can try and share it on GitHub if I make something that work with Remix PWA 🤷‍♂️

[lone solar]

how you feeling about Vite in the current @dev version of remix-pwa, @midnight steeple? everything seems to be working for me, thinking I'm just gonna ship 🙂

[midnight steeple]

Great, it's good to go. Tbh, it's still in dev because I haven't written the docs yet. I've been on a break from work and OSS. Would be back this week/next week

That's why I've been silent

[lone solar]

all good, enjoy your downtime!

[modest holly]

https://twitter.com/wesbos/status/1763599179551584449

Wes Bos (@wesbos) on X

We did it! Apple is backing down on their decision to nuke home screen PWAs in Europe.

https://t.co/zNj9uosAYd

Twitter · Mar 1, 2024, 4:16 PM

seems like good news

?

[idle valley]

seems like lol but I already have lost my job 2 days ago xD

[umbral willow]

Is v3 running on Vite?

[midnight steeple]

v3 nightly supports vite, yes

[limber escarp]

now that we have vite and there is https://vite-pwa-org.netlify.app/ do you see there being a need for remix pwa? I noticed vite pwa supports workbox already

[midnight steeple]

😅 Yes. Vite Plugin PWA customisability is very low and is lacking with regards to some functionalities and quirks of Remix. @still wadi has first-hand experience with that. Asides that, Remix PWA isn't just for Remix Vite. But Remix Esbuild & Remix Vite.

Still have a lot of work to do regarding vite but haven't got time atm.

And Remix PWA has a few ups over vite pwa plugin like workerLoader and workerAction

[midnight steeple]

👀

[midnight steeple]

👀

[rain dragon]

You can abandon the Esbuild compiler. We have / will be.

[midnight steeple]

😌 Making great progress. Hoping to reduce release bugs before v4 👀

[midnight steeple]

The last few steps...

[midnight steeple]

Still wrapping up the docs, taking longer than expected but hopefully would be ready for deployment and release before 2 weeks elapses. Spoiler 👀

[modest holly]

💪

[idle valley]

https://github.com/vite-pwa/remix/tree/v0.0.1 🤔

[midnight steeple]

Seen the project. It is an interesting one, vite-pwa is heavily workbox (which I don't mind and also haven't figured out runtime-wise). Very different from remix-pwa yet similar. Speaking of which, one more page left before the whole doc is done 🥳 (EnhancedCache). Another spoiler

This update should be bringing in a few stuffs. A new CLI, swappable runtimes 👀, no more esbuild (now vite 💯) - much smaller and compact packages. And a whole lot of utilities! Plus much more I won't say 🤫

[midnight steeple]

After that, to build a new landing page and then merge the current working branch to mainstream and voila! v4

[modest holly]

remix + vite?

nice

glad that one already exists

[idle valley]

The worst that can happen is to have 2 libs for the (exact) same thing 😅

[midnight steeple]

https://github.com/remix-pwa/monorepo/pull/144 🥳

My back hurts 😂. These docs were wicked

[midnight steeple]

Planning on releasing the docs before the packages. So hopefully, release in a week?

[midnight steeple]

https://remix-pwa.run 🫡

Packages to be released soon ❤️! Docs are designed incrementally this time, so animations and more colors would be rolling out later 👍

[midnight steeple]

People really downloaded an undocumented, unfounded and mysterious package 👀

Remix PWA v4 has been released 🎉

[sturdy swallow]

fun fact, every time you release something to npm it creates around 30-40 downloads itself for mirror services etc

[midnight steeple]

Ah, okay. That's why

Weird tho

[sturdy swallow]

yeah that's how I got my first npm package to 1k downloads, then I realized it wasn't real users 😦

[midnight steeple]

Remix PWA v4 includes:

• New vite plugin: No more esbuild, just one plugin and all your needs are taken care of.
• Overhaul of the sw package: A partial re-write. Now smaller, treeshaking is even better and ships with a lot more utilities
• Worker-runtime has been upgraded to vite
• Swappable runtimes: Change the entire behaviour of your application with one script 😁. The docs finally explains what runtimes are, and you get to build a simple one too
• Cache API overhaul: They now work in tandem with remix client route modules. Less abstraction, more supercharging
• client package has recieved a massive buff. With a lot of new hooks and utilities, building should be much easier
• Deprecated cache and strategy

That's the major breaking changes/features I recall. Check the docs for a full rundown. This version is being released incrementally (more iteration) btw, meaning I would be processing requests and issues much faster.

[lone solar]

Congrats on shipping v4 @midnight steeple! 🎉 Been reading through the docs, but is there an example anywhere of a simple entry.worker.ts that just caches documents and assets with reasonable defaults? My head is swimming from all the options when it comes to configuring it myself. 😅 I can go through it slower and try to make informed decisions for each option, but was hoping for something more drop-in that would work for your typical Remix app (while all the options would be available to tweak for your more advanced use cases).

[midnight steeple]

Firstly, thanks so much ❤️! Nope. I broke it up into pieces. A few docs were hidden because I'm not done with them. I would be putting things together in the next few weeks hopefully to cover it

I would also note that regarding assets, remix PWA doesn't have an explicit way of managing them yet. Assets in production are easy to access, but in development, due to the way assets are discovered, I would have to figure it out.

But I have a few ideas on how to tackle it, I would be trying them soon enough

[lone solar]

Ah, okay - sounds like I should just wait a bit then. 😁

[sick moon]

FYI: vite-plugin-pwa and any integration can be used without workbox, only used for simple sw via workbox-build and the generateSW function, you can write your custom sw without any workbox dependency usinng injectManifest strategy (injectionPoint must be set to undefined in injectManifest option)

[midnight steeple]

Thanks for that heads up. Didn't know

[midnight steeple]

@sick moon you are vite-plugin-pwa creator, right?

[sick moon]

Yes

[midnight steeple]

Love your work !

[sick moon]

RemixPWA has offline support?

[midnight steeple]

Yeah

[sick moon]

Vite pwa has some problems when ssr enabled, i have no idea how to solve that problem, rn getting the index route source file and calcularing the hash for the revision

(Precaching)

Rn remix can only work as spa or ssr app, there is no hybrid mode and ssg (full or partial)

[midnight steeple]

With regards to preaching, Remix PWA hasn't been able to solve it yet. For precaching to work, the service worker should have access to the assets (scripts, stylesheets, etc.) as well as document and server data (loaders). It's easy to get the document and loader data, but getting access to assets is something I haven't figured out. If you attempt to precahe without assets, the app would work. But stuffs like styles and animations, etc. would be missing.

Vite pwa has some problems when ssr enabled, i have no idea how to solve that problem

Do you mean caching during SSR, or precaching during SSR?

[sick moon]

Peecaching

Pwa plugin will allow use network only or network first with cache support (spa or ssr or api calls)

You can check the sw vite plugin

It exposes the routes

You can enable vite manifest to get the client assets and expose them

You will need to use a remix preset

The preset will expose the routes

Check also the sw folder

You can use fast glob or similar with a vite plugin to traverse client output folder

[midnight steeple]

Thanks. Would check rn. That's what remix pwa previously used before remix moved to Vite.

[sick moon]

With Vite you need the lifecycle of both , vite and remix: remix plugin will run another internal vite build

Check this repo:

https://github.com/userquin/remix-pwa

[midnight steeple]

Realised the same. In Remix pwa case, I just used Remix plugin internally and used it's lifecycle instead of the lifecycle of both

Cause remix created a child Vite dev server which is dependent on Vite itself

[sick moon]

If you want precaching client assets you need both

(Maybe not 😅)

[midnight steeple]

By client assets do you mean images, fonts, etc. Or routes and route data?

[sick moon]

Yes

And client assets

If you use ssr you will have client and server folders, inside client all client js files will be on assets subfolder (can also be precached)

Pwa remix plugin will include them using custom globPatterns (workbox)

https://github.com/vite-pwa/remix/blob/main/src/config.ts#L67

[midnight steeple]

Yeah, but note that remix only build them in production. When running in dev, they aren't put in the build folder.

Would confirm tomorrow, but I think the server index.js file contains all assets as well as their revision (when building in SSR)

[sick moon]

Pwa plugin disables precaching in dev mode with devOptions enabled

[midnight steeple]

Ah, okay 👍. That's what I was told to do too 😅, but I decided to not disable it in dev as that means not being able to debug precaching in dev. So I have to find a way to get asset in dev

[sick moon]

You shouldn't, dx and sw dont play well together

You shouldn't intercept any request in dev

Dev mode with pwa enabled shoild be only to test web manifest and advanced features like push notifications and web shared target api

Once tested it should be disabled

https://x.com/userquin/status/1606967107325165570?t=Yt-2vtoIyCIG2Gb3KC9KNA&s=33

Joaquín (@userquin) on X

Debugging push notifications on Elk (Nuxt 3) using Android device on local dev server 🤯:

Twitter · Dec 25, 2022, 10:56 AM

[midnight steeple]

👍 A few users complained about that. Not being able to intercept requests in dev, as that means they can't test efficiency of their sw before pushing to prod.

I also understand that the DX of SW is quite weird especially in dev. There's no cleanup, sw might step in each other and it's a hassle to actually make them work. My approach with that (especially in Remix PWA where you write sw code in your route files) is to run sw in sandbox mode in dev and run them normally in prod.

That way, you minimize DX pitfalls in dev and prod works as expected

[sick moon]

The response, build + preview

User can intercept requests, but not precaching, you can be testing wrong app version

I have some issues also using msw

You cannot have 2 sw in the same scope

[midnight steeple]

I think this would be the optimal way. Intercept loader and action requests in dev, precache in prod

[midnight steeple]

Yep. That is why remix pwa has a strict one sw policy. Bundle everything into one large sw at the base dir and serve from there. If the user wants more than one sw, then they use importScript to import the different workers into one file and serve that on the base scope

[sick moon]

Pwa plugin disables precaching and offline in dev (page refresh will redirect to the offline page)

How do you build the sw?

(Maybe no build?)

[midnight steeple]

Using the user entry worker, and a few virtual modules (to handle routes, assets and fetching), I use the Vite build function while utilizing roll up to bundle all that into one file.
https://github.com/remix-pwa/monorepo/blob/main/packages%2Fdev%2Fsrc%2Fplugins%2Fbundler.ts#L14

[sick moon]

Vite build can also do that

[midnight steeple]

It's Vite build I use.

Vite build uses rollup under the hood for handling the bundling part

[sick moon]

https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/vite-build.ts

[midnight steeple]

Something similar to this is what remix pwa does. Only that because we use route code too, it's a bit bigger

[sick moon]

You can solve this adding virtual modules in vite plugins

The register them also in the build

Reusing some code in dev and build modes

https://github.com/vite-pwa/remix/blob/main/src/plugins/index.ts#L14

https://github.com/vite-pwa/remix/blob/main/src/config.ts#L47

[midnight steeple]

https://github.com/remix-pwa/monorepo/blob/main/packages%2Fdev%2Fsrc%2Fplugins%2Fvirtual-sw.ts

Created a few that are exposed. For customizing service worker behavior. Reused in dev and prod via process.env.NODE_ENV

[sick moon]

Nice

[topaz oar]

Is there any working example with Remix-pwa (v4) with offline support?

[midnight steeple]

Should be next week 🤧. My schedule is all over, but I plan to update the docs next week and add some more guides

[midnight steeple]

Doing some fixes, plus adding asset support to Remix PWA and a few things came up:

• Might have figured this one out
• useSWEffect now detects document refresh as well as client navigations
• Remix PWA doesn't (fully) support Remix SPA mode. If you are using SPA mode, would recommend: https://github.com/vite-pwa/remix 😁 - (you can make it work, but the absence of a Node server & server loaders and actions means it doesn't offer much advantages compared to vite-pwa)
  Would update the docs to reflect these changes and anymore I make, dropping this in the meantime for review 👍. The guides are still coming as planned

[sick moon]

@midnight steeple Just to tell you that it was not my intention to be the competition, I saw that it was easy to add the integration in vite pwa org. and I didn't check remix plugins, I didn't know about the existence of remix pwa until I saw the tweet

I added support for iles and contributing in qwik dev pwa and serwist gh repos

If you need help to integrate pwa assets generator ping me here

[midnight steeple]

Not at all 😄. Whilst solving the assets issue, I decided to run the tests against Remix in SPA mode and it was not pretty. I had to make heavy edits to make it work, after looking at how I built Remix PWA, it wasn't planned to support SPA (anytime soon). And I used vite-pwa as an inspiration 🫣 (for example, the context resolver plugin: https://github.com/remix-pwa/monorepo/blob/main/packages/dev/src/plugins/main.ts is heavily inspired from how you created a global context), so it felt right to just leave SPA for now since you have a working solution 🙂

[sick moon]

Uhmm, you are talking about the assets, I was talkibg about generating all pwa icons and inject then in the web manifest on the fly

Check pwa-assets example

[midnight steeple]

Oh, my bad 😅

[sick moon]

Also html favicon, pwa icons and theme-color via virtual (in dev server and build time)

Ofc ppl can use the pwa assets generator cli

[midnight steeple]

Just checked it out 💯. I would probably just build on top of what you have and introduce manifest injection, if u don't mind 👍
Though, you generate yours on the fly via the plugin, Remix PWA generates it's own on the fly via resource routes or a static manifest json file.

[sick moon]

You can copy/paste the code in the src/pwa-assets folder from vite-plugin-pwa (adding the pwa assets generator as opcional peer and devDep, check the package.json)

Once you have that logic you only need to create your vite plugins

Check also the ctx and how it is initialized (in the main plugin), maybe you can also copy/paste the pwa-assets plugin

Since you dont use transformIndexHtml (missing html entry point), you can also remove the hooks

(Vite hooks)

Vite pwa plugin doesn't support static web manifest injection

You can disable the manifest and put it in the public folder, the pwa plugin will not work

You only need to get the static web manifest (adding the name/path to it in some confguration optio ) and the code in the pwa-assets should work (just a few changes in the corresponding remix pwa plugin)

Beware with Vite, will copy public folder after build finish, can be a problem

Check the step 10 in the vite build cli svg image here https://vite-pwa-org.netlify.app/guide/cookbook.html

[midnight steeple]

The cookbook looks great 🔥

[sick moon]

You should add also self destroying sw

https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html

[midnight steeple]

Remix PWA ships with utilities to use to do it manually if you deem fit. Mainly via the usePWAManager hook: https://remix-pwa.run/docs/main/use-pwa-manager#update-available. You can use this together with the registration to create an automatic sw cleaner

[midnight steeple]

Quick poll, I am currently writing and building the guide for offline app.

👉 What app do you think would cover as many use cases as possible in a simple manner? Without complicating matters ofc

I was thinking of a mobile note app, it would be tailored to just small screens. That way, being able to showcase extra features like installability, publishing to app stores (APKs, etc.)
The downside is that it won't be presentable on large screens
The upside is the workings would stay the same, the only thing that would need to change is designing a new layout

cc @lone solar 😅. Would love your input too. That way, the guide is just the right size for everyone

[topaz oar]

epic stack offline version?

[midnight steeple]

🤔

Done

[lone solar]

Not sure I have much value to add here. In some of my Vite apps (prior to Remix), I'd just install vite-pwa and trust its zero-config "Sensible built-in default configs for common use cases" to behave as advertised with regards to caching/offline stuff. 😅 I'd like to see the simplest possible setup that gets us installability and some basic caching with knobs to turn when necessary.

[midnight steeple]

Janne's idea about Epic Stack is perfect then. 👍

[midnight steeple]

https://remix-pwa.run/docs/main/offline
Done with the offline guide 🎉! A brief guide with a few bonuses. I'm exhausted 😴

Just saw I missed a bonus section out by mistake: sw update prompt. Would fill that in when I wake up 👍

[modest holly]

@midnight steeple

how is it looking

i havent taken a look

is it production ready, are people using it?

[midnight steeple]

Yeah, it's production ready. We used it at my last workplace. Scandinavian airlines also use it in production, planning on also adopting it at my current workplace. Those are the ones I remember of the top of my head

[midnight steeple]

I have deleted @remix-pwa/push package from the remix-pwa registry, because I am creating a new push package and the workflow I use doesn't allow for continuing versions from random spots. The old push package should still be installable via github, but a new one is underway. Hopefully, would be out soon too

[modest holly]

👍

[frank moon]

I am using it for piqy, a pickup display monitor software. Numerous large food franchises in Germany use it.

[midnight steeple]

wow! I'm so glad it is useful for so many people. Drives me to make it much better for everyone

[midnight steeple]

New update dropped for further control over service worker lifecycles - creating an update system within your PWA just got possible. Used it to create a very simple update prompt in my epic stack example: https://remix-pwa.run/docs/main/offline#service-worker-update

Packages affected: @remix-pwa/sw, @remix-pwa/client

Plus usePWAManager hook got an upgrade, a new message handler dropped for fine-grained control over sw waiting cycle and a few utilities within the sw package 👍

Also, re-published the old push package under the namespace: @remix-pwa/old-push. The @remix-pwa/push name is reserved for the incoming package

[midnight steeple]

👀

[modest holly]

wow

🔥

[midnight steeple]

New hook, few utilities and tweaks all over in the latest releases. The CLI should be getting a new publish soon, I've added a new command: update. To allow for easy upgrades
That and npm workspaces is giving the push package an issue

[modest holly]

🔥

[midnight steeple]

To be released next week: @remix-pwa/push! https://github.com/remix-pwa/monorepo/tree/feat/push/packages/push
Rounded up the main concerns and features, I still have docs to write so that might delay latest release but I would try and push to dev early

Btw, looking for co-maintainers for remix pwa 🙃. If anyone feels they are up to it and want to, you can holler. That includes access to the docs as well 🤧

Just realised I hadn't published [email protected] yet so just publishing 🎉!
The new addition is the update (alias: upgrade) command. Allows you to easily update all @remix-pwa/* or select packages to the latest. This problem is annoying to me, when I need to update dev and some other dependencies and need to run two different commands for --save-dev and --save, with the update command, you can do:

# upgrade all @remix-pwa/* package that exist
npx remix-pwa update|upgrade

And to upgrade select packages, do (via the --packages/-p flag):

# update just @remix-pwa/dev and @remix-pwa/sw
npx remix-pwa update -p dev sw

There is also a -r flag for pointing to the root. Useful in a monorepo, by default it is process.cwd():

npx remix-pwa upgrade -p sw -r ./app/remix-app

Note that both flags are not compulsory. Defaults to all packages and process.cwd()

Would update docs later

Btw, all @remix-pwa/* packages are supported. As long as it is available via npm

[pale bone]

Any step by step with no step skipped tutorial on implementing remix pwa in an existing remix app. I successfully switched to vite but cannot wrap my head around the pwa part. Any leads will be appreciated.

[midnight steeple]

I personally haven't written one yet, but others in the community might have one. I am considering doing a full walk through in an article soon enough

[pale bone]

Yeah, having it in the docs will help a lot

[misty fractal]

There's an official Vite PWA plugin now for remix, any quick summary of what's different (responsibilities, philosophies, can you use them together?) between this and Remix PWA?

https://github.com/vite-pwa/remix

[midnight steeple]

In short, Remix PWA is suited for SSR use-cases, whilst Vite PWA is suited for both. Remix PWA also provides solution for more than just service worker and manifest: background sync, push, and various utilities to assist with Remix APIs
The main difference between them in SSR apps is that Remix PWA provides more utilities tailored towards service-worker-as-a-server which boosts its customisation and capabilities without much complexity overhead.
Regarding philosophies, Vite PWA builds itself on Vite and then extends itself towards Remix. Remix PWA is built on Vite to specifically leverage the Remix vite plugin & server
Can you use them together? Yes, I suppose. But it won't be worth it. Both are built to be standalone sw plugins with their own pros and drawbacks 😁
Fun fact, the creator of vite pwa is in this post 🫣

[midnight steeple]

Published the CLI updates

Docs for push also in progress

[sick moon]

@vite-pwa/remix is not official, when I started doing it I didn't look to see if there was any existing solution for Remix, someone on Twitter asked me if I knew Remix PWA after I published my plugin.

I would have saved myself a lot of work with some contribution to the Remix PWA.

(As soon as I have free time I will see if I send a PR to include @vite-pwa/assets-generator in Remix PWA)

[midnight steeple]

Published @remix-pwa/push! https://www.npmjs.com/package/@remix-pwa/push. latest tag should be publsihed soon enough, I jinxed the docs writing process and fixing it is taking longer than expected

[sick moon]

anyone using module resolution node (node10) 😬

the fix should be easy, add client in the paths

[midnight steeple]

The module & module resolution was set to NodeNext for this one

And the paths were just import

[sick moon]

anyone consuming the package with node10...

should be dist/client/

[midnight steeple]

Would need to update to import and require

[sick moon]

the paths are wrong

main and types in package.json

you should use node as the default

[midnight steeple]

Just realised. Thanks for pointing it out. I copied over the package json from (I think the dev package)

[midnight steeple]

Instead of nodenext?

[sick moon]

no

I mean, the default package

forgot it

the server subpackage is a node thing (vite plugin?) => use . as the default => node

you're using the client as the default

you can also check this repo, ESM for workbox without generateSW module in workbox-build

https://github.com/serwist/serwist

ESM only

(it is about the workbox-runtime in Remix PWA)

[midnight steeple]

Thanks a lot 👍

[midnight steeple]

Please what site is this? I want to re-run the patches

[sick moon]

https://arethetypeswrong.github.io

you can also use it from local

I also use publint

https://publint.dev/

can also be used from commandline

[sick moon]

you can run pnpm pack and upload the tgz or use the cli to check the package types

[midnight steeple]

I mean to view the resolution table. Where am I uploading?

[sick moon]

check details at the bottom

entrypoints

you should use typesVersions to redirect the default entry (I suggest you to remove/change the output folder, don't add server subpackage, use it as default)

(I didn't check the code, I guess server is the vite plugin/remix integration)

[midnight steeple]

It is just a set of utilities that are server-only. They don't run with vite, but I agree. Using that as the main export, removing server (its just verbose) and leaving the rest as is

[sick moon]

you also need to use typesVersions to redirect client and use-push subpackage exports

"typesVersions": {
    "*": {
      "client": [
        "./dist/client/index.d.ts"
      ],
      "use-push": [
        "./dist/client/hooks/index.d.ts"
      ]
    }
  }

add the entry between exports and files

upps, I'm using the package.json in dev/push branch

it seems the published version doesn't have use-push

it is hook

https://github.com/remix-pwa/monorepo/blob/feat/push/packages/push/package.json

[midnight steeple]

Yep, I am yet to do that. Lemme open the PR

[sick moon]

https://arethetypeswrong.github.io/?p=%40remix-pwa%2Fpush%401.0.0-dev.2

[midnight steeple]

Was creating some new utilites

[midnight steeple]

Seems fixed. It's now -dev.5

[sick moon]

nice

[midnight steeple]

Thanks a lot

[sick moon]

I'll check all remix pwa packages

(in main)

client needs typesVersions for client/utils and client/hooks

the fix is the same

[midnight steeple]

Yup, as well as sw. Would create a fix branch to fix all that

[sick moon]

ok

[midnight steeple]

Pushed @remix-pwa/push to main!
Docs now available via: https://remix-pwa.run/docs/main/push-api. Lemme know if the docs need further clarification, I would be creating more resources as time goes by
cc @idle valley

[sick moon]

how about @remix-pwa/dev? there is no exports entry and a lot of subpackages there

do you want all subpackages exports?

rn only default + dist

why search not working in FF and chrome (docs)?

(Windows laptop)

[midnight steeple]

On the docs? I haven't implemented it. I would start on it tonight

[sick moon]

ohh, ok

[midnight steeple]

There are meant to be none tbh. Was just checking it and saw / and /dist. The dev only exports the vite plugin

[sick moon]

I'll add also the default package export to all package.json

strategy package seems to be missing/excluded from root build

[midnight steeple]

Deleted it in the fixes branch - it is deprecated. As well as cache

[sick moon]

@midnight steeple https://github.com/remix-pwa/monorepo/pull/205

[sick moon]

ok, also fixed

https://github.com/remix-pwa/monorepo/pull/205/files#diff-2f4b443951df56481d8e2154dd8841ab2166dfb06239563448ba95b953faf4ccR12-R13

the types using ./types

use always types + default

in that order

(it is a suggestion from publint, also including subpackage exports)

(running npx publint in package folder)

upps

what's wrong with my PR?

I've only touch package.json files

[midnight steeple]

package lock is not synchronised. Could you pull from upstream again?

[midnight steeple]

Yep, but I didn't know you were working and I was making changes

[midnight steeple]

The workflow uses npm ci to install deps

[sick moon]

oh, I run npm install, lock file modified, I just revert the change

I cannot resolve conflicts in the PR (cache and strategy package.json files)

just added the exports

[midnight steeple]

Might need to re-pull main.

Since I deleted the cache and strategy. Thats a huge code chunk

[sick moon]

ok

upps, so I need to use dev branch

[midnight steeple]

Yeah 👍

any branch > dev > main
gh actions take care of the releasing and versioning

[sick moon]

https://github.com/remix-pwa/monorepo/pull/207

check again https://github.com/remix-pwa/monorepo/pull/207/files#diff-2f4b443951df56481d8e2154dd8841ab2166dfb06239563448ba95b953faf4ccR12-R13

using ./types/index.d.ts

[midnight steeple]

Just getting back from my martial arts class, would take a look

[midnight steeple]

Forked your project and made a PR: https://github.com/userquin/remix-pwa-monorepo/pull/1
This should fix broken runs

[midnight steeple]

@remix-pwa/[email protected] patch released: https://github.com/remix-pwa/monorepo/pull/212
Focused mainly on bundle-size, this new patch reduces unminified code bundle sizes by about ~15-30% and minified by about ~20%. Building now takes a bit longer tho, so an extra 50-200ms is expected

[pale bone]

Is remix-pwa production ready?

[misty fractal]

several companies are using it in production and to my understanding the maintainers are mostly folks using it in production at various companies

[pale bone]

I need to implement it in my application, but i haven't come across a well thought out tutorial. You have leads to an article about it @misty fractal ? I see the official documentation explains components of the library. Not how to go about it.

[misty fractal]

I don't know one off hand unfortunately

[misty fractal]

This is an integration of Remix PWA with the Epic Stack, which you could use for a project or check the last two commits where the integration happened https://github.com/ShafSpecs/offline-epic-stack

[midnight steeple]

Hopefully, you won't need to wait much longer. Didn't intend to spoil it before it was done (still quite a lot of things to wrap up), but wanted to assure you that I am doing something about the lack of a guide. Building from scratch btw

[midnight steeple]

Still nowhere near done, it is much longer than I expected 🤧. This is hopefully going to turn out epic - sorry for the extra wait

[midnight steeple]

Major @remix-pwa/[email protected] release just dropped.
Complete overhaul of syncing and queueing in Remix PWA + added logging support for better developer experience.

Temporarily taken down the background sync guide. Should be up later this week (or next week 🤧) with up-to-date content.

[exotic swift]

Is there a fix coming for this? Using latest remix version and latest node version:

Fixed on my end by editing the import to what the error message told me to do

[exotic swift]

Does anyone have any idea how to handle opaque responses within the service worker? I have been stuck on trying to get discord auth to work with remix-pwa and caching. Any help will be appreciated

This is what I've been trying to fix:

[midnight steeple]

Yep. My bad, I thought I fixed this 😅. Bcrypt is a CJS package so it only exports default

[midnight steeple]

Not much. All I know are working with opaque responses (responses from a 3rd party) are tricky due to security issues

[exotic swift]

Yeah, I just decided to take out the cache in service worker, too advanced for me lol

[midnight steeple]

You can patch it (via patch-package) and install the fix later on

It would be just as you patched it, run patch package to save the changes and go about your day

Won't be able to ship a fix for a few hours. I'm exhausted

[exotic swift]

No problem at all

[exotic swift]

This just started happening again even without the cache. So weird. Something is wrong with how the service worker handles requests, even though I have nothing for request handling in the entry.worker.ts file

Yeah seems to only work when I unregister the service worker :/

I wonder if it’s just with remix-auth-discord? I’m going to try some other methods and see if it still happens

[exotic swift]

Yeah it's with all strategies, even the magic link email authentication

[midnight steeple]

You an upgrade remix pwa/sw. The new caches allow you to ignore routes

So the strategy skips them

https://remix-pwa.run/docs/main/cache-api#type-signature

[midnight steeple]

You shouldn't be caching auth routes (most of the times) anyway

[pale bone]

@midnight steeple its two weeks now, anyone who has implemented pwa successfully in his remix project?

[midnight steeple]

Sorry about the guide delay. Between multiple burnouts and an illness, I've dragged my feet with it. Good news is that it's mostly done now. I would focus on it tomorrow and try to release smthg this week

Anyone successfully integrated Algolia into their site? It seems broken with Vite and is delaying the next doc update

Docsearch React, I mean 👍

[midnight steeple]

Hello Karson, regarding the opaque error you encountered, were you trying to handle a redirect?

[fleet niche]

Potentially very silly question about this project: would this be compatible with a project running in "SPA mode"?

[midnight steeple]

I haven't tried it. I don't think so though. Haven't dived fully into it yet

@exotic swift This should fix the opaque response issues: https://github.com/remix-pwa/monorepo/pull/229.
I didn't fully comprehend what you referred to earlier 👍

By implementing a "No cache" policy out of the box, opaque responses are always discarded. Would implement an opt in later in the future

[midnight steeple]

@pale bone https://shafspecs.hashnode.dev/remix-pwa-practical-guide
Finally out 😅

[pale bone]

Thanks @midnight steeple

I will look at it.

[exotic swift]

Yeah I think so, always happened on the auth/discord/callback

[pale bone]

I keep getting the below error whenever i run the npx remix-pwa <...> commands

[exotic swift]

Update node

v20

I had the same issue on any other version except v20

[pale bone]

Updating node to v20 fixed it. Thanks @exotic swift

[exotic swift]

Np

[midnight steeple]

v20 and above. importing .json files got a change in v20

So I reverted to v20. I would add a disclaimer to the docs

[pale bone]

This error is breaking my app in production on mobile devices safari and opera browsers

Cannot read properties of undefined (reading 'getSubscription')

[pale bone]

I had to disable the push functionality. I only had the usePush hook and pushManager decalaration in my worker file.

[midnight steeple]

Thx for the heads up. Would look at that this weekend

[midnight steeple]

Could you please send me the link of the production site? So I can get an idea of where it gets broken

[pale bone]

I will share with you a staging instance. In prod it was affecting my users, i disabled it.

[midnight steeple]

Are you using the unsubscribe feature?

https://github.com/remix-pwa/monorepo/blob/f7e84212d57337b96dc0d8a0b4065e5210286f72/packages/push/client/hook/usePush.ts#L93
This seems like the error origin but I am not sure why. Push Manager is supported across all browsers

[pale bone]

No

https://github.com/remix-pwa/monorepo/blob/f7e84212d57337b96dc0d8a0b4065e5210286f72/packages/push/client/hook/usePush.ts#L148

As this is in the useEffect, i suspect it might be the culprit. Perhaps checking the pushManager too in the if statement would fix the break.

[midnight steeple]

🤔 Possibly. Could you please patch on your end and see if it breaks staging?

It's weird. Because if you have a service worker registration object, the push manager must be present too

[pale bone]

@midnight steeple can you have a push notifications walk through. Am stack specifically on the subscribeToPush success callback. I need to have this payload to my backend.

[pale bone]

Anyone who has done the push notifications successfully? I came across an article that made me feel lost even more.
https://vapidkeys.com/#:~:text=VAPID%2C which stands for Voluntary,Cloud Messaging (or FCM).

It seems VAPID can work independently without FCM.

[midnight steeple]

Sorry for a lack of response. I'm currently traveling out of the country and I'm not working atm. I should be back home this coming week tho 👍

[royal saffron]

I have @pale bone, and planning to publish a walk through soon. What are you stuck on?

[pale bone]

Hi @royal saffron i have nestjs backend, am trying to link push notifications on both backend and frontend. I successfully implemented pwa feature on the client, trying to get the push work. Am referencing the official push api docs.

https://remix-pwa.run/docs/main/push-api

It seems the official documentation assume your remix app is full-stack, but in my case i have a separate backend and frontend with diff frameworks.

[royal saffron]

That makes sense

The backend should have a subscription store, with an endpoint for storing a users subscriptions and getting them all back, as well as deleting a subscription when a user unsubscribes or you find a subscription doesn’t work anymore

Then when you attempt to notify all of s users subscriptions you should catch errors and delete the dead ones

Does that make sense?

It was really confusing the first time I did it

The backend is the most under documented part of web push

That’s what I’m planning to write about

[pale bone]

That makes sense. Well, i already have a table to persist the subscription data. How this notifications get to the client is where am stuck. I have firebase in my backend, already set up to send the notifications but i don't know if it is really needed...

[pale bone]

Okay, i hope it will be out soon.

[royal saffron]

The service worker sends the notification

[pale bone]

Well, hope your tutorial will flesh this out😅 . I still don't get how notifications will reach the service worker from the backend.

[royal saffron]

On the backend, when something happens that you want to notify a user about, you ping the subscription (I use the webpush library from npm). That hits a server maintained by each browser vendor. Then the browser sends that event to your service worker. Then in the service worker you bind to that event and inside that event callback you can send a notification to the browser.

Does that make sense?

[pale bone]

So, firebase is not needed in the first place. I will checkout the webpush library.

[royal saffron]

I don’t think firebase is needed, no.

[exotic swift]

Hey I got them work, and yeah the subscription is generated by the browser/device you just need the vapid keys. Use web-push library to generate them

The service worker is what listens for the notifications on the device, if you’re having issues with the user receiving them, it might be an issue with the service worker or your keys might not match the subscription endpoint. If you’re having trouble with actually getting the subscription from the user, try your code on a secure protocol, some browsers don’t allow it to work on localhost or http connections

And for the backend, on whatever endpoint you end up using to receive the subscription, you should encrypt it, and store it in your database, and then when you need to send a notification from your backend, decrypt it and send it with the web-push library

[midnight steeple]

Thanks for the breakdown. I get questions about what exactly are vapid keys and why they're needed. Planning to write something on that

[pale bone]

Hey @exotic swift i have managed to sendNotifications from my nestjs backend using web-push. I was stuck on the import where the package was undefined. Anyone who faces it import web-push this way import * as webpush from 'web-push'; I have push messages hitting my push manager in the client. Piecing together this bit... Thanks @exotic swift @midnight steeple @royal saffron

[pale bone]

@exotic swift have you experienced this?

[exotic swift]

Yeah make sure you’re checking if you’re able to get getSubscription in the first place by checking for Navigation, I’m not home right now so I could be wrong

Or is getSubscription in the library?

I can’t remember well

[pale bone]

Yeah am using the library, on safari and opera.

[midnight steeple]

Where's the location of the error? I think it's the unsubscribe function, but not certain

[pale bone]

I shared a link with you. Did you see it?

[royal saffron]

The full stack web push guide I was talking about is up at https://bocoup.com/blog/full-stack-web-push-api-guide. Thanks to @midnight steeple for the review. Even though this post talks about a non-remix-pwa implementation (since it was written prior to the latest remix-pwa release) the guidance is likely still helpful.

[midnight steeple]

Yup. It is very good
It actually helped me structure the push package 😁

[clever drum]

I'm interested in incorporating Remix PWA into my B2B SaaS. I haven't done a PWA before. I want to know if this will support multiple PWAs in the same Remix app? Depending on the route the user is on, I'd like it to install one of three envisioned PWAs. Thanks!

[midnight steeple]

Yep, that should be possible. I know about multiple service workers but not manifests. I suppose they should work the same way, you would just scope them accordingly

I would check how possible that is this coming week. I should work on Remix pwa related stuffs this week

[pale bone]

Push notifications only received when the app is active. Anyone experienced this? It seems the sw is activated when the app is active and vice versa.

[pale bone]

This post pointed me in the right direction. I had battery saver activated on my device preventing background tasks https://stackoverflow.com/questions/73222123/push-api-mobile-browsers-dont-receive-push-notifications-anytime-only-when-sw

[midnight steeple]

Afaik, it doesn't seem possible. I did some reading around and it looks like just one manifest per website

[pale bone]

defaultFetchHandler breaks app with Failed to fetch error after the pwa is inactive for a long time eg 24hrs. This happens when i open the app after the inactivity and try navigating away from the current page. The above error is due to network issues but on refreshing the app, it works as expected. Is there a fix for the break? ATM i have an errorboundary that takes care of the break, but i find it bad UX.

[midnight steeple]

What does your default fetch handler look like?

[pale bone]

`export const defaultFetchHandler = ({ context }: WorkerDataFunctionArgs) => {
const { request } = context.event;
const url = new URL(request.url);

if (isDocumentRequest(request)) {
return documentCache.handleRequest(request);
}

if (isLoaderRequest(request)) {
return dataCache.handleRequest(request);
}

if (self.__workerManifest.assets.includes(url.pathname)) {
return assetCache.handleRequest(request);
}

return fetch(request);
};`

Just as it is in the tutorial

[pale bone]

I fail to understand what could be causing the error as the device is not offline initially.

[midnight steeple]

I can guess. Browsers generally pause the service worker to conserve battery, it should not fail though

[pale bone]

@midnight steeple My thoughts, as push events activate the worker, navigation should do the same. I don't know if there is such a native PWA API, 😅

[pale bone]

Updating my worker cache strategies fixed the issue for me.

[midnight steeple]

Okay

Btw, I'm looking for a co-maintainer for Remix PWA. I work more in the robotics/aerospace industry nowadays, and haven't been able to keep up with the remix/web world

[pale bone]

Well, we can discuss it further. Dm me when available

[misty fractal]

if you tweet it out I'll share

[midnight steeple]

https://x.com/ShafSpecs/status/1805630508660863342?t=01KqQ0Rqnrt4SoTFFECWoA&s=19

Abdur-Rahman (@ShafSpecs) on X

Looking for a co-maintainer for @remix_run pwa! It could be docs, tests or specific packages, if you are a PWA enthusiast and love Remix (like you should), hit me up

Twitter · Jun 25, 2024, 3:53 PM

[misty fractal]

retweeted

[clever drum]

Would I be able to use Remix PWA to have a PWA that downloads videos from my site and plays them locally? What's the limitation on storage size?

[midnight steeple]

Device limit. You just need to cache it, and then you can stream it from there

Remix PWA allows you to provide artificial limit, so that you can provide some semblance of control

Using the browser File API, you can choose to download the video directly onto the device. That way it remains permanent

Instead of caching temporarily. A case study for Caching of media files is https://soundcloud.com. When you stream a track, it doesn't download it, it caches it for a certain time (I think a week?). So if you replay a track without internet, it works. But if you attempt to shuffle or play something else, it just buffers (load) forever.

Just reread your question, you can download normally like on any normal site, and use the file api: https://developer.mozilla.org/en-US/docs/Web/API/File_API to access the files. Note that for security reasons, you won't have free access to the file system without the user input. So you might still implement a little bit of caching depending on use case

[maiden thunder]

Does it easy to integrate with Magento backend as Pwa-studio?

[midnight steeple]

I haven't hear of Magento, so I can't say. It isn't an abstract package though, it just wraps the browser apis and deliver them in bite-sized APIs

[midnight steeple]

Hello 👋! Been working a lot on Remix PWA lately and some new features got released:

• buildVariables: Allows you to inject build/environment variables directly into your service worker. Commit - Link
• Added matchOptions to cache strategy. Allowing you to further customise cache behaviour. Commit - Link
• Working on a pre-RC for Remix PWA SPA Mode (still WiP). This would change the behaviour of workerLoader/Action in an SPA application. Also mapping out a new API for them.
• Added a --dev/-D flag to remix-pwa CLI to allow updates to the latest dev releases. Commit - Link

I am also working on a few more surprises. Thx ✌️

[clever drum]

@midnight steeple I just wanted to extend my gratitude. Remix PWA has fundamentally changed my professional approach to apps. I had made a conscious decision to circumvent the mobile app space after the kludge that was React Native. I had some projects from 2016-2020 that used RN and it was a meager dev experience and even more so on the support front. I have always wanted some of the benefits that mobile apps had over traditional web apps. PWA bridges that gap and now it is much easier for the user to install the app on their home screen. I wish we had a button to click to install but that seems only to work on my desktop in contrast to my iPhone. Thank you for this project and helping me arrive at new level to what I can achieve digitally. Remix PWA makes it cleanly approachable in the distinct form and fashion of Remix. This cohesiveness makes it so easy to be incredibly productive in the PWA space.

[tame harbor]

Hey @midnight steeple, just wanted to give you a little heads up before the newsletter goes out 🙂

https://remix.run/resources

[midnight steeple]

Thanks so much ❤️! Loving the Remix community and the shoutout is very much appreciated 🥹. Little correction tho, the command is npm i -D @remix-pwa/dev since we don't scaffold anymore after migrating to Vite

[tame harbor]

No problem!

Ah perfect, thanks, I'll get that fixed up

[midnight steeple]

Hello 👋! Been working on the next major version of Remix PWA and I want to announce the first rc PR and issue which allows you to track the progress. The PR lists the major changes being made and I opened an issue to collect feedback as well as suggestions.

The docs should also be getting a next tag that would discuss the version in detail. v5 won't be releasing anytime soon though. Some of the major changes include:

• a new manifest package. This includes interpolation with Vite PWA plugin for manifest generation
• Support for single fetch and SPA mode. I've made some breaking changes to how worker loaders & actions behave. They would now act as loaders & actions in SPA mode and are disabled in single fetch
• Adding a new scaffold command to get a new Remix application from the ground up with Remix PWA already installed (still planning out a CLI for this)
• Introducing a few new components
• Incremental support for Remix (Or RR atp) v7

I have currenty pushed changes made to dev package only dev and worker-runtime pakages. More to follow in the coming days 👍

[stiff slate]

Hello everyone, I'm facing a small problem with linking the manifest file correctly.
When I use the <ManifestLink/> component the browser don't detect the manifest file, but when I use the below link; everything works fine, is there any thing I'm missing?
<link rel='manifest' href='/manifest.webmanifest'></link>

[midnight steeple]

You need to pass the manifest link into component. For some reason, the default value never registers. I plan to make the href mandatory

Via the manifesturl prop

This issue is being worked on for the next version

[stiff slate]

where did the messageHandler came from?

import { SkipWaitHandler } from '@remix-pwa/sw'

// rest of the service worker

const skipHandler = new SkipWaitHandler()

self.addEventListener('message', (event: ExtendableMessageEvent) => {
  event.waitUntil(Promise.all([
    messageHandler.handleMessage(event),
    skipHandler.handleMessage(event),
  ]))
})

[midnight steeple]

Not sure of the code source, but I am guessing NavigationHandler. It is meant to handle caching page navigations - the next docs would be more coherent about what they all do in detail

As well as separate unnecessary code

[stiff slate]

It's from the offline guide

[midnight steeple]

Yeah, that guide needs some edits 😅

[stiff slate]

Here is a demo version of my app, can you review t and suggest some ideas to improve the user experience.
https://wisal.vercel.app

[stiff slate]

does remix-pwa uses workbox under the hood, I'm asking because I might use workbox to add some features, will they work together 'remix-pwa and workbox'?

[midnight steeple]

No, initially I aimed to support it. But workbox became partially deprecated, and I chose to forego it.

[midnight steeple]

Some of the people that worked on it built Serwist: https://serwist.pages.dev/

Which takes a lot from Workbox, but we don't support Serwist either

[stiff slate]

So if I'm using remix-pwa; I can't use serwist neither workbox?

[midnight steeple]

Yeah

[midnight steeple]

Their methods are so different, and it would be redundant. I advise one or the other

[limber escarp]

I hate that we have to choose between this and https://vite-pwa-org.netlify.app/frameworks/remix.html I haven't gotten into PWA features yet but I will and I hope by then the choice is clearer

[midnight steeple]

First Remix PWA v5 candidate released!
To utilise it, you would require the @dev tag to install. Docs aren't available yet, but the major changes in the first changes already shipped are can be found in this PR description: https://github.com/remix-pwa/monorepo/pull/269
You can ask me any question that arises

The second stage should include an updated remix-pwa CLI.

[zealous python]

is there some current workaround for using rel="manifest" instead of rel="webmanifest"? the entire package is broken / doesn't register a PWA for me unless i go and edit ManifestLink to use manifest instead of webmanifest

i see it is part of v5, but what's today's solution @midnight steeple

nvm, i see above a workaround is just to use <link rel="manifest" href="/manifest.webmanifest" />

[zealous python]

with dummy service worker from docs it seems

after a while the entry.worker.js fails to fetch and the site doesn't load. fails on this:

const defaultHandler = entry.module.defaultFetchHandler || ((event) => fetch(event.request.clone()));

[midnight steeple]

Which service worker? Try clearing the storage in the application tab. Sometimes, service worker update can break and versioning goes out of the window

[zealous python]

using this:

/// <reference lib="WebWorker" />

export {};

declare let self: ServiceWorkerGlobalScope;

self.addEventListener("install", (event) => {
  console.log("Service worker installed");

  event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", (event) => {
  console.log("Service worker activated");

  event.waitUntil(self.clients.claim());
});

it breaks my localhost after a while, can't navigate around at all. clearing storage in application tab doesn't seem to work after a while

[midnight steeple]

Could you please create a simple repro? Maybe with stackblitz

[zealous python]

ah, unfortunately it is a big codebase so probably not, i may just go run with vite pwa because i'm not really sure where to start with troubleshooting this

it seems to just be a localhost problem? deploying to a staging branch seems to not encounter this issue, but it requires me to restart localhost every time i save a file? maybe entry workers is being rebuilt or not probably unmounted

[midnight steeple]

When a rebuild happens, the browser takes care of it automatically. I would try and debug on my end, but this is probably fixed in v5, weird.

[zealous python]

when is v5 prospected to release?

[midnight steeple]

When I finish the docs: https://remix-pwa.run/docs/next
Plus, there a few optimisations left. But nightly builds of v5 is already available via the dev tag: npm i @remix-pwa/dev@dev

Should be next month hopefully

[zealous python]

it seems to be fixed with v5 👍 thank you for all your hard work @midnight steeple!

[zealous python]

hmm i spoke too soon 😆

must manifest[.webmanifest].ts read process.env for setting the start_url?

the site works fine but then after a while it freezes up and i get these errors in console

[midnight steeple]

It's doesn't utilize process.env?

[midnight steeple]

Super weird. I'm building out the sandbox, so I should encounter this issue if it's persistent 👍

[lone solar]

Hmm, what's the PWA story now that we're supposed to "upgrade" from Remix to RRv7? 🤔 (Remix PWA depends on @remix-run packages)

[midnight steeple]

I would have to start working on a v5.1 soon. It won't be different user-wise, but would require some major tweaks 👍

[lone solar]

I wonder if we could use Vite PWA in the meantime or if it's still rather unsuitable for RRv7 as it was for Remix

(not trying to drive people to another solution, just trying to buy you some time 😅 )

[orchid falcon]

Hey! Just upgraded my remix app to react-router v7 and came hunting for some news on remix-pwa. Thx for the efforts here.

[midnight steeple]

Yeah, I would advise working with Vite PWA for now. Joaquin has been proactively working with Vite v6, I haven't yet

I also don't mind pushing Vite PWA. Joaquin and I are good, plus they aren't exactly the same library with extra features 👍

[midnight steeple]

❤️. Flying back into my home state today, I would start work on RR7 asap

[lone solar]

Cool, yeah - I don't think it matters much for me, I really just need a minimal SW to make the app installable.

[old forge]

Hello guys! I have a question... How can I update the cache in my app using @remix-pwa/sw? When I change the cache version and add new components or make changes, they are not reflected after deploying my app. How can I fix this? Any help would be greatly appreciated. 🙏

more context: https://github.com/orgs/remix-pwa/discussions/159

[orchid falcon]

Tysm! I have an open source application that helps users track an anti-fungal immune modular supplement protocol. I can’t risk App Store tyranny so it’s a PWA. I need notifications and that’s why I need a service worker!

[analog jolt]

If I understand correctly, for new projects it is not advisable to utilize remix-pwa given the release of RR7? But to consider vite-pwa?

[misty fractal]

I don't think that's true

[midnight steeple]

for new projects using rr7, yeah. If you using remix, it's fine. remix-pwa is planning to support both

But if I recall correctly, rr7 is like Remix spa mode (not sure). Which the next version is supporting

[analog jolt]

I ask because the remix app is giving me all sorts of signs to move to RR7 via future flag:
e.g, v3_lazyRouteDiscovery, v3_singleFetch, and I'm wondering if any of this will play nicely with remix-pwa

[misty fractal]

not correct, rr7 is everything Remix

the rr7 vite plugin has SPA mode but it also has the rest of remix. Remix has fully moved into RR via the vite plugin

[midnight steeple]

Update: I've finally started rolling out the new docs: https://remix-pwa.run/docs/next/quick-start
v5 would probably remain in dev for a while as I try to figure out how to approach RRv7, but you can use it in your remix applications

RRv7 is by default, single fetch mode. @misty fractal just to clarify pls, that means all clientLoaders and actions are all called at once, right? Not the waterfall effect of Remix (one after the other)

Remix PWA now behaves differently in single fetch mode and spa mode as well, single fetch disables a lot of Remix PWA features, I am still thinking out a different api for that. spa mode allows your workerLoader/action to become your new loaders and actions

[misty fractal]

it means it's one request to call all the loaders, rather than 4 requests at once to call the 4 matching nested loaders

Remix did not waterfall either

[midnight steeple]

👋

Want to announce that the main critical parts of Remix PWA supporting React Router has been completed, and that I want to begin the process of sun-setting Remix support (remix is not recieving anymore major updates, right?)
Also, do I keep the name (Remix PWA) or change it (React Router PWA)?
https://github.com/remix-pwa/monorepo/pull/287

Thanks for the patience 🤧

[misty fractal]

for this project I think react router pwa makes sense

[misty bough]

@midnight steeple Is there any doc on how to run pwa locally? I followed the Quick Start guide, but after that, nothing happens when doing npm run dev.

[midnight steeple]

Which version?

You would need to add it to your Vite plugins. I'm rewriting the docs to explain the steps better

As well as require an entry worker file

[modern sleet]

@midnight steeple Hi, is it possible at the moment to use the remix-pwa with react-router 7? Or do you need to merge the PR you linked in order to make it work?

[midnight steeple]

I've merged it. It's now available via the @dev tag. But there are some bugs I would need to clean up in the sw package

[limber escarp]

I admire how long you’ve kept up maintaining this

[midnight steeple]

New PR. This PR sunsets Remix support + adds better support for react router
https://github.com/remix-pwa/monorepo/pull/292

Name changing (from remix-pwa -> react-router-pwa) is a hellish experience

[warped wind]

maybe this seems obvious in hindsight, but we've been experiencing loss of push subscriptions when installing/activating new service workers in prod. is it best practice to unsubscribe from the old SW and then "re-subscribe" to the new SW?

I believe that's the cause to the bug we're seeing, trying to implement this now and see how it goes

[zealous python]

@midnight steeple i'm finally migrating to rr7, what's the process for using rr pwa?

[midnight steeple]

Nothing too different from remix pwa. React router isn't in main support yet

[zenith pulsar]

any updates @midnight steeple ?

[midnight steeple]

https://tenor.com/view/kermit-suicide-flip-jump-crash-gif-5140737

Nope. Honestly speaking, I thought I would do one more major update. But I work far less with web technologies nowadays, and more with metal. That said, I plan to be back in OSS next year, wether that means web or not, I'm not sure. In the meantime, Vite PWA by my good friend Joaquin is a great alternative that works

[sick moon]

https://streamable.com/zecu24

the new @vite-pwa/react-router using the new @vite-pwa/unplugin-pwa and the new workbox fork using vite 8 or rlldown to build the service worker

@vite-pwa/unplugin-pwa becomes modular, we'll be able to create our own custom integration

the workbox fork supports dual service worker build with custom code splitting, SW builds run in parallel (rolldown), and the new workbox window exposing esm SW support detector via caniuse (esm syntax + type module registration)

to use dual service worker with the new buildSW strategy, SW must use ESM syntax

[midnight steeple]

https://tenor.com/view/wubbing-intensifies-wub-wub-wub-dubstep-pony-gif-6035371

The new Remix PWA

Been so out of web dev, apologies to everyone

But now, we got PWA back thanks to Joaquin

[sick moon]

https://streamable.com/vvnblt