사용 가능 · v1

귀하의 웹사이트와 해당 앱 사이의 다리입니다.

공개 백엔드 서비스 없이 페이지 제목, 탐색, 배지, 앱 수명 주기, 공유, 알림 및 기타 기본 동작을 조정하기 위한 소규모 버전의 JavaScript SDK입니다.

app-bridge.js
const context = await SiteToApp.ready();

if (context.available) {
  await SiteToApp.page.setTitle('Your cart');
  await SiteToApp.navigation.setBadge('cart', 3);
}
키, 토큰 또는 공개 REST 엔드포인트 없음
목적

앱을 인식하는 순간을 제공하는 하나의 웹사이트.

SDK는 선택적 점진적 향상입니다. 귀하의 페이지에는 여전히 콘텐츠, 라우팅, 계정, 카트 및 비즈니스 규칙이 있습니다. 기본 셸은 앱 Chrome 및 장치 통합을 소유합니다. SDK는 둘 사이에 검증된 작은 메시지를 전달합니다.

관련된 SiteTo.App 공개 REST 서비스는 없습니다. 웹사이트에는 SiteTo.App 키가 필요하지 않으며 SDK에는 매장 자격 증명, 고객 비밀 또는 권한 있는 계정 토큰이 포함되어서는 안 됩니다.

상황에 맞는 페이지 제목

브라우저 제목을 올바르게 유지하면서 결제, 계정 또는 기사 페이지에서 기본 헤더를 업데이트할 수 있습니다.

실시간 탐색 배지

알려진 값을 즉시 푸시하거나 동일한 출처 URL에서 장바구니, 받은 편지함 또는 예약 수를 읽습니다.

경로 인식 탐색

활성 기본 탐색 항목을 기존 페이지 및 단일 페이지 애플리케이션 경로에 맞춰 유지하세요.

수명주기 이벤트

앱이 다시 시작되거나, 다시 연결되거나, 알림이나 딥 링크에서 열리면 오래된 웹사이트 상태를 새로 고칩니다.

기본 작업

지원되는 경우 시스템 공유 시트, 권한 프롬프트, 설정 및 미묘한 햅틱 피드백을 사용하십시오.

안전한 브라우저 동작

모든 기능에는 문서화된 브라우저 대체 또는 무작동이 있으므로 하나의 웹사이트 코드베이스가 어디에서나 계속 작동합니다.

가용성 및 설정

명시적으로 버전이 지정된 하나의 스크립트입니다.

일반 웹사이트에 CDN 스크립트를 추가하거나, 번들 애플리케이션에 npm 패키지를 설치하세요. 둘 다 동일한 동작과 프로토콜 버전을 노출합니다.

CDN 스크립트v1
<script
  src="https://cdn.siteto.app/sdk/v1/sitetoapp.min.js"
  defer
></script>
ES 모듈v1
import { SiteToApp } from '@sitetoapp/web-sdk';

주요 버전은 URL 및 패키지 계약에 있습니다. 주요 추가 사항은 다음 기간 내에 배송될 수 있습니다. v1; 이름이 변경된 메서드, 변경된 페이로드 또는 다른 대체 동작에는 다음이 필요합니다. v2.

준비 상태 및 상황

사용자 에이전트가 아닌 기능을 감지합니다.

SiteToApp.ready() 네이티브 셸과 핸드셰이크를 시작하고 다음으로 해결됩니다. AppContext. 일반 브라우저에서도 해결해야 하므로 존재하지 않는 브리지를 기다리는 동안 애플리케이션 코드가 중단되지 않습니다.

자바스크립트v1
const context = await SiteToApp.ready({ timeout: 1500 });

if (!context.available) {
  // Normal browser: keep using your existing web behavior.
  return;
}

await SiteToApp.page.setTitle('Order details');
await SiteToApp.navigation.setActive('orders');
컨텍스트 필드값이유
사용 가능부울네이티브 셸이 유효한 핸드셰이크를 완료했는지 여부입니다.
플랫폼iOS | 안드로이드 | 편물활성 런타임. 사용자 에이전트에서 추론되지 않습니다.
appVersion문자열 | null설치된 기본 앱 버전(사용 가능한 경우)
sdkVersion끈로드된 웹사이트 SDK 버전입니다.
protocolVersion번호 | null앱과 협상된 브릿지 계약입니다.
능력끈[]Navigation.badge 또는 share와 같은 지원되는 명령입니다.
colorScheme빛 | 어두운현재 네이티브 모습입니다.
safeArea위, 오른쪽, 아래, 왼쪽사용자 정의 전체 화면 레이아웃을 위한 CSS 픽셀의 삽입입니다.
기능 코드를 확인해야 합니다. context.capabilities 설치된 앱 버전에 따라 지원이 달라지는 경우. 플랫폼 점검은 최후의 수단입니다.
페이지 제목 및 상태

