React Js with PWA Blank Screen White on Safari Browser at first page reload

Question

Please Help Me,

I try to find out the error for react js with PWA No error in console and just blank white in first load, and if I load again it working fine. In another browser chrome,firefox it running fine.

It's just happen for the first time load. second time its fine and third time it will blank screen again.

I log the loader route and show me like the application not call the route At first Time. but I don't know why, and its only in safari

Here my package json

  "scripts": {
     "start": "pawjs --no-cache --env=development start",
     "build": "pawjs --no-cache --env-config-path=./.prod.env --env=production build",
     "build:demo": "pawjs --no-cache --env-config-path=./.demo.env --env=production build",
     "lint": "pawjs lint",
     "test": "pawjs --no-cache test"
  },
  "dependencies": {
    "@fullpage/react-fullpage": "^0.1.17",
    "@pawjs/image-optimizer": "^2.2.5",
    "@pawjs/pawjs": "3.0.0-beta.2",
    "@pawjs/sass": "^2.2.4",
    "@pawjs/srcset": "^2.1.3",
    "@types/react": "^16.9.13",
    "@types/react-dom": "^16.9.4",
    "animate.css": "^3.7.2",
    "axios": "^0.19.1",
    "bootstrap": "^4.4.1",
    "bulma": "^0.8.0",
    "cloudinary": "^1.17.0",
    "clsx": "^1.1.0",
    "crypto-js": "^3.3.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "fork-ts-checker-webpack-plugin": "^3.1.1",
    "fuzzyset": "0.0.4",
    "fuzzyset.js": "^0.0.8",
    "google-maps-react": "^2.0.2",
    "i18next": "^19.1.0",
    "i18next-browser-languagedetector": "^4.0.1",
    "i18next-xhr-backend": "^3.2.2",
    "mdbreact": "^4.25.1",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "react-animate-on-scroll": "^2.1.5",
    "react-aws-s3": "^1.3.0",
    "react-big-calendar": "^0.23.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-bootstrap-carousel": "^4.0.3",
    "react-calendar": "^2.19.2",
    "react-google-places-suggest": "^3.9.2",
    "react-i18next": "^11.3.2",
    "react-slideshow-image": "^1.3.4",
    "react-tabs": "^3.1.0",
    "reactstrap": "^8.4.1",
    "snyk": "^1.291.0",
    "universal-fetch": "^1.0.0",
    "validate": "^5.1.0",
    "validate.js": "^0.13.1"
  },
  "snyk": true,
  "devDependencies": {
    "@pawjs/redux": "^2.2.2",
    "css-loader": "^3.2.1",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "style-loader": "^1.0.1",
    "webpack-bundle-analyzer": "^3.6.0"
  }

Note *: I think It's not error cause "fetch" cause I already remove the fetch and still like that.

I still confuse and need your help, please give me a solution if you know Thank you friends

Answer 1

I also have this same problem. Anyone figure out the situation with Safari! I've disabled cache through nginx:

add_header Cache-Control no-store always

Same symptoms.