search

stereobooster / react-snap

👻 Zero-configuration framework-agnostic static prerendering for SPAs
MIT License
5.07k stars 392 forks source link

Issues with registerServiceWorker #306

Closed mercurjl closed 5 years ago

mercurjl commented 5 years ago

I've been attempting to integrate react-snap with my create-react-app project. The issue I'm running into seems to stem from the registerServiceWorker() line in the index.js file.

The behaviors I'm observing is that when the registerServiceWorker() line is present, the app builds and I'm able to navigate normally, but the prerendered files are only filled with: <html><head></head><body></body></html>

And the console is filled with: Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

When I comment out the registerServiceWorker() line in index.js react-snap runs with no errors and prerenders everything as it should, but I'm unable to navigate off of the '/' route. Attempting to go to any other route automtically re-routes me.

I have a feeling there is some adjustments I might need to make with the registerServiceWorker.js file that comes with create-react-app or option changes with react-snap.

I've been using version 1.21 of react-snap for reference.

Any ideas with direction on where to go with this would be wonderful.

stereobooster commented 5 years ago

well, this can be anything. Do you see empty html on the disk or in the browser?

mercurjl commented 5 years ago

Both. I've been using screaming frog (https://www.screamingfrog.co.uk/seo-spider/) to crawl my builds after pushing them up to Azure. And when the HTML is empty nothing is picked up when crawled.

stereobooster commented 5 years ago

Have you checked files on your local machine in text editor? Because we're not sure if any of system in between have cache, like deployment tool, web server cache, browser cache etc

stereobooster commented 5 years ago

Just checked serviceWorker works fine with react-snap https://github.com/stereobooster/react-lingui-example/tree/service-worker

mercurjl commented 5 years ago

I'll take a look at that project and see if I can find what I'm messing up/missing

mercurjl commented 5 years ago

I managed to get this working by doing a couple things.

  1. I updated the service worker in my app to create-react-app's newest service worker. I created a new app last night and noticed that the name of the file changed and figured I'd pull over the new file and try it. Not sure when this update happened or what changed but at some point the registerServiceWorker.js file was renamed to serviceWorker.js. I noticed this also in the project you linked above (https://github.com/stereobooster/react-lingui-example/tree/service-worker).

  2. I added the following line to my package.json: "reactSnap": { "fixWebpackChunksIssue": false } As referenced here: https://stackoverflow.com/questions/53249090/react-snap-and-react-router-together-make-a-problem/53508421#53508421

  3. Changed the reference in my index.js to the following: import * as serviceWorker from './serviceWorker'; .... serviceWorker.unregister();

It might also be worth noting that this app uses Contentful as a CMS that feeds the app it's pages, content, and urls. I say this because I dynamically create the urls and pages on the fly based on what the CMS feeds the app. To get the prerender to work with this I make a fake set of URLs based off of all the possible routes that live in the router so when react-snap renders the app it has all the possible routes upfront. Without this react-snap would only notice 7 of the 9 routes that the app has, never discovered why. This approach feels a bit hacky, but screaming frog's SEO crawling tool seems to be picking up react-snap's prerendered files as it should now.

stereobooster commented 5 years ago

I glad you solved your issue.

react-snap by default uses http. serviceWorkers doesn't work over http. They work only over https. I guess problem was never connected to serviceWorkers, there is some kind of false correlation. Most likely prerendering didn't work correctly with cra2, which you fixed with "reactSnap": { "fixWebpackChunksIssue": false } and probably you got tricked by serviceWorker cache at some point if you checked source of the page in the browser.