Dart 웹 앱을 오프라인으로 사용 가능하게 만들기: 코드 3줄

웹 애플리케이션(어쩌면 게임이나 단위 변환기)을 불러오려다가 네트워크가 끊겨서 사용하지 못해 본 적 있나요? 정말 끔찍한 경험이죠. 하지만 다행히도 그런 앱을 사용자들이 이용할 수 있게 해 주는 기술이 있어요.

대부분의 앱과 게임에서 이 작업은 Dart 코드 3줄과 터미널 커맨드 1개로 끝낼 수 있어요. 이 짧은 글에서 단계를 안내해 드릴게요. 그래서 여러분은 언제나 *Pop, Pop, Win!*을 즐길 수 있게 될 거예요.

서비스 워커(Service workers)

서비스 워커는 백그라운드에서 실행되는 JavaScript 파일이에요. 서비스 워커는 연관된 웹 페이지나 사이트를 제어하면서, 내비게이션과 리소스 요청을 가로채고 수정하며, 리소스를 아주 세밀하게 캐시할 수 있어요.

이는 비침습적인 웹 기술이에요. 서비스 워커는 브라우저가 지원한다면 사용자 경험을 개선할 수 있지만, 없더라도 사이트는 (기본 웹 동작으로) 정상적으로 운영될 수 있어요. 이것은 프로그레시브 웹 앱(PWA)을 가능하게 하는 유용한 특성이에요. 대부분의 사용자에게 더 발전된 기능을 제공하면서도, 나머지 사용자들도 배제되지 않게 할 수 있죠.

백그라운드 처리 스레드로서 서비스 워커는 다음을 도와줄 수 있어요.

오프라인 모드(네트워크가 끊긴 동안 캐시에서 리소스 가져오기)
캐싱 전략(거의 즉각적인 캐시 응답을 위해, 나중에 새 콘텐츠로 업데이트 가능하게)
푸시 알림(모바일 앱에서처럼)
메시징(애플리케이션이 여러 탭에서 열려 있을 때)

오프라인 게임 경험에서 중요한 기능은 이거예요. 우리는 *Pop, Pop, Win!*을 플레이하고 싶지, 이 공룡을 만나고 싶지 않다는 거예요.

재미있는 사실: 위쪽 화살표 키를 누르면 그 공룡과 놀 수 있어요.

Dart로 프로그레시브 웹 앱 만들기

오프라인 모드를 지원하려면 대략 다음이 필요해요.

오프라인 사용을 위해 캐시에 넣을 리소스를 결정한다.
이 리소스들의 캐시를 준비하는 서비스 워커를 만든다.
서비스 워커를 등록해서, 이후의 요청을 (네트워크가 끊긴 경우) 오프라인 캐시에서 처리할 수 있게 한다.
그 서비스 워커에서 오프라인 캐시를 URL로 미리 채우고, 캐시에서 또는 네트워크에서 적절한 fetch 요청을 처리한다.
서비스 워커가 앱 또는 정적 자산의 변경을 감지해서 새 버전을 캐시에 넣도록 한다.

위 목록이 조금 무섭게 들릴 수도 있지만, Dart에는 대부분의 작업을 대신 해 주는 pwa 패키지가 있어요. 높은 수준의 API를 제공하고 대부분을 자동화해 주죠.

애플리케이션에서의 변경 사항

pubspec.yaml에 pwa 패키지를 임포트하세요:

dependencies:
  pwa: ^0.1.2

pub get을 실행한 후, 클라이언트를 web/main.dart에 추가하세요:

import 'package:pwa/client.dart' as pwa;

main() {
  // 오프라인 캐싱을 위해 PWA ServiceWorker를 등록합니다.
  new pwa.Client();

}

위 코드는 서비스 워커(다음 단계에서 만들게 될)를 등록함으로써 위 목록의 항목 3을 처리해요. 지금은 Client 인스턴스를 다른 용도로 쓰지 않지만, pwa 패키지에 새 기능이 추가되면 다른 목적으로도 유용해질 수 있어요.

자동 생성된 프로그레시브 웹 애플리케이션

pwa 패키지는 위 목록의 1–2와 4–5를 처리하는 코드 생성을 제공해요. 캐시를 제대로 사용하려면(캐시 채우기와 무효화 모두) 다음 워크플로를 사용하세요.

모든 정적 리소스가 build/web에 들어가도록 웹 앱을 빌드한다 (pub build).
pwa의 코드 생성기를 실행해서 오프라인 자산을 스캔(또는 재스캔)한다 (pub run pwa).
(새) pwa.dart 파일을 컴파일해야 하므로 프로젝트를 다시 빌드한다 (pub build).

이 단계들은 캐시할 오프라인 URL 목록을 담은 lib/pwa/offline_urls.g.dart라는 파일을 생성해요. .g.dart 확장자는 이 파일이 생성된 파일이며 pwa의 코드 생성기 도구에 의해 자동으로 덮어써질 수 있다는 것을 나타내요.

첫 실행 시, 이 워크플로는 합리적인 기본값을 가진 서비스 워커를 담은 web/pwa.dart 파일을 생성해요. 코드 생성기가 이 파일을 다시 변경하거나 덮어쓰지 않기 때문에 (예를 들어 오프라인 URL을 사용자화하거나 고수준 API를 사용하려고) 이 파일을 수정할 수 있어요.

주의 사항

Dartium은 대부분의 웹 개발에 좋지만, 지금은 서비스 워커와 함께 사용하기 어려워요. Chrome이나 Firefox를 사용하는 것을 권장해요.

캐시 무효화는 컴퓨터 과학에서 가장 어려운 문제 중 하나예요. 기본이 되는 Web Cache API가 어느 정도 보장을 제공하고 pwa 라이브러리가 엣지 케이스를 우아하게 처리하려고 많은 노력을 기울이지만, 캐시를 정말 중요한 것의 신뢰할 수 있는 저장소로 취급하지 마세요. 캐시를 사용할 수 있을 때는 활용하고, 사용할 수 없을 때는 우아하게 실패하세요.

직접 사용해 보기

이제 애플리케이션의 새 버전을 배포할 수 있어요. 또는 오프라인 Pop, Pop, Win! 게임을 사용해 볼 수도 있어요.

게임을 열고 한 라운드를 플레이한 다음, 와이파이를 끄거나 네트워크 케이블을 뽑고 다시 로드(또는 URL을 다시 입력)해 보세요. Chrome이나 Firefox를 사용하고 있다면, 게임이 실행될 거예요. 행운을 빌어요, 재미있게 즐기세요!