facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.22k stars 26.68k forks source link

Request for more a-priori documentation for progressive web apps. #7356

Open jamespedid opened 4 years ago

jamespedid commented 4 years ago

Is your proposal related to a problem?

It's difficult to gauge the benefit of how and what enabling a service worker will do to an application. For example, my react app that I'm building is looking to be a mobile progressive web app to get the impression of a regular browser app. The app is powered by a backend that is served via a reverse proxy. One feature of the app, a contact list, ideally will front-load all contacts ahead of time, and periodically sync them, allowing the app to be used offline to a certain capacity.

What's particularly difficult here is trying to figure out exactly what happens when a service worker is registered. Are my reverse proxy http requests captured in the traffic? Should I concern myself with building a solution that uses local storage or indexedDB as part of the overall design, or will it be covered by the service worker? How will a scrolling component that lazily loads elements behave if the user hasn't scrolled all the way 'to the bottom' and their app is offline?

It is difficult to answer these questions without having a good understanding of what create-react-app is doing here. After a bit of digging, I found that workbox is used. I've done quite a bit of research on progressive web apps in general; some of the issues that come up; the tooling that is provided by chrome's developer tools.

Describe the solution you'd like

What I would like to see is a more comprehensive look at what is happening underneath the hood without having to dig around in every nook and cranny in the ecosystem. Particularly, it is difficult because many of the search results involve outdated examples or ejecting the app, which has long-term ramifications on the direction that a create-web-app project goes.

Describe alternatives you've considered

As I'm in an evaluation period, I'm looking more for information. Ejecting the application and trying to sew technology together manually is currently the only viable-looking alternative. Which is fine, but not preferable. Having the information available to help make an educated and informed decision on whether or not the this is right to me is what's at question here.

Thanks for your time!

LaurensBosscher commented 4 years ago

Struggled a bit with this yesterday as well. Workbox is really cool but abstracts some of the technology. What really helped me was to read the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Specifically this example: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onfetch#Example

One good thing to realize is that onFetch is used for all GET calls, not just fetch calls!