Create-react-app: Service Worker and React state on mobile Chrome

[ToherIman]

Hi.
Thanks for adding Service Worker to template.
I have app that renders(re-renders) svg based on user input, it is stored in React state. It all works in Chrome desktop (offline), but I can't change input values after going offline on mobile (Chrome 58). Am I using Service Worker incorrectly? Should I store state somewhere else?
Thanks.

[gaearon]

This doesn’t sound related to service workers.
Can you provide a sample project reproducing this?

[ToherIman]

class App extends Component {
  constructor(props) {
        super(props);
        this.state = {
            height: 1.6,
            angle: 45
        };
    }
    handleChange(e) {
        const value = e.target.value;
        const name = e.target.name;
        this.setState({[name]: value});
    }

  render() {
    return (
      <div className="App">
        <div className="input">
            <input orient="vertical" name="angle" type="range" min="25" max="90" step="1" onChange={this.handleChange.bind(this)} value={this.state.angle}/>
          <div>{this.state.angle}&#176;</div>
        </div>
      </div>
    );
  }
}

[gaearon]

I’d be surprised if this has anything to do with being offline. Have you checked if it’s just a Chrome mobile bug?

[ToherIman]

Thank you very much for help, I should've done this first. It was 'Error during service worker registration: DOMException: Only secure origins are allowed'.

[gaearon]

Hmm, I want to understand what it means.
We shouldn't let service worker registration crash the app.

cc @jeffposnick

[ToherIman]

"During development you'll be able to use service worker through localhost, but to deploy it on a site you'll need to have HTTPS setup on your server." For my mobile it wasn't localhost, for my desktop it was.

[jeffposnick]

While it's true that you can't register a service worker when you're on a http: origin (other than localhost), the failure to register the service worker shouldn't affect the behavior of your web app.

You'll see an error message logged to the console letting you know what's going on, but the lack of a service worker does not prevent the rest of your runtime code from executing.

[gaearon]

Ah okay. I thought it was a real runtime error 😛

@ToherIman Did you figure out what was causing the issue? Again, doesn’t seem like service workers would be related to range inputs.

[davidmcooper]

I'm getting a Service Worker error on MacOS Chrome v58.0.3029.110 (64-bit) at runtime. My app is pretty basic at this stage. It's being deployed to an intranet host. Here's the package.json:

{
  "name": "shopper",
  "version": "1.0.0",
  "private": true,
  "homepage": "http://productionhostname/shopper",
  "dependencies": {
    "antd": "^2.10.1",
    "axios": "^0.16.1",
    "chart.js": "^2.5.0",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "mout": "^1.0.0",
    "react": "^15.5.4",
    "react-chartjs-2": "^2.1.0",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Seeing this in the console:

Error during service worker registration: DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

Seems to be failing in the following block of code:

, function(e, t, n) {
    "use strict";
    function r() {
        "serviceWorker"in navigator && window.addEventListener("load", function() {
            navigator.serviceWorker.register("/shopper/service-worker.js").then(function(e) {
                e.onupdatefound = function() {
                    var t = e.installing;
                    t.onstatechange = function() {
                        "installed" === t.state && (navigator.serviceWorker.controller ? console.log("New content is available; please refresh.") : console.log("Content is cached for offline use."))
                    }
                }
            }).catch(function(e) {
                console.error("Error during service worker registration:", e)
            })
        })
    }
    t.a = r
}

Runs fine on the dev server during development. Only fails when deployed to the intranet production host.

[jeffposnick]

That's expected; there's more detail on that page you linked to, and in the c-r-a documentation, including a description how localhost and the equivalent is exempted from the requirements.

If you'd like to use service workers on any non-localhost server, you need to deploy your web app to a server that supports HTTPS.

Your web app will continue working without service worker support in the meantime, and you can remove the line of code that attempts service worker registration if you know that you're deploying to an HTTP-only environment.

[davidmcooper]

Thanks. I've disabled the service workers code. I also had an issue where the homepage was located in a location other than the root. While I'd specified the "homepage" attribute in my package.json, I also needed to update my routes in the source code to reflect the appropriate path to the app when deployed to the sub-folder.