Create a Progressive Web App with React and Register a Service Worker

Share this video with your friends

Send Tweet

A Progressive Web App (PWA) can cache static assets, which allows an app to be rendered faster, and even allows it to operate offline!

We’ll start a new app with create-react-app, and enable the service worker by registering it in index.js. Then we’ll build and serve a production version of the app - and show that it can work offline by disabling the server and refreshing the tab.

Sam Huang
Sam Huang
~ 6 years ago

Hello, I'm unable to serve -s build to start localhost: 5000 Getting the below message:

/Users/sam/.rbenv/versions/2.4.4/lib/ruby/2.4.0/un.rb:63:in `block in setup': invalid option: -s (OptionParser::InvalidOption)

I tried uninstalling .rbenv all together but I couldn't get my head around this. Please advice.

Chris Achard
Chris Achard(instructor)
~ 6 years ago

Ah - it looks like you have a ruby command also called "serve", which is conflicting with the npm serve command. There are two things you could do:

  1. Install serve globally with: "yarn global add serve". However! this would mean you can't use the ruby serve command - so this may not be what you want.

  2. Install server locally to the project with "yarn add --dev serve". Then, to start the server, you can run: "./node_modules/serve/bin/serve.js -s build"

Option #2 may be better for your situation, so that you don't conflict with your existing ruby command.

Sam Huang
Sam Huang
~ 6 years ago

thank you so much! It solved the problem beautifully. Now I can go on and finish this course :D

Chris Achard
Chris Achard(instructor)
~ 6 years ago

Great! Glad it helped.

Trung Hoang
Trung Hoang
~ 6 years ago

Hi, I am trying to follow your course but got stuck at express server setup. Do you have an instruction? Thanks.(Also my system doesn't have nodemon.)

Chris Achard
Chris Achard(instructor)
~ 6 years ago

Sure, follow these instructions to get it working:

  • git clone the repo at https://github.com/nanohop/todo-pwa/tree/register-service-worker
  • cd into the server directory
  • run "npm install" to install express
  • run the server with "node server.js"

I was using nodemon because I was doing development on the server, and nodemon will automatically restart the server whenever you change the server.js file - but to just run the server, you don't need nodemon, you can use node directly.

Hope that helps!

Alexander Esser
Alexander Esser
~ 6 years ago

I had problems running serve -s build. It may have been related to https://github.com/zeit/serve/issues/382. Anyhow adding serve as dev dependency and putting "serve": "node .\\node_modules\\serve\\bin\\serve.js -s build" into "scripts" in packages.json on my Windows machine fixed it.

Rajender Joshi
Rajender Joshi
~ 5 years ago

In the transcript there is a typo, the code snippet mentions index.js but it should be App.js

Stephen
Stephen
~ 5 years ago

I'm wrestling with the setup and though I have the app running and server -s build working, it fails to find items.json which I'm not seeing in either of the two repos mentioned here: https://github.com/eggheadio-projects/progressive-web-apps-in-react-with-create-react-app/tree/master/lessons/02-create-a-progressive-web-app-with-react-and-register-a-service-worker or https://github.com/nanohop/todo-pwa/tree/register-service-worker

Chris Achard
Chris Achard(instructor)
~ 5 years ago

@Stephen - the items.json are served by the server.js file located here: https://github.com/nanohop/todo-pwa/tree/master/server

(It's not a static file that gets served - it's dynamic from the express app there). Let me know if you have trouble with that!

Alex Parra
Alex Parra
~ 5 years ago

Regarding the serve -s build not working, what I did was add the following to scripts of package.json:

  "serve": "serve -s build",`

And run it with yarn serve.