기본 헤더를 컨텍스트에 맞게 유지하세요.

고객이 제품, 기사, 계정 섹션 또는 결제를 통해 이동할 때 페이지에서 앱 헤더를 변경할 수 있습니다. 기본적으로 setTitle 기본 헤더와 document.title 따라서 브라우저 기록도 여전히 유용합니다.

자바스크립트v1
// Update both the document title and the app header.
await SiteToApp.page.setTitle('Your cart');

// Change only the native header.
await SiteToApp.page.setTitle('Checkout', {
  document: false,
  native: true,
});

// Return to the title derived from the page or app configuration.
await SiteToApp.page.resetTitle();
page.setLoading(boolean)

웹사이트 전환을 쉘 로딩 표시기에 연결합니다. 페이지가 영원히 실행되도록 놔둘 수 없도록 앱은 계속해서 자동 시간 초과를 적용해야 합니다.

page.setPullToRefresh(boolean)

제스처가 페이지 동작과 충돌하는 그리기 표면, 지도 또는 상호 작용에 대해 당겨서 새로 고침을 비활성화합니다.

탐색 배지

지금 중요한 개수를 보여주세요.

탐색 항목은 다음과 같이 SiteTo.App 빌더에 구성된 안정적인 ID를 사용합니다. cart, inbox, 또는 bookings. 라벨은 변경될 수 있지만 해당 ID는 웹사이트와 앱 간의 계약으로 유지됩니다.

알려진 값 설정

자바스크립트v1
// Numbers are formatted by the native app: 100 becomes “99+”.
await SiteToApp.navigation.setBadge('cart', 3);

// Zero, null, or false hides the badge.
await SiteToApp.navigation.setBadge('cart', 0);

// Short status labels are also allowed.
await SiteToApp.navigation.setBadge('inbox', 'NEW');

URL에서 업데이트

감시자는 별도의 SiteTo.App 서비스가 아닌 웹 사이트 컨텍스트에서 가져옵니다. 일반 사이트 쿠키와 보안 규칙을 그대로 유지하므로 원본이 동일한 상대 URL을 사용하는 것이 좋습니다.

Shopify 스타일 카트 예v1
const cartBadge = SiteToApp.navigation.watchBadge('cart', {
  url: '/cart.js',
  jsonPath: 'item_count',
  interval: 30_000,
  refreshOn: ['ready', 'resume', 'focus', 'urlchange'],
  hideWhenZero: true,
  stale: 'keep',
});

// Refresh after a local add-to-cart action.
await cartBadge.refresh();

// Stop fetching when this page no longer owns the badge.
cartBadge.stop();
옵션기본행동
URL필수의JSON 또는 일반 텍스트를 반환하는 HTTPS 또는 상대 URL입니다.
jsonPath없음cart.item_count와 같은 도트 경로입니다. JSON 자체가 배지 값이 아닌 경우에 필요합니다.
간격장애가 있는폴링 간격(밀리초), 최소 15초.
refreshOn준비, 재개준비, 재개, 초점 및 urlchange의 모든 조합.
신임장동일 기원브라우저 자격 증명 가져오기 모드를 사용합니다. 교차 출처 요청에는 여전히 CORS가 필요합니다.
시간 초과5000최대 가져오기 시간(밀리초)입니다.
hideWhenZero진실매핑된 결과가 0, null 또는 false인 경우 배지를 숨깁니다.
탁한유지하다오류 후 마지막 유효한 값을 유지합니다. 명확한 것이 대안입니다.
  • 숫자 값은 1~99까지 표시됩니다. 값이 클수록 네이티브를 사용합니다. 99+ treatment.
  • 텍스트 값은 잘리고 삭제되며 표시되는 문자는 4자로 제한됩니다.
  • 앱이 백그라운드에 있는 동안 폴링은 일시 중지되고 한 번의 즉시 새로 고침으로 다시 시작됩니다.
  • 중복된 요청은 취소됩니다. 가장 최근의 유효한 응답이 승리합니다.
  • HTTP, 구문 분석 및 매핑 오류가 발생합니다. sdk:error 페이지를 깨지 않고.
기본 작업

자리를 잡는 곳에 장치 동작을 사용하십시오.

