问题
My basic static React Redux TypeScript app works locally on Windows, and then it also works when I deploy to GitHub Pages for every device I've tested except iPhone 6 iOS 12.0.1 (where it is a blank white screen).
I've researched many articles, such as:
React/redux app renders blank screen on Safari
React/Node Uncaught SyntaxError: Unexpected token <
Why deployed react app on gh-pages is showing blank page on different browsers while showing correctly on my browser?
https://stackoverflow.com/a/57027870/470749
https://community.netlify.com/t/react-application-builds-deploys-into-a-blank-page/2571
https://github.com/facebook/create-react-app/blob/061d1e46fcd4766d38b45499c3d29cfaa2b7d0af/packages/react-scripts/template/README.md#github-pages
https://caniuse.com/#feat=es6
Most of them try to solve the case where all devices show a white page. But that's not my scenario.
Others talk about how older browsers need polyfills, but I've already added try/catch blocks around my use of fetch.
I've also tried changing to "homepage": "." in package.json, but again, I don't think that's related to the issue because most browsers already work, so I know that the assets are being accessed.
Any ideas?
回答1:
Finally I remembered that I could use the free http://xip.io/ service to browse from my iPhone to the "local" React server hosted on my Windows machine.
That way, I could see error messages that wouldn't be visible on production (at GitHub Pages).
I discovered that the error was "ReferenceError: Can't find variable: IntersectionObserver".
So the solution would be to use a polyfill.
See helpful links:
- https://stackoverflow.com/a/55767479/470749
- https://stackoverflow.com/a/59368511/470749
- https://github.com/mhartington/lazy-load-image/issues/1#issuecomment-372384646
- https://webkit.org/blog/8582/intersectionobserver-in-webkit/
- https://caniuse.com/#feat=intersectionobserver
"IntersectionObserver API is supported on iOS Safari since 12.2." That explains why it worked on other iPhones but not mine.
来源：https://stackoverflow.com/questions/61202531/why-does-my-react-redux-typescript-app-work-everywhere-except-iphone-6-ios-12-0