이 페이지는 Cloud Translation API를 통해 번역되었습니다.

오프라인 대체 페이지 만들기

Pete LePage

Thomas Steiner

Google 어시스턴트 앱, Slack 앱, Zoom 앱, 휴대전화나 컴퓨터의 거의 모든 기타 플랫폼별 앱의 공통점은 무엇일까요? 맞아요. 항상 무언가를 주죠. 네트워크에 연결되어 있지 않은 경우에도 어시스턴트 앱을 열거나 Slack에 들어가거나 Zoom을 실행할 수 있습니다. 특별히 의미 있는 결과를 얻지 못하거나 원하는 결과를 달성하지 못할 수도 있지만 최소한 무언가를 얻을 수 있고 앱이 제어됩니다.

오프라인 상태에서 Google 어시스턴트 모바일 앱 — Google 어시스턴트

반면 웹에서는 오프라인 상태일 때 아무것도 얻을 수 없습니다. Chrome에서는 오프라인 공룡 게임을 제공하지만 그게 전부입니다.

오프라인 공룡 게임이 표시된 Google Chrome 모바일 앱 — iOS용 Chrome.

오프라인 공룡 게임이 표시된 Google Chrome 데스크톱 앱 — iOS용 Chrome.

맞춤 서비스 워커가 있는 오프라인 대체 페이지

하지만 반드시 이럴 필요는 없습니다. 서비스 워커 및 Cache Storage API를 사용하면 사용자에게 맞춤 오프라인 환경을 제공할 수 있습니다. 사용자가 현재 오프라인 상태라는 정보가 포함된 간단한 브랜드 페이지일 수도 있지만, 수동 다시 연결 버튼과 자동 다시 연결 시도 카운트다운이 있는 유명한 trivago 오프라인 미로 게임과 같은 더 창의적인 솔루션일 수도 있습니다.

trivago 오프라인 미로가 있는 trivago 오프라인 페이지 — trivago 오프라인 미로입니다.

서비스 워커 등록

이를 구현하는 방법은 서비스 워커를 사용하는 것입니다. 아래 코드 샘플과 같이 기본 페이지에서 서비스 워커를 등록할 수 있습니다. 일반적으로 앱이 로드된 후 이 작업을 한 번 실행합니다.

window.addEventListener("load", () => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("service-worker.js");
  }
});

서비스 워커 코드

실제 서비스 워커 파일의 콘텐츠는 처음에는 약간 복잡해 보일 수 있지만 아래 샘플의 주석을 보면 명확해질 것입니다. 핵심 아이디어는 실패한 탐색 요청에만 제공되는 offline.html라는 파일을 미리 캐시하고 브라우저가 다른 모든 사례를 처리하도록 하는 것입니다.

/*
Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

// Incrementing OFFLINE_VERSION will kick off the install event and force
// previously cached resources to be updated from the network.
// This variable is intentionally declared and unused.
// Add a comment for your linter if you want:
// eslint-disable-next-line no-unused-vars
const OFFLINE_VERSION = 1;
const CACHE_NAME = "offline";
// Customize this with a different URL if needed.
const OFFLINE_URL = "offline.html";

self.addEventListener("install", (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(CACHE_NAME);
      // Setting {cache: 'reload'} in the new request ensures that the
      // response isn't fulfilled from the HTTP cache; i.e., it will be
      // from the network.
      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
    })()
  );
  // Force the waiting service worker to become the active service worker.
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      // Enable navigation preload if it's supported.
      // See https://developers.google.com/web/updates/2017/02/navigation-preload
      if ("navigationPreload" in self.registration) {
        await self.registration.navigationPreload.enable();
      }
    })()
  );

  // Tell the active service worker to take control of the page immediately.
  self.clients.claim();
});

self.addEventListener("fetch", (event) => {
  // Only call event.respondWith() if this is a navigation request
  // for an HTML page.
  if (event.request.mode === "navigate") {
    event.respondWith(
      (async () => {
        try {
          // First, try to use the navigation preload response if it's
          // supported.
          const preloadResponse = await event.preloadResponse;
          if (preloadResponse) {
            return preloadResponse;
          }

          // Always try the network first.
          const networkResponse = await fetch(event.request);
          return networkResponse;
        } catch (error) {
          // catch is only triggered if an exception is thrown, which is
          // likely due to a network error.
          // If fetch() returns a valid HTTP response with a response code in
          // the 4xx or 5xx range, the catch() will NOT be called.
          console.log("Fetch failed; returning offline page instead.", error);

          const cache = await caches.open(CACHE_NAME);
          const cachedResponse = await cache.match(OFFLINE_URL);
          return cachedResponse;
        }
      })()
    );
  }

  // If our if() condition is false, then this fetch handler won't
  // intercept the request. If there are any other fetch handlers
  // registered, they will get a chance to call event.respondWith().
  // If no fetch handlers call event.respondWith(), the request
  // will be handled by the browser as if there were no service
  // worker involvement.
});