기본 작업은 기존 웹 흐름을 개선해야 하며 웹 사이트 사용을 위한 요구 사항이 되어야 합니다. 권한 프롬프트는 명확한 사용자 작업을 따라야 하며 먼저 페이지에서 해당 값을 설명해야 합니다.

공유, 알림, 햅틱v1
await SiteToApp.share({
  title: 'Spring collection',
  text: 'These just arrived.',
  url: window.location.href,
});

// Must be called from a user click or tap.
const permission = await SiteToApp.notifications.requestPermission();

// Use sparingly for confirmation, not decoration.
await SiteToApp.haptics.impact('light');

유용한 폴백으로 공유

앱에서 기본 공유 시트를 사용하고, navigator.share 가능한 경우 사용자 작업 후 클립보드 대체.

권한 상태를 단순하게 유지

반품 default, granted, denied, 또는 unsupported. 원시 푸시 토큰을 페이지 코드에 노출하지 마십시오.

의도적으로 외부 링크 열기

내부 승인 URL은 앱에 유지됩니다. 앱 구성에 달리 명시되지 않는 한 외부 HTTPS 링크는 시스템 브라우저에서 열립니다.

속도 제한 물리적 피드백

페이지가 반복적으로 방해가 되는 피드백을 생성하는 것을 방지하기 위해 지원되지 않는 경우 햅틱은 무시되고 기본적으로 제한됩니다.

앱 이벤트

웹사이트가 앱 수명주기에 응답하도록 하세요.

이벤트는 스키마 및 원본 검증 후 기본 셸에서 SDK로 흐릅니다. 핸들러는 최소한의 공개 페이로드를 수신하고 구성 요소 기반 사이트에서 이를 정리할 수 있도록 구독 취소 기능을 반환합니다.

이벤트 구독v1
const unsubscribe = SiteToApp.on('app:resume', () => {
  cartBadge.refresh();
});

SiteToApp.on('navigation:reselect', ({ itemId }) => {
  if (itemId === 'home') window.scrollTo({ top: 0, behavior: 'smooth' });
});

SiteToApp.on('notification:opened', ({ url }) => {
  if (url) window.location.assign(url);
});

// Remove a listener when its owning component unmounts.
unsubscribe();
app:resume

앱이 포그라운드로 돌아왔습니다. 시간에 민감한 페이지 데이터와 시청한 배지를 새로 고칩니다.

app:pause

앱이 백그라운드로 이동했습니다. 브라우저에서 아직 처리하지 않은 비용이 많이 드는 작업을 일시 중지합니다.

navigation:reselect

사용자가 현재 활성화된 기본 탐색 항목을 다시 탭했습니다. 일반적으로 피드를 맨 위로 스크롤합니다.

route:open

셸은 페이지 라우터가 전체 다시 로드 없이 처리해야 하는 신뢰할 수 있는 딥 링크를 수신했습니다.

notification:opened

사용자가 푸시 알림을 열었습니다. 페이로드에는 승인된 인앱 URL과 선택적 공개 메타데이터가 포함되어 있습니다.

network:change

온라인과 오프라인 사이의 연결이 변경되었습니다. 브라우저는 실제 가져오기 성공을 위한 정보 소스로 남아 있습니다.

appearance:change

기본 밝은 또는 어두운 모양이 변경되었습니다. 페이로드에는 새로운 색 구성표가 포함됩니다.

sdk:error

감시자, 브리지 명령 또는 메시지 유효성 검사가 실패했습니다. 민감한 로깅이 아닌 진단용입니다.

브라우저 대체

웹사이트는 웹사이트로 남아 있어야 합니다.

앱 내부에 있지 않은 것은 예외가 아닌 정상적인 상태입니다. SDK는 콘솔 노이즈를 피하고 네이티브 대응 요소가 없을 때 예측 가능한 결과를 반환해야 합니다.

특징일반적인 브라우저 동작
준비가 된시간 초과 후 available: false 및 platform: web으로 해결됩니다.
page.setTitle문서가 활성화되면 document.title을 업데이트합니다. 기본 배달 보고서가 거짓입니다.
배지 및 아이템 상태기본적으로 가져오거나 렌더링하지 마세요. 반품 배송됨: 던지지 않고 거짓입니다.
navigation.open대상에 따라 location.sign, location.replace 또는 window.open을 사용합니다.
navigation.back브라우저 기록을 사용할 수 있는 경우 History.back을 사용합니다.
공유하다navigator.share를 사용하고 사용자 동작 후에 클립보드를 사용합니다.
알림지원되지 않는 반품; 이는 브라우저 알림 시스템을 대체하지 않습니다.
햅틱전달 시 안전한 무작동: 거짓.
명령은 다음과 같은 작은 결과로 해결되어야 합니다. { delivered: false, reason: 'not-in-app' }. 잘못된 인수 및 기본 거부는 입력된 내용을 사용합니다. SiteToAppError codes.
v1 표면

