スコープ同意の任意化（Optional Consent）、Shop アプリからの Intents 起動、ストレージ制限、availableForSale 露出など、Mini の作り方を変える大きな更新。
同意は全か無かではない。拒否されたスコープがあっても Mini を継続させる必要あり。新 3 hook で対応。
Shop アプリの商品ページ等から「文脈つき」で Mini を起動。try_on / view_in が現行で利用可能。
async storage に上限。localStorage/sessionStorage 廃止。availableForSale 露出で在庫整合性。
スコープに依存する UI を条件レンダリングする時に使う。
import {useCheckScopesConsent} from '@shopify/shop-minis-react' function MyMini() { const {scopes} = useCheckScopesConsent() if (scopes.includes('product_lists:write')) { return <SaveToListButton /> } return <SignInPrompt /> }
自動で再プロンプトはできない。ボタン押下など ユーザー操作起点で呼び出すことが必須。
import {useRequestScopesConsent} from '@shopify/shop-minis-react' function GrantAccessButton() { const {requestScopesConsent} = useRequestScopesConsent() return ( <button onClick={() => requestScopesConsent(['product_lists:write'])}> Enable saving products </button> ) }
スコープとは別レイヤー。カメラ／フォトライブラリ等 OS 権限の有無を確認できる。
import {useCheckPermissions} from '@shopify/shop-minis-react' function CameraFeature() { const {permissions} = useCheckPermissions(['camera']) if (permissions.camera === 'granted') { return <CameraView /> } return <RequestCameraButton /> }
| Intent | 用途 | 主な対象 |
|---|---|---|
| try_on | バーチャル試着の Mini | 衣服・アクセサリー・身に着けるもの全般 |
| view_in | AR ／ 部屋配置の Mini | 家具・インテリア・空間に置いて見たいもの |
import {useIntent} from '@shopify/shop-minis-react' function MyMini() { const intent = useIntent() if (intent?.action === 'try_on') { return <TryOn productId={intent.productId} /> } return <DefaultExperience /> }
useAsyncStorage と useSecureStorage に 1 Mini あたり 10 keys ／ key あたり 1 MB の上限。Mini を軽量に保つため。
画像など大きいアセットは「アップロード hook で URL 化して保存」が推奨。
variant に availableForSale が出るように。AddToCartButton／BuyNowButton は在庫切れ状態を自動でハンドル。カスタムカート UI を作る場合は明示チェック。
npx minis create が npm／yarn に加え pnpm を自動検出。プロジェクト作成時のプロンプトで pnpm を選択可能になった。
| Package | Version |
|---|---|
| @shopify/shop-minis-platform | 0.17.0 |
| @shopify/shop-minis-react | 0.20.0 |
| @shopify/shop-minis-cli | 0.3.11 |
package.json に宣言していないパッケージの import は ESLint で flag される。
clsx ／ tailwind-merge ／ cva はパートナー側からの利用が明示的に許可された。
SDK のビルドが TypeScript 6.0.2（旧 5.8.3 から）に更新。
shopify.dev の Scopes Consent ページが optional consent に対応。granted／declined／request_blocked の状態機械と、新 3 hook のガイダンスを掲載。
新ドキュメントページが追加。intents とは何か、現行 intent（try_on／view_in）、launch-context contract、useIntent でのパース方法をエンドツーエンドで解説。
granted / declined / request_blocked。とくに request_blocked は「もう聞けない」状態なので、Mini 側で 「促す UI」ではなく「説明 UI」 に切り替える設計が必要。
useRequestScopesConsent は ユーザー操作からしか発火できない。useEffect 等での自動再プロンプト実装はそもそも動かない仕様。
同じ「カメラ機能」でも、scope（Shopify 権限）と permission（OS 権限）を別レイヤーで判定する必要がある。useCheckScopesConsent と useCheckPermissions を組み合わせる。
既存コードベースの移行が必要。ESLint で機械的に検知できるため CI で fail させる運用 に組み込むのが安全。useAsyncStorage / useSecureStorage に置換。
Shop アプリ側の商品詳細などからの起動 ＝ Explore タブだけに依存していた分布が広がる。useIntent で起動文脈を読んで適切な画面に飛ばす設計（ルーティング）を最初から組み込むのがよい。サポートされていない intent でも Shop Minis チームに連絡すれば新規 scoping 対象になり得るとアナウンスあり。
npx minis create 一本で対応可能。