오프라인 지원

AISCouncil는 첫 방문 후 오프라인에서 작동하는 PWA(Progressive Web App)입니다. 전체 애플리케이션은 외부 종속성이 없는 단일 HTML 파일이므로 브라우저의 서비스 워커에 의해 완전히 캐시될 수 있습니다.

PWA(Progressive Web App)

앱은 첫 로드 시 모든 정적 자산을 캐시하는 서비스 워커(sw.js)를 등록합니다. 후속 방문 시 앱은 인터넷 연결 없이도 캐시에서 즉시 로드됩니다.

앱으로 설치

Chrome / Edge (데스크톱):

aiscouncil.net 방문
주소 표시줄의 설치 아이콘 클릭 (또는 메뉴 > "Install AISCouncil"로 이동)
앱이 자체 창에서 열리며 자체 작업 표시줄 항목이 있음

Chrome / Edge (Android):

aiscouncil.net 방문
브라우저 메뉴 탭 (세 개의 점)
"Add to Home screen" 또는 "Install app" 선택

Safari (iOS / macOS):

aiscouncil.net 방문
공유 버튼 탭
"Add to Home Screen" 선택

팁

PWA로 설치되면 앱이 standalone 모드로 실행됩니다 -- 브라우저 크롬 없음, 전체 화면 경험, 작업 전환기에서 네이티브 앱으로 표시.

서비스 워커 캐싱 전략

서비스 워커는 stale-while-revalidate 전략을 사용합니다:

첫 방문: 모든 사전 캐시된 자산이 다운로드되어 캐시에 저장됨
후속 방문: 캐시된 버전이 즉시 제공됨 (네트워크 지연 없음), 서비스 워커가 백그라운드에서 업데이트된 버전 가져옴
업데이트 후 다음 방문: 업데이트된 버전이 캐시에서 제공됨

이것은 항상 즉각적인 로드 시간을 얻고 업데이트가 백그라운드에서 조용히 도착함을 의미합니다.

캐시되는 항목

서비스 워커는 설치 시 다음 파일을 사전 캐시합니다:

파일	목적
`/`	HTML 셸 (`/index.html`로 리디렉션)
`/index.html`	완전한 애플리케이션 (~모든 JS, CSS 및 HTML 인라인)
`/icon.svg`	벡터 앱 아이콘
`/icon-192.png`	192x192 PNG 아이콘 (Android 홈 화면)
`/icon-512.png`	512x512 PNG 아이콘 (스플래시 화면, 마스크 가능)
`/favicon.ico`	브라우저 탭 파비콘
`/manifest.webmanifest`	PWA 매니페스트 (이름, 아이콘, 테마 색상)

또한 앱이 만드는 모든 동일 출처 GET 요청은 첫 가져오기 시 캐시되고 후속 요청 시 캐시에서 제공됩니다 (stale-while-revalidate).

캐시되지 않는 항목

리소스	이유
LLM API 호출	이것은 제공업체 API(Anthropic, OpenAI 등)로 직접 이동하며 인터넷 연결 필요
레지스트리 업데이트	GitHub에서 모델 레지스트리 가져오기는 네트워크 필요, 앱은 캐시된/번들된 데이터로 대체
교차 출처 리소스	동일 출처 요청만 서비스 워커에 의해 캐시됨
POST/PUT/DELETE 요청	GET 요청만 캐시됨
API 프록시 호출	`/v1/*`에 대한 요청은 캐싱에서 명시적으로 제외됨

오프라인 기능

오프라인일 때 다음을 할 수 있습니다:

기존 채팅 찾아보기 -- 모든 채팅 기록이 IndexedDB에 로컬로 저장됨
프로필 관리 -- 봇 프로필 생성, 편집 및 삭제
설정 보기 및 변경 -- 모든 설정이 localStorage에 있음
데이터 내보내기 -- 백업 JSON 파일 다운로드
봇 간 전환 -- 모든 봇 구성이 로컬로 저장됨
이전 대화 읽기 -- 전체 메시지 기록 사용 가능