완전한 방법 참조.

SiteToApp.ready(options?)

핸드셰이크를 기다린 후 현재 AppContext를 확인합니다. 항상 해결됩니다. 일반 브라우저에서는 available: false를 반환합니다.

SiteToApp.getContext()

마지막으로 협상된 플랫폼, 버전, 안전 영역 값, 색 구성표 및 기능 목록을 반환합니다.

SiteToApp.isAvailable()

검증된 기본 브리지가 현재 연결되어 있는지 동기적으로 보고합니다.

SiteToApp.page.setTitle(title, options?)

document.title, 기본 헤더 또는 둘 다를 업데이트합니다. 빈 제목은 거부됩니다.

SiteToApp.page.setLoading(loading)

페이지 전환 또는 장기 실행 작업에 대한 셸 로딩 표시기를 표시하거나 숨깁니다.

SiteToApp.page.setPullToRefresh(enabled)

제스처가 적절한 화면에 대해 기본 당겨서 새로 고침을 활성화하거나 비활성화합니다.

SiteToApp.navigation.setBadge(itemId, value)

구성된 탐색 항목 배지를 설정합니다. 0, null 및 false를 지웁니다.

SiteToApp.navigation.watchBadge(itemId, options)

수명 주기 트리거 또는 제어된 간격에 따라 배지 값을 가져오고 매핑합니다. 새로 고침 및 중지 컨트롤을 반환합니다.

SiteToApp.navigation.setActive(itemId)

웹사이트를 탐색하지 않고 구성된 기본 탐색 항목을 선택합니다.

SiteToApp.navigation.syncWithLocation(rules)

브라우저 기록을 관찰하고 활성 항목을 URL 일치 규칙에 맞게 유지하세요. 구독 취소 함수를 반환합니다.

SiteToApp.navigation.setItem(itemId, state)

기존 구성된 항목의 레이블, 가시성 또는 활성화 상태를 업데이트합니다.

SiteToApp.navigation.open(url, options?)

현재 웹 보기에서 승인된 내부 URL을 열거나 시스템 브라우저에서 외부 HTTPS URL을 엽니다.

SiteToApp.navigation.back()

기본 경로를 사용할 수 없을 때 브라우저 기록으로 돌아가도록 셸에 요청합니다.

SiteToApp.share(data)

웹에서 navigator.share 및 클립보드 폴백을 사용하여 기본 공유 시트를 엽니다.

SiteToApp.notifications.requestPermission()

사용자 동작 후 알림 권한을 요청하고 결과 상태를 반환합니다.

SiteToApp.notifications.openSettings()

이전에 권한이 거부된 경우 이 앱의 운영 체제 설정을 엽니다.

SiteToApp.haptics.impact(style)

약함, 중간, 강함 영향에 대한 피드백을 요청하세요. 지원되지 않으면 작동하지 않습니다.

SiteToApp.on(event, handler)

검증된 앱 이벤트를 구독하고 구독 취소 기능을 받으세요.

SiteToApp.once(event, handler)

일치하는 다음 이벤트를 구독한 다음 핸들러를 자동으로 제거합니다.

입력된 오류: INVALID_ARGUMENT, UNSUPPORTED, NOT_ALLOWED, TIMEOUT, FETCH_FAILED, PROTOCOL_MISMATCH, 그리고 NATIVE_ERROR.

브리지 프로토콜

작고 확인된 메시지 봉투입니다.

JavaScript 계층은 플랫폼 전송 세부 정보를 정규화합니다. 앱에서 메시지는 직렬화된 JSON으로 React Native WebView 전송을 통해 이동합니다. window.ReactNativeWebView.postMessage. 봉투는 해당 전송과 독립적입니다.

웹사이트에서 앱으로

명령 봉투v1
{
  "channel": "sitetoapp",
  "protocolVersion": 1,
  "id": "sta_01J8ZQ6JY1",
  "type": "navigation.badge.set",
  "payload": {
    "itemId": "cart",
    "value": 3
  },
  "timestamp": 1789584000000
}

앱 승인

