Import scripts in Service Worker

[piotr-cz]

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

How-to:

1. create a file called public/service-worker-import.js
2. run npm run build
3. 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]

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 cla@fb.com. Thanks!

[facebook-github-bot]

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

[gaearon]

We generally use camelCase convention for filenames.

[piotr-cz]

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

[Timer]

He's suggesting serviceWorkerImport.js.

[piotr-cz]

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.

[binki]

Is this a blocking issue/preventing further review?

[piotr-cz]

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]

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

[chemitaxis]

Hi! Any news about it? Thanks!

[scrombie]

Hi all! Please, any info on this?

[react-scripts-dangerous]

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 react-scripts-dangerous@1.0.11-c566e73.0
# or
yarn add react-scripts-dangerous@1.0.11-c566e73.0
# or
create-react-app --scripts-version=react-scripts-dangerous@1.0.11-c566e73.0 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]

When I run it with react-scripts-dangerous@1.0.11-c566e73.0 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]

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]

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

[tszarzynski]

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]

Any news?, i dont want to eject

[marcelkornblum]

@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]

Would be cool to have this feature!

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

[uniquename]

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

[marcelkornblum]

@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]

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

[DanPen]

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

[anshul]

Any updates?

[piotr-cz]

I have no idea why this is still pending.

[Oupsla]

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

[mame-col]

can we custom sw code in cra without ejecting now?

[Timer]

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