Import scripts in Service Worker #2714

piotr-cz · 2017-07-03T10:41:03Z

This PR adds an ability to use importScripts option of SWPrecacheWebpackPlugin.

How-to:

create a file called public/service-worker-import.js
run npm run build
check that file has been loaded (either in console network panel or by placing console.log statement inside and checking for output) by refreshing the page

File is being imported only on service worker install/ update.

Downsides:

It's possible to import only one file and it's name is harcoded
File is not being passed trough plugins (minification, etc)

Fixes: #2253

facebook-github-bot · 2017-07-03T10:41:12Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

facebook-github-bot · 2017-07-03T10:50:41Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

gaearon · 2017-07-03T13:05:12Z

packages/react-scripts/config/paths.js

@@ -48,6 +48,10 @@ function getServedPath(appPackageJson) {
  return ensureSlash(servedUrl, true);
 }

+const sWPrecacheImportScript = fs.existsSync(resolveApp('public/service-worker-import.js'))
+  ? 'service-worker-import.js'


We generally use camelCase convention for filenames.

This is an abbreviation and as such I thought sWPrecacheImportScript should be fine. Are you suggesting sWprecacheImportScript ?

He's suggesting serviceWorkerImport.js.

Build script is creating a service-worker.js file - that's why I decided to use service-worker-import.js.

I guess there is such naming convention for files which are served from public directory.

Unlike the testsSetup.js which is located in src dir, this one should be placed in public and is just copied over as it is into build by build script.

Is this a blocking issue/preventing further review?

piotr-cz · 2017-07-04T07:58:18Z

I'd prefer if the import script would be located in the src directory and build script would run all the manipulations on it (search & replace of variables and minification) but I don't know how to - that's why I'm using this package.

uniquename · 2017-08-07T18:11:18Z

What's the reason that this is not getting implemented? Would be convenient to be able to customize service worker without ejecting.

chemitaxis · 2017-09-07T15:16:45Z

Hi! Any news about it? Thanks!

scrombie · 2017-10-09T17:04:13Z

Hi all! Please, any info on this?

react-scripts-dangerous · 2017-10-09T17:22:00Z

Hello! I'm a bot that helps facilitate testing pull requests.

Your pull request (commit c566e73) has been released on npm for testing purposes.

npm i [email protected]
# or
yarn add [email protected]
# or
create-react-app [email protected] folder/

Note that the package has not been reviewed or vetted by the maintainers. Only install it at your own risk!

Thanks for your contribution!

uniquename · 2017-10-18T12:06:45Z

When I run it with [email protected] and then yarn start, I get this error

./~/react-error-overlay-dangerous/lib/components/code.js Module not found: Can't resolve 'react-dev-utils/ansiHTML' in '/Users/hendrik/werkbank/ba-react/folder/node_modules/react-error-overlay-dangerous/lib/components'

Timer · 2017-10-18T13:20:34Z

Hmm, it seems react-dev-utils/ansiHTML isn't being replaced with react-dev-utils-dangerous/ansiHTML, most peculiar!

Sorry @uniquename, but this released cut won't work -- I can look into fixing this for future cuts.

Paduado · 2017-11-17T01:14:31Z

Hi! Is there any chance this would get implemented? Or should I just eject

tszarzynski · 2017-11-22T11:01:02Z

We had a similar problem while working on a project recently and we didn't want to "eject". Instead, we created a little tool that allows you to append custom service worker code to the one generated by CRA. It's not an ideal solution but worked well for us.

Have a look here: https://github.com/bbhlondon/cra-append-sw

Eder87rh · 2017-11-26T15:23:10Z

Any news?, i dont want to eject

marcelkornblum · 2017-11-27T16:00:46Z

@Eder87rh try out our tool that @tszarzynski mentioned above (https://github.com/bbhlondon/cra-append-sw) - this PR has been open almost 4 months now and it's an easy way to avoid ejecting if that's your only reason to do it.

jamland · 2017-11-27T19:25:11Z

Would be cool to have this feature!

btw https://github.com/bbhlondon/cra-append-sw rains with errors for me

uniquename · 2017-11-27T20:00:41Z

It might be possible, that there is not much going on here, because workbox will replace swprecache sooner or later #2340 (comment)

marcelkornblum · 2017-11-27T22:16:37Z

@jamland could you post an issue please? Sorry it didn't work for you, we built it as we were using it on a project ourselves

jamland · 2017-11-28T09:57:53Z

@marcelkornblum sure I will!
Yes, I understand / thanks for your effort anyway =)

