How to configure service workers with create-react-app
up vote
9
down vote
favorite
I am creating a ReactJS app with the create-react-app utility. How could I configure it to use a file that will contain a service worker?
EDIT:
From Javascript side is clear for me, add the registration in 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 service worker file (that 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 failed: DOMException: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The file is not there as I am not configuring Webpack to do that. So I am trying to copy the sw.js file with the ouput 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 totally new to Webpack.
reactjs webpack service-worker progressive-web-apps
asked Aug 6 '16 at 16:21
LilSap
51113
add a comment |
up vote
9
down vote
favorite
I am creating a ReactJS app with the create-react-app utility. How could I configure it to use a file that will contain a service worker?
EDIT:
From Javascript side is clear for me, add the registration in 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 service worker file (that 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 failed: DOMException: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The file is not there as I am not configuring Webpack to do that. So I am trying to copy the sw.js file with the ouput 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 totally new to Webpack.
reactjs webpack service-worker progressive-web-apps
asked Aug 6 '16 at 16:21
LilSap
51113
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24
add a comment |
up vote
9
down vote
favorite
up vote
9
down vote
favorite
I am creating a ReactJS app with the create-react-app utility. How could I configure it to use a file that will contain a service worker?
EDIT:
From Javascript side is clear for me, add the registration in 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 service worker file (that 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 failed: DOMException: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The file is not there as I am not configuring Webpack to do that. So I am trying to copy the sw.js file with the ouput 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 totally new to Webpack.
reactjs webpack service-worker progressive-web-apps
asked Aug 6 '16 at 16:21
LilSap
51113
I am creating a ReactJS app with the create-react-app utility. How could I configure it to use a file that will contain a service worker?
EDIT:
From Javascript side is clear for me, add the registration in 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 service worker file (that 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 failed: DOMException: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The file is not there as I am not configuring Webpack to do that. So I am trying to copy the sw.js file with the ouput 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 totally new to Webpack.
reactjs webpack service-worker progressive-web-apps
reactjs webpack service-worker progressive-web-apps
asked Aug 6 '16 at 16:21
LilSap
51113
asked Aug 6 '16 at 16:21
LilSap
51113
edited Aug 6 '16 at 18:37
asked Aug 6 '16 at 16:21
LilSap
51113
asked Aug 6 '16 at 16:21
LilSap
51113
asked Aug 6 '16 at 16:21
LilSap
51113
51113
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24
add a comment |
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24
add a comment |
3 Answers
3
active
oldest
votes
up vote
7
down vote
First, you have to do some changes in 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 a js file "sw-precache-confi.js" in the root folder of your project:
sw-precache-config.js:
module.exports = {
stripPrefix: 'build/',
staticFileGlobs: [
'build/*.html',
'build/manifest.json',
'build/static/**/!(*map*)'
],
dontCacheBustUrlsMatching: /.w{8}./,
swFilePath: 'build/service-worker.js'
};
Changes in index.html, Add service worker in 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 at root of project then npm start.
Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
add a comment |
up vote
0
down vote
Service workers and offline functionality should be included now in create-react-app builds, see this pr
answered Jul 12 '17 at 16:03
Will Farley
486516
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
add a comment |
up vote
0
down vote
I would recommend this library called cra-append-sw to add custom service workers to CRA.
Most of the details of how to use it are in the npm page, but simply put 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 public folder called custom-sw-import.js and all of the service worker code you write there will simply be appended to cra's service worker.
I can verify this works since I applied the same principle to make my website www.futurist-invenzium.com which gives a demo of all the features provided by PWA's.
I also found this blogpost to be helpful if you want a more indepth answer : https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
answered Nov 11 at 7:20
NatSerAchilles
112
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
7
down vote
First, you have to do some changes in 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 a js file "sw-precache-confi.js" in the root folder of your project:
sw-precache-config.js:
module.exports = {
stripPrefix: 'build/',
staticFileGlobs: [
'build/*.html',
'build/manifest.json',
'build/static/**/!(*map*)'
],
dontCacheBustUrlsMatching: /.w{8}./,
swFilePath: 'build/service-worker.js'
};
Changes in index.html, Add service worker in 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 at root of project then npm start.
Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
add a comment |
up vote
7
down vote
First, you have to do some changes in 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 a js file "sw-precache-confi.js" in the root folder of your project:
sw-precache-config.js:
module.exports = {
stripPrefix: 'build/',
staticFileGlobs: [
'build/*.html',
'build/manifest.json',
'build/static/**/!(*map*)'
],
dontCacheBustUrlsMatching: /.w{8}./,
swFilePath: 'build/service-worker.js'
};
Changes in index.html, Add service worker in 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 at root of project then npm start.
Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
add a comment |
up vote
7
down vote
up vote
7
down vote
First, you have to do some changes in 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 a js file "sw-precache-confi.js" in the root folder of your project:
sw-precache-config.js:
module.exports = {
stripPrefix: 'build/',
staticFileGlobs: [
'build/*.html',
'build/manifest.json',
'build/static/**/!(*map*)'
],
dontCacheBustUrlsMatching: /.w{8}./,
swFilePath: 'build/service-worker.js'
};
Changes in index.html, Add service worker in 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 at root of project then npm start.
Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
First, you have to do some changes in 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 a js file "sw-precache-confi.js" in the root folder of your project:
sw-precache-config.js:
module.exports = {
stripPrefix: 'build/',
staticFileGlobs: [
'build/*.html',
'build/manifest.json',
'build/static/**/!(*map*)'
],
dontCacheBustUrlsMatching: /.w{8}./,
swFilePath: 'build/service-worker.js'
};
Changes in index.html, Add service worker in 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 at root of project then npm start.
Further reading: https://github.com/jeffposnick/create-react-pwa#what-additional-changes-might-be-needed
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
edited Apr 29 '17 at 19:06
Daniel Kaparunakis
2,11191626
2,11191626
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
answered Apr 29 '17 at 14:54
Mohammad shaban
15718
15718
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
add a comment |
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
3
3
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
It'd be great if you explained why these steps are necessary as opposed to giving instructions to follow blindly.
– mrtnmgs
Jun 11 at 22:44
add a comment |
up vote
0
down vote
Service workers and offline functionality should be included now in create-react-app builds, see this pr
answered Jul 12 '17 at 16:03
Will Farley
486516
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
add a comment |
up vote
0
down vote
Service workers and offline functionality should be included now in create-react-app builds, see this pr
answered Jul 12 '17 at 16:03
Will Farley
486516
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
add a comment |
up vote
0
down vote
up vote
0
down vote
Service workers and offline functionality should be included now in create-react-app builds, see this pr
answered Jul 12 '17 at 16:03
Will Farley
486516
Service workers and offline functionality should be included now in create-react-app builds, see this pr
answered Jul 12 '17 at 16:03
Will Farley
486516
answered Jul 12 '17 at 16:03
Will Farley
486516
answered Jul 12 '17 at 16:03
Will Farley
486516
answered Jul 12 '17 at 16:03
Will Farley
486516
486516
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
add a comment |
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
2
2
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
It is included, but there is no way of configuring it.
– Stas Arshanski
Feb 5 at 17:54
add a comment |
up vote
0
down vote
I would recommend this library called cra-append-sw to add custom service workers to CRA.
Most of the details of how to use it are in the npm page, but simply put 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 public folder called custom-sw-import.js and all of the service worker code you write there will simply be appended to cra's service worker.
I can verify this works since I applied the same principle to make my website www.futurist-invenzium.com which gives a demo of all the features provided by PWA's.
I also found this blogpost to be helpful if you want a more indepth answer : https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
answered Nov 11 at 7:20
NatSerAchilles
112
add a comment |
up vote
0
down vote
I would recommend this library called cra-append-sw to add custom service workers to CRA.
Most of the details of how to use it are in the npm page, but simply put 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 public folder called custom-sw-import.js and all of the service worker code you write there will simply be appended to cra's service worker.
I can verify this works since I applied the same principle to make my website www.futurist-invenzium.com which gives a demo of all the features provided by PWA's.
I also found this blogpost to be helpful if you want a more indepth answer : https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
answered Nov 11 at 7:20
NatSerAchilles
112
add a comment |
up vote
0
down vote
up vote
0
down vote
I would recommend this library called cra-append-sw to add custom service workers to CRA.
Most of the details of how to use it are in the npm page, but simply put 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 public folder called custom-sw-import.js and all of the service worker code you write there will simply be appended to cra's service worker.
I can verify this works since I applied the same principle to make my website www.futurist-invenzium.com which gives a demo of all the features provided by PWA's.
I also found this blogpost to be helpful if you want a more indepth answer : https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
answered Nov 11 at 7:20
NatSerAchilles
112
I would recommend this library called cra-append-sw to add custom service workers to CRA.
Most of the details of how to use it are in the npm page, but simply put 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 public folder called custom-sw-import.js and all of the service worker code you write there will simply be appended to cra's service worker.
I can verify this works since I applied the same principle to make my website www.futurist-invenzium.com which gives a demo of all the features provided by PWA's.
I also found this blogpost to be helpful if you want a more indepth answer : https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
answered Nov 11 at 7:20
NatSerAchilles
112
answered Nov 11 at 7:20
NatSerAchilles
112
answered Nov 11 at 7:20
NatSerAchilles
112
answered Nov 11 at 7:20
NatSerAchilles
112
112
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38806320%2fhow-to-configure-service-workers-with-create-react-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi Marlon, I wasn't too much specific.
– LilSap
Aug 6 '16 at 18:38
See also: github.com/facebookincubator/create-react-app/issues/192
– Jeff Posnick
Aug 8 '16 at 20:17
Thanks @jeff, will try and comment if it works for me.
– LilSap
Aug 17 '16 at 21:35
@LilSap did you make it? Was it scope or maybe response headers?
– nettutvikler
Oct 20 '16 at 6:03
@nettutvikler, finally I just set the service worker file in the root project path (if I remember well) and worked fine for my needs, the service worker was registered in the browser
– LilSap
Dec 10 '16 at 15:24