Unable to find a place to inject the manifest. Please ensure that your service worker file contains the following: self.__WB_MANIFEST

workbox를 이용하여 PWA의 캐싱 방식을 직접 조작하려고 하다가 마주친 에러이다.

workbox wizard --injectManifest

위 명령어를 이용하여 workbox-config.js 파일을 생성한 후,

서비스 워커 파일을 생성하기 위해

workbox injectManifest workbox-config.js

위 명령어를 실행하려고 할 때, 잘못된 swSrc 주소나, 해당 주소의 파일에 제대로 된 값이 입력되어 있지 않으면 에러가 뜬다.

---

해결법

1. workbox-config.js 중 swSrc를 적당한 주소의 파일로 수정

module.exports = {
    globDirectory: 'dist/',
    globPatterns: ['**/*.{css,ico,png,html,js,json,txt}'],
    swDest: 'dist/sw.js',
    swSrc: 'sw-base.js',
};

2. sw-base.js 파일 수정

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
);

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

precacheAndRoute 안에 self.__WB_MANIFEST 이 들어가는 것을 확인하면 제대로 명령어가 실행된다.