Options for testing service workers via HTTP

In general, you need to serve both your page and your service worker script via HTTPS in order to use service workers. The rationale is described at Prefer Secure Origins For Powerful New Features.

There's an exception to the HTTPS requirement in place to facilitate local development: if you access your page and service worker script via http://localhost[:port], or via http://127.x.y.z[:port], then service workers should be enabled without any further actions.

In recent versions of Chrome, you can work around this requirement duriing local development via chrome://flags/#unsafely-treat-insecure-origin-as-secure, as explained in this answer.

Firefox offers similar functionality, via the devtools.serviceWorkers.testing.enabled setting.

Please note that this functionality is only meant to facilitate testing that wouldn't otherwise be able to take place, and you should always plan on using HTTPS when serving the production version of your site. Don't ask real users to go through the steps of enabling those flags!

If you want to debug a plugged-in mobile device's service worker for a real behavior testing of a progressive web app, the ssl chrome start options do not help and you definitely do not need to buy certificates.

@chris-ruppel mentioned installing proxy software, but there is actually an easier way using port forwarding:

Assuming you connect and debug your device using Chrome:

• In the Chrome Dev Tools "Remote devices" open "Settings" and add a "Port forwarding" rule.
• If your localhost setup is running on localhost:80,
• just add a rule "Device port 8080" (can be any unpriviliged port > 1024)
• and local address "localhost:80" (or mytestserver.sometestdomainwithoutssl.company:8181 or whatever)

After you did that, you can call the URL "http://localhost:8080" on your mobile device and it will be answered by the "localhost:80" on your actual PC/test server. Works perfectly with service workers as if it were your local machine running on your mobile.

Works also for multiple port forwardings and different target domains as long as you remember to use unprivileged ports on your mobile device. See screenshot:

Source of this info is the google remote devices documentation: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (but as of Apr 2017 it is not very clear to read this simple answer out of it)

I often want to debug and test on a real device. One method I've come up with involves routing the phone's network traffic through Charles Proxy during local development. Unlike all the Chrome-specific solutions, this works with any browser on your phone.

1. Run Charles on my laptop (which also serves my website with the Service Worker). Once Charles is running, note the IP/port for Step 2.
2. Configure the mobile device to use my laptop as a proxy.
   • For Android just tap and hold on your WiFi in settings > Modify network > Advanced Settings > Proxy. Use Manual to set the IP/port.
   • For iOS click the (i) icon > HTTP Proxy section. Select Manual, then set the IP/port.
3. Visiting localhost on my mobile device now allows the Service Worker to be registered and tested.

The easiest way to test pwa, in my case, was using ngrok. https://ngrok.com/download log in, get ur token and set it!

When you run ./ngrok http {your server port} make sure that you use https which will be shown in the terminal after you run this command above.

You could use https://surge.sh too, it is for host a static webpage, if you visit here: https://surge.sh/help/securing-your-custom-domain-with-ssl will be able to see how to set up a ssl certificate