Geek Answers Handbook

How to configure service workers using create-response-app

I am creating a ReactJS application using the create-Reaction-app utility. How can I configure it to use a file that the service employee will contain?

EDIT : From the Javascript side, everything is clear to me, add the registration to my index.js:

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service_workers/sw.js') .then(function(registration) { // Registration was successful... }).catch(function(err) { // registration failed ... }); }

Then my configuration in my work service file (which for me is in service_wokers / sw.js):

 self.addEventListener('install', function(event) {//my code here...}); self.addEventListener('activate', function(event) {//my code here...}); self.addEventListener('fetch', function(event) {//my code here...});

When I run this, the console shows: ServiceWorker registration error: DOMException: failed to register ServiceWorker: invalid HTTP response code (404) was received when receiving the script.

The file is missing since I am not setting up Webpack for this. So I'm trying to copy the sw.js file with the output with:

 test: /\.(js)$/, loader: "file?name=[path][name].[ext]&context=./service_workers", include: '/service_worker'

I think there is no need to say that I am new to Webpack.

+14
reactjs webpack progressive-web-apps service-worker
source share
4 answers

First, you need to make some changes to package.json:

Changes in package.json:

 { "name": "create-react-pwa", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.7.0", "sw-precache": "^4.2.2" }, "dependencies": { "react": "^15.4.0", "react-dom": "^15.4.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build && sw-precache --config=sw-precache-config.js", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

Then create the js file "sw-precache-confi.js" in the root folder of your project:

SW-caching-config.js:

  module.exports = { stripPrefix: 'build/', staticFileGlobs: [ 'build/*.html', 'build/manifest.json', 'build/static/**/!(*map*)' ], dontCacheBustUrlsMatching: /\.\w{8}\./, swFilePath: 'build/service-worker.js' };

Changes to index.html, Add a service employee to index.html:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start`. To create a production bundle, use `npm run build`. --> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); } </script> </body> </html>

After doing all the things, run npm install in the project root directory, then npm start .

Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed

+8
source share

I would recommend this library called cra-append-sw to add personalized service workers to CRA.

Most of the details on how to use it are on the npm page, but you just need to install the library (npm i --save cra-append-sw).

Make a few changes to your package.json:

 "start": "react-scripts start && cra-append-sw --mode dev ./public/custom-sw-import.js", "build": "react-scripts build && cra-append-sw --skip-compile ./public/custom-sw-import.js"

And finally, create a file in your shared folder called custom-sw-import.js, and all the code you write there will simply be added to the service.

I can make sure this works, since I applied the same principle to make my website www.futurist-invenzium.com , which provides a demonstration of all the functions provided by PWA.

I also found this post useful if you want a deeper answer: https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers -376bd1fdc6d3

+3
source share

Service workers and autonomous functions should now be included in application-creation-response-assemblies, see this pr

0
source share

for people who are still struggling with this. please refer to https://create-react-app.dev/docs/making-a-progressive-web-app .

enter image description here

Service workers are configured in CRA and will handle caching for you! You just need a change: -

 serviceWorker.unregister();
from

before

 serviceWorker.register();

in your src/index.js ;

In addition, service workers only work in production mode, so make sure you create an application and service it locally before testing your application for service workers.

 npm i http-server -D

then add this to package.json in your scripts.

 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "start-sw": "http-server ./build" }

now run: -

 npm run build && npm run start-sw

hope this helps!

0
source share

More articles:


All Articles