응답 봉투v1
{
  "channel": "sitetoapp",
  "protocolVersion": 1,
  "type": "response",
  "replyTo": "sta_01J8ZQ6JY1",
  "ok": true,
  "payload": null
}

웹사이트에 앱

검증된 네이티브 이벤트v1
// Native shell → website. Internal SDK method; not public surface.
window.SiteToApp.__receive({
  channel: 'sitetoapp',
  protocolVersion: 1,
  type: 'event',
  event: 'app:resume',
  payload: { occurredAt: Date.now() },
});
  • SDK는 다음으로 시작합니다. bridge.hello; 앱은 지원되는 프로토콜 버전 및 기능으로 응답합니다.
  • 모든 명령은 고유한 ID를 갖습니다. 확인이 필요한 명령은 해당 ID를 참조하는 응답을 받습니다.
  • 기본 승인 시간 제한은 2초입니다. 시간 초과가 해결된 후에는 지연 응답이 무시됩니다.
  • 메시지는 JSON 전용이고 64KB로 제한되며 각 측면에서 정확히 한 번씩 구문 분석됩니다.
  • 반복되는 제목 및 배지 변경은 취소됩니다. 최신 유효한 값이 우선합니다.
  • __receive 구현 전용이고 가능한 경우 열거할 수 없으며 스키마 외부의 메시지를 거부합니다.
보안 규칙

다리는 설계상 좁습니다.

WebView 브리지는 웹 콘텐츠 내에 기본 권한을 생성하므로 앱 셸은 페이지가 사용자에게 속한 경우에도 모든 페이지 메시지를 신뢰할 수 없는 입력으로 처리합니다. 다음 규칙을 적용합니다.

1

브리지는 앱에 대해 구성된 정확한 HTTPS 원본 및 URL 패턴에서만 활성화되며 다른 곳으로 이동하기 전에 비활성화됩니다.

2

메시지 유형이 허용 목록에 추가되고 모든 페이로드가 협상된 프로토콜 스키마에 대해 검증됩니다. 알 수 없는 필드는 무시되고 알 수 없는 명령은 거부됩니다.

3

저장소 자격 증명, 푸시 토큰, 장치 식별자, 인증 쿠키 및 기본 파일 시스템 경로는 페이지 JavaScript에 노출되지 않습니다.

4

상대 URL 또는 검증된 HTTPS 대상만 허용됩니다. javascript:, data:, file:,intent: 및 맞춤 구성표는 특정 명령이 허용 목록에 추가하지 않는 한 차단됩니다.

5

권한 프롬프트, 대체 공유, 설정 링크, 방해가 되는 기본 작업에는 최근 사용자 동작이 필요합니다.

6

명령은 속도가 제한되어 있고 메시지는 64KB로 제한되며 문자열과 기본 호출에는 길이 제한과 시간 초과가 있습니다.

7

페이로드는 프로덕션 로그에서 수정됩니다. 진단 오류에는 코드와 메시지 ID가 포함되며 고객 콘텐츠나 비밀은 포함되지 않습니다.

8

감시된 배지 요청은 브라우저 가져오기 규칙을 따릅니다. 동일 출처 자격 증명이 기본값입니다. 교차 출처 URL은 CORS를 통과해야 합니다.

라이브를 시작하기 전에

통합을 테스트하세요.

SDK는 앱 내부의 동작만 변경합니다. 앱 사용자가 기본 경험을 얻고 브라우저 방문자가 웹 사이트가 이전과 똑같이 작동하도록 두 경로를 모두 확인하세요.

  • 일반 모바일 브라우저에서 SDK를 호출하는 페이지를 열고 다음과 같은 경우 중단되는 부분이 없는지 확인하세요. context.available 거짓입니다.
  • 느린 네트워크, 오프라인 상태, 백그라운드에서 오랜 시간이 흐른 후 다시 시작 등을 포함하여 iOS 및 Android의 앱에서 테스트하세요.
  • 다시 로드하고 클라이언트 측 경로를 변경한 후 제목, 배지 및 활성 탐색을 확인하세요.
  • 기본 작업의 경우 사용자 동작, 권한 거부 및 지원되지 않는 경로를 테스트하세요.
  • 사이트에서 콘텐츠 보안 정책을 사용하는 경우 SDK 스크립트 원본을 허용하세요.

이 계약이 놓친 사용 사례가 있습니까?

웹사이트 흐름, 필요한 앱 동작, 일반 브라우저에서 발생해야 하는 작업을 공유하세요. 우리가 평가하기에 충분합니다.

사용 사례 보내기