Comments (6)
That's definitely a related but (I think) slightly different issue, @dbanisimov. Even without doing any of this work, we could still ship a service worker to handle all /_remix/data
requests and inline the data loaders that are able to be run client-side into that worker.
As you say, this would help with latency on data requests. But in order to get full offline mode we would need to handle /_remix/manifest
requests too, which we use to dynamically load more pieces of the site manifest as you navigate around.
from remix.
Another use case for that would be running loaders both on the server and in the service worker if the data access could be securely isomorphic. One particular idea that I've been pondering around is to use Firebase JS client-side SDK in the loaders. Once the initial server-rendered response is received and the service worker is installed all the subsequent data requests could be served client-side, reducing the latency and enabling other goodies, like offline persistence.
from remix.
This would be an incredible match, I would use the hell out of this.
FYI, there’s ES Module support coming soon, not sure if they will support importing other JavaScript files though. The fetch handler will be exported instead of being attached as an event listener, and it will receive an additional env
argument:
export default {
async fetch(request, env) {
…
}
}
from remix.
Without a server, how do we deal with SEO?
Wouldn't the Service-Worker run Remix be like a Progressive Web App?
from remix.
from remix.
I gave this a shot to get more family with the underling architecture of remix but I hit some roadblocks. Just documenting the issues here for someone else trying to get this working:
- The remix build currently lists no css files in
build/assets.json
so there is no easy way to cache them inside the service worker. (There is a workaround but I think that file should also list all resources too) - Another issue stems from this pattern
new Request(url.toString(), request);
found in https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/server.ts#L632 and https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/server.ts#L638 when doing a reload while offline. The browser is creating aRequest
object with modenavigate
and a service worker isn't allowed to use that as aRequestInit
. The browser is throwing:TypeError: Failed to construct 'Request': Cannot construct a Request with a RequestInit whose mode member is set as 'navigate'.
This is in accordance to Step 14. to 17. of the Spec
Having remix build around these platform features opens up so many possibility, very excited to look into this some more.
from remix.
Related Issues (20)
- redirect with 307 does not work as expected HOT 5
- install.js.map hook HOT 3
- 2.9.1: useFetcher/useLoaderData types are set to never HOT 8
- Single fetch `response` parameter for loader is undefined if no default export exists in the route HOT 6
- useLoaderData<typeof loader> returns type JsonifyObject<T> rather than T HOT 6
- Single Fetch Issues HOT 8
- Single Fetch: bad behavior in promises that resolve to `undefined` and `null` HOT 2
- Single fetch: loader type us unknown HOT 6
- Single Fetch: missing type for useLoaderData<typeof clientLoader>() HOT 3
- Application crashes on unhandled promise rejection in deferred data HOT 5
- [VitePlugin] HMR breaks with imagetools transformer Vite plugin HOT 1
- Testing utilities have wrong types for meta functions HOT 1
- remix-express/server throws error on IPv6 host or X-Forwarded-Host HOT 3
- `remix dev` fails when workspace has a deprecated node-builtin in unrelated package
- Re: `@remix-run/serve` sets high `max-age` and `immutable` cache header on everything HOT 2
- Action submission triggers a loader re-validation ignoring its `shouldRevalidate` export.
- Single fetch: thrown response stub passed to `handleError`
- Single fetch: allow setting a `nonce` on `StreamTransfer`'s `script` tags HOT 1
- Readonly arrays are not accepted as valid serialisable data in loader HOT 1
- Single fetch: returning submission.reply() with action results in type never.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix.