"pwa" 태그로 연결된 5개 게시물개의 게시물이 있습니다.

// v4:
precacheAndRoute([]);

// v5:
precacheAndRoute(self.__WB_MANIFEST);

// v4:
const updatesChannel = new BroadcastChannel("api-updates");
updatesChannel.addEventListener("message", (event) => {
  const { cacheName, updatedUrl } = event.data.payload;
  // ... your code here ...
});

// v5:
// This listener should be added as early as possible in your page's lifespan
// to ensure that messages are properly buffered.
navigator.serviceWorker.addEventListener("message", (event) => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.meta === "workbox-broadcast-update") {
    const { cacheName, updatedUrl } = event.data.payload;
    // ... your code here ...
  }
});

// IndexedDB 는 Promisify 되어있지 않아서 라이브러리가 필요하다.
importScripts(
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/localforage.min.js",
);

// 캐시하고 싶은 POST 엔드포인트
const ENDPOINT = "https://your-domain/post-request";

const bin2Hex = (buffer) => {
  let digest = "";
  const dataView = new DataView(buffer);
  for (let i = 0, len = dataView.byteLength; i < len; i += 4) {
    const value = dataView.getUint32(i);
    // hex 로 바꾸면 패딩비트 0 이 제거된다.
    const hex = value.toString(16);
    // uint32 는 4bytes 로 나온다.
    const padding = "00000000";
    // 패딩을 더해서 뒤에서 잘라준다.
    const paddedValue = (padding + hex).slice(-padding.length);
    digest += paddedValue;
  }

  return digest;
};

const postRequestFetchListener = (fetchEvent) => {
  const requestUrl = fetchEvent.request.url;
  const method = fetchEvent.request.method.toUpperCase();
  // 맞는 엔드포인트인지 확인
  if (!(method === "POST" && requestUrl === ENDPOINT)) {
    return;
  }

  fetchEvent.respondWith(
    fetchEvent.request
      .clone()
      .arrayBuffer()
      .then((buffer) => {
        const requestBody = String.fromCharCode.apply(
          null,
          new Uint8Array(buffer),
        );
        // request body 에 원하는 조건만 캐시처리할 수 있게 한다.
        if (requestBody.includes("cache=1")) {
          // 속도면에서 다른 해싱 알고리즘을 사용해도 무방하다.
          return crypto.subtle.digest("SHA-1", buffer);
        }

        return Promise.reject();
      })
      .then((sha1Buffer) => {
        const sha1Hash = bin2Hex(sha1Buffer);
        console.log("SHA1 Hash => ", sha1Hash);

        // IndexedDB 에서 캐시된 키를 찾는다.
        return localforage.getItem(sha1Hash).then((cachedResponse) => {
          if (cachedResponse) {
            console.log("Cached repsonse => ", cachedResponse);
            return new Response(cachedResponse, {
              // 여기서 statusCode 를 304 로 내보내고 싶었으나, Body 를 반환할 수 없었다.
              status: 200,
              statusText: "OK",
              headers: {
                "Content-Length": cachedResponse.length,
                "Content-Type": "application/json",
                // 그래서 커스텀 헤더를 추가했다.
                "X-SW-Cache-Hit": 1,
                "X-SW-Cache-Type": "POST",
              },
            });
          }

          // 캐시된 데이터가 없을 경우 새로 요청한다.
          return fetch(fetchEvent.request).then((response) => {
            console.log("Fetching response => ", response.clone());

            // 정상적일 경우만 IndexedDB 에 저장한다.
            if (200 <= response.status && response.status < 400) {
              // 이 작업은 비동기지만 굳이 기다리지 않아도 된다.
              response
                .clone()
                .text()
                .then((textResponse) => {
                  console.log("Caching response => ", textResponse);
                  return localforage.setItem(sha1Hash, textResponse);
                });
            }

            return response;
          });
        });
      })
      .catch(() => fetch(fetchEvent.request)),
  );
};

// 리스너를 등록해준다.
self.addEventListener("fetch", postRequestFetchListener);

// navigator (브라우저)에 serviceWorker 기능이 있는지 확인
if ("serviceWorker" in navigator) {
  // 서비스워커 설치시 DOM 블로킹을 막아준다.
  window.addEventListener("load", function () {
    // 서비스워커를 register 하면 promise를 반환한다.
    navigator.serviceWorker
      .register("/sw.js")
      .then(() => {
        console.log("서비스 워커가 등록되었다.");
      })
      .catch((error) => {
        console.log(error);
      });
  });
}

const PRE_CACHE_NAME = "캐시-스토리지1";
// 캐시하고 싶은 리소스
const urlsToCache = [
  "/public/image/image1.png",
  "/public/css/font-awesome.min.css",
];

// 서비스워커가 설치될 때
self.addEventListener("install", (event) => {
  // 캐시 등록 이벤트가 끝날 때까지 기다려
  event.waitUntil(
    // '캐시-스토리지1'을 연다.
    // @return {Promise} 연결된 Cache Database를 반환한다.
    caches
      .open(PRE_CACHE_NAME)
      .then((cache) => {
        console.log("캐시 디비와 연결됨");
        // addAll 메소드로 내가 캐싱할 리소스를 다 넣어주자.
        return cache.addAll(urlsToCache);
      })
      .then(() => {
        // 설치 후에 바로 활성화 단계로 들어갈 수 있게 해준다.
        return self.skipWaiting();
      }),
  );
});

const DYNAMIC_CACHE_NAME = "다이나믹-캐시-스토리지1";

// fetch event는 어딘가에서 리소스를 가져올 때 모두 실행된다.
// js를 가져오거나 이미지를 가져오거나 페이지를 가져오거나 등등
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 캐시에 있으면 repsonse를 그대로 돌려준다.
      if (response) {
        return response;
      }

      // 여기서 request를 복사해준다.
      // request는 스트림으로 fetch 당 한 번만 사용해야하기 때문이다.
      // 근데 event.request로 받아도 실행은 된다
      const fetchRequest = event.request.clone();

      // if (response) return response 구문을 하나로 합칠 수도 있다.
      // return response || fetch(fetchRequest)
      return fetch(fetchRequest).then((response) => {
        // 응답이 제대로 왔는지 체크한다.
        // 구글 문서에는 다음과 같이 처리하라고 되어있는데
        // 이 경우 Cross Site Request에 대해 캐싱 처리를 할 수가 없다.
        // if(!response || response.status !== 200 || response.type !== 'basic') {
        if (!response) {
          return response;
        }

        // 응답은 꼭 복사 해줘야한다.
        const responseToCache = response.clone();

        // 캐시 스토리지를 열고 정말 캐싱을 해준다.
        caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
          cache.put(event.request, responseToCache);
        });

        // 여기서 response를 내보내줘야 캐싱 처리 후에 리소스를 반환한다.
        return response;
      });
    }),
  );
});

