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)
- When parent route loads data using `useFetcher`, all child routes/components that use `useFetcher` gets re-rendered HOT 4
- Remix + Vite build and ServerBuild are incompatible HOT 1
- Infinite loop on unhandle error using Layout Export with ErrorBoundary HOT 9
- Cannot use import statement outside a module | when using @uiw/react-markdown-editor HOT 5
- _index.tsx:3 Uncaught SyntaxError: The requested module '/app/styles/index.css' does not provide an export named 'default' (at HOT 1
- [remix] dest already exists. HOT 4
- Removing a loader causes errors for users that have your app open already HOT 2
- Error: The render was aborted by the server without a reason. HOT 2
- `defer` does not work on search param navigation HOT 5
- Root App component is mounted twice in dev mode with vite HOT 2
- Link prefetch calls loader despite the presence of clientLoader HOT 2
- Defer breaks on hydration error HOT 3
- Relax version of Prettier in `package.json` to support Prettier 3 HOT 2
- Hydration failed when I use clientLoader with custom basename. HOT 3
- Single Fetch: redirects do not strip basename
- Changing environment variables restarts Vite server but doesn't actually update value HOT 2
- Remix on Vercel keeps getting 403 forbidden error on Server Side Actions HOT 2
- createWorkersKVSessionStorage destroySession does not remove session from KV
- Unexpected route id inconsistency HOT 10
- Vite navigation fails to any route that imports node:stream
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.