Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

👷 Customize your service worker in create react app without `npm run eject`

License

NotificationsYou must be signed in to change notification settings

liuderchi/sw-precache-cra

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

👷 Customize your service worker in create react app withoutnpm run eject

The Problem

Create-react-app provides built-inservice-worker.js butwhen you want to extend it
(e.g. to cache REST API response) you need to donpm run eject and maintain more configs.

Sometimes we just want to enjoy customization but keep those big configs unchanged.
This cli tool helps you achieve this with ease.

Demo

https://sw-precache-cra-demo-cra-contributors.netlify.com/

A page caching GitHub API response withone simple config. Done in4 steps

Extend Service Worker in Create React App in 2 steps

  1. $ npm i -S sw-precache-cra

  2. Edit thebuild script inpackage.json

There are 2 examples:

💡 If you want your service workercache API response with url/messages:

concat the build script

"scripts": {  "start": "react-scripts start",- "build": "react-scripts build",+ "build": "react-scripts build && sw-precache-cra --config sw-config.js",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject"}

with one additional js module having anysw-precache configs:

// sw-config.jsmodule.exports={runtimeCaching:[{urlPattern:'/messages',handler:'networkFirst',},],};

🎉 You've got custombuild/service-worker.js afternpm run build

💡 If you want to haveNon minifiedbuild/service-workder.js you can do this:

"scripts": {  "start": "react-scripts start",- "build": "react-scripts build",+ "build": "react-scripts build && sw-precache-cra --no-minify",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject"}

🎉 You've got Un-minifiedbuild/service-worker.js afternpm run build

Other API

$ sw-precache-cra --list-config# Print current config for sw-precache# If you do not specify a config file, default config by CRA is printed#{ swFilePath:'./build/service-worker.js',  cacheId:'sw-precache-webpack-plugin',  dontCacheBustUrlsMatching: /\.\w{8}\./,  navigateFallback:'/index.html',  navigateFallbackWhitelist: [ /^(?!\/__).*/ ],  staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],  staticFileGlobs:   ['./build/**/**.html','./build/static/js/*.js','./build/static/css/*.css','./build/static/media/**' ],  stripPrefix:'./build' }

For more APIs please dosw-precache-cra --help

Reference

License

MIT License

About

👷 Customize your service worker in create react app without `npm run eject`

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp