create-react-app과 손쉬운 워크박스 통합
10766 단어 reactjavascriptworkboxcode
이 기사에서는 이러한 기술과 관련된 몇 가지 용어를 사용할 것이기 때문에 create-react-app, workbox 및 react 프레임워크에 대한 기본 지식이 있다고 가정합니다. 전문가가 될 필요는 없으며 초보자 수준의 지식이면 충분합니다.
1. serviceWorker.js 업데이트
첫 번째 단계는 src 폴더 내의 serviceWorker.js 파일을 업데이트하는 것입니다. 등록 기능을 업데이트하겠습니다. 현재 다음과 같이 보입니다.
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
다음 줄을 업데이트할 것입니다.
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
에게:
const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;
이렇게 하면 'custom-service-worker.js'라는 사용자 지정 서비스 작업자 파일을 만들고 등록할 수 있습니다. 이 이름은 원하는 대로 지정할 수 있습니다.
개발 중에 이것을 테스트할 수 있도록 하려면 다음 줄에서 프로덕션 환경 검사를 비활성화하십시오.
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
2. 커스텀 서비스 워커 파일 생성
다음 단계는 응용 프로그램의 공용 폴더에 사용자 지정 서비스 작업자 파일을 만드는 것입니다. 이것은 1단계에서 사용한 이름과 일치해야 합니다. 이 경우 'custom-service-worker.js'
여기에서 workbox를 가져와 사용할 수 있습니다.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js')
if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`);
} else {
console.log(`Boo! Workbox didn't load 😬`);
}
워크박스가 CDN에서 로드되면 워크박스 API를 사용할 수 있도록 워크박스 개체가 생성됩니다.
다음 두 가지 방법 중 하나로 공용 폴더의 폴더에 파일을 다운로드하여 워크박스를 자체 호스팅할 수 있습니다.
워크박스는 CDN을 통해 로드될 때 참조되는 모든 모듈을 캐시합니다. 이러한 모듈은 처음 참조된 후 오프라인에서 사용할 수 있습니다.
따라서 이것이 우려되는 경우 워크박스를 직접 호스팅할 필요가 없습니다.
자체 호스팅인 경우 워크박스를 로드하려면 다음을 수행해야 합니다.
importScripts('/third_party/workbox/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox/'
});
이 경우 워크박스 폴더는 애플리케이션의 공용 폴더에 있는 third_party 폴더에 포함되어 있습니다.
이제 드디어 workbox를 사용할 수 있습니다. 우리는 다른 workbox 모듈에 접근하기 위해 destructuring을 사용할 수 있습니다:
const { backgroundSync, routing, strategies } = workbox
3. 서비스 워커 등록
마지막 단계는 애플리케이션에 서비스 워커를 등록하는 것입니다. src 폴더의 index.js 파일로 이동하여 다음 줄을 변경합니다.
serviceWorker.unregister();
에게:
serviceWorker.register();
게시물Easy Workbox Integration with create-react-app이 Kelvin Mwinuka에 처음 등장했습니다.
이 기사가 마음에 들었다면 내 콘텐츠가 여기에 게시되기 전에 먼저 내 콘텐츠에 액세스할 수 있도록 내 website를 팔로우하는 것을 고려해 보세요(걱정하지 마세요. 성가신 팝업 광고 없이 여전히 무료입니다!). 또한 이 게시물에 댓글을 남겨주세요. 여러분의 생각을 듣고 싶습니다!
Reference
이 문제에 관하여(create-react-app과 손쉬운 워크박스 통합), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kelvinvmwinuka/easy-workbox-integration-with-create-react-app-1jkn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)