// 서비스 워커가 활성화 될 때
self.addEventListener("activate", (event) => {
  // 영구적으로 가져갈 캐시 스트리지 화이트리스트
  const cacheWhiteList = [PRE_CACHE_NAME, DYNAMIC_CACHE_NAME];

  event.waitUntil(
    // 캐시 스토리지의 모든 스토리지명을 가져온다.
    caches.keys().then((cacheNames) => {
      // 캐시를 삭제하는 건 Promise를 반환하므로 Promise.all을 사용해 끝날 시점을 잡아야한다.
      return Promise.all(
        // 이 결과는 [Promise, Promise...] 형태가 되시겠다.
        cacheNames.map((cacheName) => {
          // 각각의 캐시 스토리지명이 화이트 리스트와 같지 않을 경우
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            // 캐시를 삭제하는 Promise를 배열에 추가한다.
            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );

  // activate 시에는 clients claim 메소드를 호출해서
  // 브라우저에 대한 제어권을 가져와야한다.
  return self.clients.claim();
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => {
        // ...
      })
      .catch((error) => {
        // 에러 발생시 캐시되어있는 offline.html로 이동시킨다.
        return caches.open(CACHE_NAME).then((cache) => {
          // 들어온 요청의 Accept 헤더가 text/html 을 포함하고 있다면 (페이지 요청이라면)
          if (event.request.headers.get("accept").includes("text/html")) {
            // 캐시된 offline fallback 페이지를 보여준다.
            return cache.match("/offline.html");
          }
        });
      }),
  );
});

(() => {
  const STATIC_CACHE_NAME = "STATIC_CACHE_VERSION_1";
  const DYNAMIC_CACHE_NAME = "DYNAMIC_CACHE_VERSION_1";

  const WEB_CACHE = {
    init() {
      self.addEventListener("install", this.staticCacheStrategy.bind(this));
      self.addEventListener("activate", this.deleteOldCache.bind(this));
      self.addEventListener("fetch", this.dynamicCacheStrategy.bind(this));
    },

    staticCacheStrategy(event) {
      // 스태틱 캐싱
    },

    deleteOldCache(event) {
      // 캐시 삭제
    },

    dynamicCacheStrategy(event) {
      // 다이나믹 캐싱
    },
  };

  WEB_CACHE.init();
})();

const dynamicCacheStrategy = (event) => {
  // 캐싱 처리하고 싶은 content-type
  const cacheContentsTypes = [
    "image/png",
    "image/gif",
    "image/jpeg",
    "application/font-woff",
  ];

  event.respondWith(
    caches.match(event.request).then((response) => {
      const fetchRequest = event.request.clone();

      return (
        response ||
        fetch(fetchRequest)
          .then((response) => {
            if (!response) {
              return response;
            }

            // response header에서 content-type을 가져와 비교한다.
            // 아니면 request.url이 캐싱처리를 할 외부 url인지 확인한다.
            if (
              cacheContentsTypes.indexOf(
                response.headers.get("content-type"),
              ) !== -1 ||
              event.request.url.indexOf("external.url") !== -1
            ) {
              caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
                cache.put(event.request, response.clone());
              });
            }

            return response;
          })
          .catch((error) => console.log(error))
      );
    }),
  );
};

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

workbox.precaching.precacheAndRoute([
  {
    url: "css/fonts/fontawesome/fontawesome-webfont.eot",
    revision: "674f50d287a8c48dc19ba404d20fe713",
  },
  {
    //...
  },
]);

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

// importScripts 후 타이밍 차이로 인해 모듈을 못 불러오는 경우를 방지하기 위해
// 캐싱 정책 모듈 로드를 기다린다.
workbox.loadModule("workbox-strategies");

workbox.skipWaiting();
workbox.clientsClaim();

// accept 헤더에 text/html 값이 있으면 (html 페이지 요청일 경우)
// networkFirst 캐싱
workbox.routing.registerRoute((routeData) => {
  return routeData.event.request.headers.get("accept").includes("text/html");
}, workbox.strategies.networkFirst());

// imgur 요청일 경우 cacheFirst 캐싱
workbox.routing.registerRoute(
  /.*(?:imgur)\.com.*$/,
  workbox.strategies.cacheFirst(),
);

// jsdelivr 요청일 경우 stateWhileRevalidate 캐싱
workbox.routing.registerRoute(
  /.*(?:jsdelivr)\.net.*$/,
  workbox.strategies.staleWhileRevalidate(),
);

// bootcss 요청일 경우 stateWhileRevalidate 캐싱
workbox.routing.registerRoute(
  /.*(?:bootcss)\.com.*$/,
  workbox.strategies.staleWhileRevalidate(),
);

workbox.googleAnalytics.initialize();