DanPen · 2017-12-08T00:43:58Z

Can we get this merged? I'm in dire need :)

anshul · 2017-12-27T04:28:04Z

Any updates?

piotr-cz · 2018-01-17T09:33:13Z

I have no idea why this is still pending.

Oupsla · 2018-04-04T07:52:02Z

Little ping to @gaearon and @Timer
Can we have an update on this PR ? Thanks !

xuzhanhh · 2018-04-06T06:11:04Z

can we custom sw code in cra without ejecting now?

Timer · 2018-09-26T04:36:16Z

Closing in favor of #4169 which will make the service worker fully configurable.

implement importScripts option for SWPrecacheWebpackPlugin

c566e73

facebook-github-bot added the CLA Signed label Jul 3, 2017

gaearon reviewed Jul 3, 2017

View reviewed changes

piotr-cz mentioned this pull request Jul 11, 2017

Customization of Service Worker #2253

Closed

chee mentioned this pull request Aug 26, 2017

service worker swallows requests for files added to public/ #3008

Closed

utkez mentioned this pull request Oct 24, 2017

babel-preset-react-app: add babel-plugin-relay #2343

Closed

storm1er approved these changes Jul 12, 2018

View reviewed changes

Timer closed this Sep 26, 2018

HolyZheng mentioned this pull request Oct 29, 2018

基于react与typescript开发pwa HolyZheng/holyZheng-blog#24

Open

lock bot locked and limited conversation to collaborators Jan 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import scripts in Service Worker #2714

Import scripts in Service Worker #2714

piotr-cz commented Jul 3, 2017

facebook-github-bot commented Jul 3, 2017

facebook-github-bot commented Jul 3, 2017

gaearon Jul 3, 2017

piotr-cz Jul 3, 2017

Timer Jul 4, 2017

piotr-cz Jul 4, 2017

binki Jul 14, 2017

piotr-cz commented Jul 4, 2017

uniquename commented Aug 7, 2017

chemitaxis commented Sep 7, 2017

scrombie commented Oct 9, 2017

react-scripts-dangerous commented Oct 9, 2017

uniquename commented Oct 18, 2017 •

edited

Loading

Timer commented Oct 18, 2017 •

edited

Loading

Paduado commented Nov 17, 2017

tszarzynski commented Nov 22, 2017

Eder87rh commented Nov 26, 2017

marcelkornblum commented Nov 27, 2017

jamland commented Nov 27, 2017

uniquename commented Nov 27, 2017

marcelkornblum commented Nov 27, 2017

jamland commented Nov 28, 2017

DanPen commented Dec 8, 2017

anshul commented Dec 27, 2017

piotr-cz commented Jan 17, 2018 •

edited

Loading

Oupsla commented Apr 4, 2018

xuzhanhh commented Apr 6, 2018

Timer commented Sep 26, 2018

Import scripts in Service Worker #2714

Import scripts in Service Worker #2714

Conversation

piotr-cz commented Jul 3, 2017

facebook-github-bot commented Jul 3, 2017

facebook-github-bot commented Jul 3, 2017

gaearon Jul 3, 2017

Choose a reason for hiding this comment

piotr-cz Jul 3, 2017

Choose a reason for hiding this comment

Timer Jul 4, 2017

Choose a reason for hiding this comment

piotr-cz Jul 4, 2017

Choose a reason for hiding this comment

binki Jul 14, 2017

Choose a reason for hiding this comment

piotr-cz commented Jul 4, 2017

uniquename commented Aug 7, 2017

chemitaxis commented Sep 7, 2017

scrombie commented Oct 9, 2017

react-scripts-dangerous commented Oct 9, 2017

uniquename commented Oct 18, 2017 • edited Loading

Timer commented Oct 18, 2017 • edited Loading

Paduado commented Nov 17, 2017

tszarzynski commented Nov 22, 2017

Eder87rh commented Nov 26, 2017

marcelkornblum commented Nov 27, 2017

jamland commented Nov 27, 2017

uniquename commented Nov 27, 2017

marcelkornblum commented Nov 27, 2017

jamland commented Nov 28, 2017

DanPen commented Dec 8, 2017

anshul commented Dec 27, 2017

piotr-cz commented Jan 17, 2018 • edited Loading

Oupsla commented Apr 4, 2018

xuzhanhh commented Apr 6, 2018

Timer commented Sep 26, 2018

uniquename commented Oct 18, 2017 •

edited

Loading

Timer commented Oct 18, 2017 •

edited

Loading

piotr-cz commented Jan 17, 2018 •

edited

Loading