오프라인일 때 다음을 할 수 없습니다:

새 메시지 보내기 -- LLM 제공업체에 대한 API 호출 필요
모델 레지스트리 새로 고침 -- GitHub에서 가져오기 필요
로그인 -- OAuth는 네트워크 연결 필요
미니 프로그램 설치 -- 매니페스트 및 진입 HTML 가져오기 필요

정보

localhost에서 로컬 인스턴스가 있는 Ollama 사용자는 Ollama가 localhost에서 실행되고 인터넷 액세스가 필요하지 않으므로 여전히 오프라인에서 채팅할 수 있습니다.

캐시 버전 관리

서비스 워커는 버전이 지정된 캐시 이름을 사용합니다:

const CACHE = "ais-v1.0.0";

버전 문자열이 변경되면(주요 업데이트 시) 새 서비스 워커는:

새 이름으로 새 캐시 생성
모든 자산을 새 캐시에 사전 캐시
활성화 시 모든 이전 캐시 삭제
모든 열린 클라이언트 클레임

이것은 주요 업데이트 후 오래된 캐시된 코드가 정리됨을 보장합니다.

앱 업데이트

업데이트는 자동으로 발생합니다:

페이지를 방문하면 브라우저가 sw.js가 변경되었는지 확인
변경된 경우 새 서비스 워커가 백그라운드에 설치됨
다음 페이지 로드 시 (또는 모든 탭이 닫히고 다시 열린 후) 새 서비스 워커가 활성화됨
새 버전이 이제 캐시에서 제공됨

강제 업데이트

즉시 업데이트를 강제하려면: DevTools > Application > Service Workers 열기, 등록된 서비스 워커에서 "Update" 클릭, 페이지 다시 로드. 또는 Shift를 누른 상태에서 브라우저의 다시 로드 버튼을 클릭하여 캐시를 우회.

웹 앱 매니페스트

manifest.webmanifest 파일은 설치 시 앱이 어떻게 나타나는지 정의합니다:

{
  "name": "AISCouncil",
  "short_name": "AISCouncil",
  "description": "Chat with Claude, GPT, or Grok -- no server, no setup.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#7c3aed",
  "categories": ["productivity", "utilities"],
  "icons": [
    { "src": "icon.svg", "sizes": "any", "type": "image/svg+xml" },
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

필드	값	목적
`display`	`standalone`	브라우저 UI (주소 표시줄, 탭) 없이 실행
`orientation`	`any`	세로 및 가로 모드에서 작동
`theme_color`	`#7c3aed`	상태 표시줄 및 제목 표시줄의 보라색 강조
`background_color`	`#000000`	앱이 로드되는 동안 스플래시 화면 배경

문제 해결

앱이 이전 버전을 표시함:

DevTools > Application > Service Workers 열기
이전 서비스 워커에서 "Unregister" 클릭
페이지 다시 로드

앱이 오프라인에서 작동하지 않음:

서비스 워커가 등록되어 있는지 확인 (DevTools > Application > Service Workers)
온라인 상태에서 페이지를 최소 한 번 방문했는지 확인
캐시가 존재하는지 확인 (DevTools > Application > Cache Storage)
일부 브라우저는 시크릿/비공개 모드에서 서비스 워커를 비활성화함

설치 프롬프트가 나타나지 않음:

페이지가 HTTPS(또는 localhost)를 통해 제공되어야 함
서비스 워커가 등록되어 있고 활성 상태여야 함
매니페스트가 유효하고 HTML <head>에 링크되어야 함
방문 간에 시간이 좀 있는 상태로 페이지를 최소 두 번 방문해야 함 (브라우저 휴리스틱)

PWA(Progressive Web App)​

앱으로 설치​

서비스 워커 캐싱 전략​

캐시되는 항목​

캐시되지 않는 항목​

오프라인 기능​

캐시 버전 관리​

앱 업데이트​

웹 앱 매니페스트​

문제 해결​