[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-add-offline":3,"mdc-e05min-key":34,"related-repo-meta-add-offline":2215,"related-org-meta-add-offline":2310},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":32,"mdContent":33},"add-offline","enable offline support for webapps","Make a Meta Display Glasses webapp work offline with a Service Worker + Cache API (precache the app shell, cache-first fetch, online\u002Foffline UI). Use when the user wants offline support or resilience to flaky Wi-Fi.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20],{"name":14,"slug":15,"type":16},"Performance","performance","tag",{"name":18,"slug":19,"type":16},"Offline","offline",{"name":21,"slug":22,"type":16},"Frontend","frontend",189,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp","2026-09-01T08:30:33.83287",null,33,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":31},[],"AI-assisted development toolkit for building web applications on Meta Ray-Ban Display glasses.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-webapp\u002Ftree\u002FHEAD\u002Fplugins\u002Fmeta-wearables-webapp\u002Fskills\u002Fadd-offline","---\nname: add-offline\ndescription: >-\n  Make a Meta Display Glasses webapp work offline with a Service Worker +\n  Cache API (precache the app shell, cache-first fetch, online\u002Foffline UI).\n  Use when the user wants offline support or resilience to flaky Wi-Fi.\nargument-hint: \"[strategy: app-shell|cache-first]\"\n---\n\n## Required reading\n\nBefore generating or modifying any code, read both:\n\n- `..\u002F..\u002Freferences\u002Fdisplay-guidelines.md`\n- `..\u002F..\u002Freferences\u002Fperformance-guidelines.md`\n\nThese define the non-negotiable display physics, input model, and performance budgets for Meta Display Glasses webapps. Do not skip — generated UI that ignores these will fail on-device.\n\nIf these reference files are unavailable in an isolated eval, do not search `\u002F`, home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.\n\n# Add Offline Support to Meta Display Glasses WebApp\n\nMake a webapp keep working when the glasses lose Wi-Fi, using a standard **Service Worker** + **Cache API**. Precache the app shell on install, serve cache-first on fetch, clean old caches on activate, and reflect online\u002Foffline state in the UI. No SDK required.\n\nThe base offline Service Worker snippet already lives in `..\u002F..\u002Freferences\u002Fperformance-guidelines.md` — reuse it as your starting point.\n\n## Prerequisites\n\n- Existing webapp created via `\u002Fcreate-webapp`\n- **Served over HTTPS** — Service Workers and the Cache API only run in a secure context. `file:\u002F\u002F` will **not** work. Use `\u002Fpublish-to-vercel` for an HTTPS URL.\n\n## How It Works\n\n1. The app shell registers `sw.js`.\n2. On `install`, the worker precaches `index.html`, `app.js`, `styles.css`, and any other shell assets.\n3. On `fetch`, the worker serves cache-first (cached response, falling back to network).\n4. On `activate`, it deletes stale caches when you bump the cache version.\n5. The page reflects `navigator.onLine` and the `online` \u002F `offline` events in the UI.\n\n## ⚠️ Caveats (must-include)\n\n- **HTTPS-only** (secure context). No exceptions.\n- **Precache real subresource URLs.** List the actual files the page loads — don't assume the app's request interceptor will serve Service-Worker-originated fetches.\n- Decide **what should be available offline.** Anything that needs fresh data from the internet won't work offline — show a friendly \"offline\" message in that case rather than failing silently.\n- Storage is **per-app.** Pair this with `\u002Fadd-local-storage` so the wearer's settings\u002Fnotes persist between sessions, not just the app shell.\n- Bump `CACHE` version when shell assets change, or wearers get stale files.\n\n## Steps\n\n### 1. Register the Service Worker\n\nIn `app.js` (or an inline `\u003Cscript>` in the shell):\n\n```javascript\nif ('serviceWorker' in navigator) {\n  window.addEventListener('load', function () {\n    navigator.serviceWorker.register('\u002Fsw.js').catch(function (e) {\n      console.warn('SW registration failed', e);   \u002F\u002F app still works online\n    });\n  });\n}\n```\n\n### 2. Create `sw.js` at the App Root\n\n```javascript\nconst CACHE = 'app-v1';\nconst FILES = ['\u002F', '\u002Findex.html', '\u002Fapp.js', '\u002Fstyles.css', '\u002Ffavicon.png'];\n\nself.addEventListener('install', function (e) {\n  e.waitUntil(caches.open(CACHE).then(function (c) { return c.addAll(FILES); }));\n});\n\nself.addEventListener('activate', function (e) {\n  e.waitUntil(\n    caches.keys().then(function (keys) {\n      return Promise.all(keys.filter(function (k) { return k !== CACHE; })\n                            .map(function (k) { return caches.delete(k); }));\n    })\n  );\n});\n\nself.addEventListener('fetch', function (e) {\n  e.respondWith(\n    caches.match(e.request).then(function (cached) {\n      return cached || fetch(e.request);\n    })\n  );\n});\n```\n\n### 3. Reflect Online \u002F Offline in the UI\n\nShow or hide an offline indicator (e.g. `#offline-banner`) from `navigator.onLine` — build the indicator itself with `\u002Fadd-ui`.\n\n```javascript\nfunction updateOnlineUI() {\n  var offline = !navigator.onLine;\n  \u002F\u002F Show\u002Fhide your offline indicator based on `offline` — see \u002Fadd-ui\n}\nwindow.addEventListener('online', updateOnlineUI);\nwindow.addEventListener('offline', updateOnlineUI);\nupdateOnlineUI();\n```\n\n### 4. Handle Data That Needs the Network\n\nFor screens that require fresh data, detect offline and show a message instead of a broken state:\n\n```javascript\nif (!navigator.onLine) {\n  showToast('No connection — showing last saved data', 'error');\n  renderFromCache();   \u002F\u002F e.g. \u002Fadd-local-storage\n  return;\n}\n```\n\n## Verify\n\n- [ ] App is served over HTTPS\n- [ ] `navigator.serviceWorker.register` resolves (check DevTools \u002F console)\n- [ ] App shell (`index.html`, `app.js`, `styles.css`) is precached on install\n- [ ] Reloading offline still renders the app shell\n- [ ] Old caches are cleaned when `CACHE` version bumps (activate handler)\n- [ ] Offline banner \u002F message appears when connection drops\n- [ ] Network-dependent screens degrade gracefully offline\n\n## Related Skills\n\n- `\u002Fadd-local-storage` — Persist the wearer's data so it survives offline sessions\n- `\u002Fconnect-api` — Add cache-aware fallbacks around API calls\n- `\u002Fadd-ui` — Add the offline indicator\n",{"data":35,"body":37},{"name":4,"description":6,"argument-hint":36},"[strategy: app-shell|cache-first]",{"type":38,"children":39},"root",[40,49,55,79,84,97,104,124,136,142,189,195,300,306,374,380,387,407,713,726,1697,1703,1730,1917,1923,1928,2058,2064,2169,2175,2209],{"type":41,"tag":42,"props":43,"children":45},"element","h2",{"id":44},"required-reading",[46],{"type":47,"value":48},"text","Required reading",{"type":41,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Before generating or modifying any code, read both:",{"type":41,"tag":56,"props":57,"children":58},"ul",{},[59,70],{"type":41,"tag":60,"props":61,"children":62},"li",{},[63],{"type":41,"tag":64,"props":65,"children":67},"code",{"className":66},[],[68],{"type":47,"value":69},"..\u002F..\u002Freferences\u002Fdisplay-guidelines.md",{"type":41,"tag":60,"props":71,"children":72},{},[73],{"type":41,"tag":64,"props":74,"children":76},{"className":75},[],[77],{"type":47,"value":78},"..\u002F..\u002Freferences\u002Fperformance-guidelines.md",{"type":41,"tag":50,"props":80,"children":81},{},[82],{"type":47,"value":83},"These define the non-negotiable display physics, input model, and performance budgets for Meta Display Glasses webapps. Do not skip — generated UI that ignores these will fail on-device.",{"type":41,"tag":50,"props":85,"children":86},{},[87,89,95],{"type":47,"value":88},"If these reference files are unavailable in an isolated eval, do not search ",{"type":41,"tag":64,"props":90,"children":92},{"className":91},[],[93],{"type":47,"value":94},"\u002F",{"type":47,"value":96},", home directories, or unrelated workspaces. Apply the requirements already present in this skill and continue.",{"type":41,"tag":98,"props":99,"children":101},"h1",{"id":100},"add-offline-support-to-meta-display-glasses-webapp",[102],{"type":47,"value":103},"Add Offline Support to Meta Display Glasses WebApp",{"type":41,"tag":50,"props":105,"children":106},{},[107,109,115,117,122],{"type":47,"value":108},"Make a webapp keep working when the glasses lose Wi-Fi, using a standard ",{"type":41,"tag":110,"props":111,"children":112},"strong",{},[113],{"type":47,"value":114},"Service Worker",{"type":47,"value":116}," + ",{"type":41,"tag":110,"props":118,"children":119},{},[120],{"type":47,"value":121},"Cache API",{"type":47,"value":123},". Precache the app shell on install, serve cache-first on fetch, clean old caches on activate, and reflect online\u002Foffline state in the UI. No SDK required.",{"type":41,"tag":50,"props":125,"children":126},{},[127,129,134],{"type":47,"value":128},"The base offline Service Worker snippet already lives in ",{"type":41,"tag":64,"props":130,"children":132},{"className":131},[],[133],{"type":47,"value":78},{"type":47,"value":135}," — reuse it as your starting point.",{"type":41,"tag":42,"props":137,"children":139},{"id":138},"prerequisites",[140],{"type":47,"value":141},"Prerequisites",{"type":41,"tag":56,"props":143,"children":144},{},[145,156],{"type":41,"tag":60,"props":146,"children":147},{},[148,150],{"type":47,"value":149},"Existing webapp created via ",{"type":41,"tag":64,"props":151,"children":153},{"className":152},[],[154],{"type":47,"value":155},"\u002Fcreate-webapp",{"type":41,"tag":60,"props":157,"children":158},{},[159,164,166,172,174,179,181,187],{"type":41,"tag":110,"props":160,"children":161},{},[162],{"type":47,"value":163},"Served over HTTPS",{"type":47,"value":165}," — Service Workers and the Cache API only run in a secure context. ",{"type":41,"tag":64,"props":167,"children":169},{"className":168},[],[170],{"type":47,"value":171},"file:\u002F\u002F",{"type":47,"value":173}," will ",{"type":41,"tag":110,"props":175,"children":176},{},[177],{"type":47,"value":178},"not",{"type":47,"value":180}," work. Use ",{"type":41,"tag":64,"props":182,"children":184},{"className":183},[],[185],{"type":47,"value":186},"\u002Fpublish-to-vercel",{"type":47,"value":188}," for an HTTPS URL.",{"type":41,"tag":42,"props":190,"children":192},{"id":191},"how-it-works",[193],{"type":47,"value":194},"How It Works",{"type":41,"tag":196,"props":197,"children":198},"ol",{},[199,212,248,260,272],{"type":41,"tag":60,"props":200,"children":201},{},[202,204,210],{"type":47,"value":203},"The app shell registers ",{"type":41,"tag":64,"props":205,"children":207},{"className":206},[],[208],{"type":47,"value":209},"sw.js",{"type":47,"value":211},".",{"type":41,"tag":60,"props":213,"children":214},{},[215,217,223,225,231,233,239,240,246],{"type":47,"value":216},"On ",{"type":41,"tag":64,"props":218,"children":220},{"className":219},[],[221],{"type":47,"value":222},"install",{"type":47,"value":224},", the worker precaches ",{"type":41,"tag":64,"props":226,"children":228},{"className":227},[],[229],{"type":47,"value":230},"index.html",{"type":47,"value":232},", ",{"type":41,"tag":64,"props":234,"children":236},{"className":235},[],[237],{"type":47,"value":238},"app.js",{"type":47,"value":232},{"type":41,"tag":64,"props":241,"children":243},{"className":242},[],[244],{"type":47,"value":245},"styles.css",{"type":47,"value":247},", and any other shell assets.",{"type":41,"tag":60,"props":249,"children":250},{},[251,252,258],{"type":47,"value":216},{"type":41,"tag":64,"props":253,"children":255},{"className":254},[],[256],{"type":47,"value":257},"fetch",{"type":47,"value":259},", the worker serves cache-first (cached response, falling back to network).",{"type":41,"tag":60,"props":261,"children":262},{},[263,264,270],{"type":47,"value":216},{"type":41,"tag":64,"props":265,"children":267},{"className":266},[],[268],{"type":47,"value":269},"activate",{"type":47,"value":271},", it deletes stale caches when you bump the cache version.",{"type":41,"tag":60,"props":273,"children":274},{},[275,277,283,285,291,293,298],{"type":47,"value":276},"The page reflects ",{"type":41,"tag":64,"props":278,"children":280},{"className":279},[],[281],{"type":47,"value":282},"navigator.onLine",{"type":47,"value":284}," and the ",{"type":41,"tag":64,"props":286,"children":288},{"className":287},[],[289],{"type":47,"value":290},"online",{"type":47,"value":292}," \u002F ",{"type":41,"tag":64,"props":294,"children":296},{"className":295},[],[297],{"type":47,"value":19},{"type":47,"value":299}," events in the UI.",{"type":41,"tag":42,"props":301,"children":303},{"id":302},"️-caveats-must-include",[304],{"type":47,"value":305},"⚠️ Caveats (must-include)",{"type":41,"tag":56,"props":307,"children":308},{},[309,319,329,341,361],{"type":41,"tag":60,"props":310,"children":311},{},[312,317],{"type":41,"tag":110,"props":313,"children":314},{},[315],{"type":47,"value":316},"HTTPS-only",{"type":47,"value":318}," (secure context). No exceptions.",{"type":41,"tag":60,"props":320,"children":321},{},[322,327],{"type":41,"tag":110,"props":323,"children":324},{},[325],{"type":47,"value":326},"Precache real subresource URLs.",{"type":47,"value":328}," List the actual files the page loads — don't assume the app's request interceptor will serve Service-Worker-originated fetches.",{"type":41,"tag":60,"props":330,"children":331},{},[332,334,339],{"type":47,"value":333},"Decide ",{"type":41,"tag":110,"props":335,"children":336},{},[337],{"type":47,"value":338},"what should be available offline.",{"type":47,"value":340}," Anything that needs fresh data from the internet won't work offline — show a friendly \"offline\" message in that case rather than failing silently.",{"type":41,"tag":60,"props":342,"children":343},{},[344,346,351,353,359],{"type":47,"value":345},"Storage is ",{"type":41,"tag":110,"props":347,"children":348},{},[349],{"type":47,"value":350},"per-app.",{"type":47,"value":352}," Pair this with ",{"type":41,"tag":64,"props":354,"children":356},{"className":355},[],[357],{"type":47,"value":358},"\u002Fadd-local-storage",{"type":47,"value":360}," so the wearer's settings\u002Fnotes persist between sessions, not just the app shell.",{"type":41,"tag":60,"props":362,"children":363},{},[364,366,372],{"type":47,"value":365},"Bump ",{"type":41,"tag":64,"props":367,"children":369},{"className":368},[],[370],{"type":47,"value":371},"CACHE",{"type":47,"value":373}," version when shell assets change, or wearers get stale files.",{"type":41,"tag":42,"props":375,"children":377},{"id":376},"steps",[378],{"type":47,"value":379},"Steps",{"type":41,"tag":381,"props":382,"children":384},"h3",{"id":383},"_1-register-the-service-worker",[385],{"type":47,"value":386},"1. Register the Service Worker",{"type":41,"tag":50,"props":388,"children":389},{},[390,392,397,399,405],{"type":47,"value":391},"In ",{"type":41,"tag":64,"props":393,"children":395},{"className":394},[],[396],{"type":47,"value":238},{"type":47,"value":398}," (or an inline ",{"type":41,"tag":64,"props":400,"children":402},{"className":401},[],[403],{"type":47,"value":404},"\u003Cscript>",{"type":47,"value":406}," in the shell):",{"type":41,"tag":408,"props":409,"children":414},"pre",{"className":410,"code":411,"language":412,"meta":413,"style":413},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","if ('serviceWorker' in navigator) {\n  window.addEventListener('load', function () {\n    navigator.serviceWorker.register('\u002Fsw.js').catch(function (e) {\n      console.warn('SW registration failed', e);   \u002F\u002F app still works online\n    });\n  });\n}\n","javascript","",[415],{"type":41,"tag":64,"props":416,"children":417},{"__ignoreMap":413},[418,467,526,610,669,687,704],{"type":41,"tag":419,"props":420,"children":423},"span",{"class":421,"line":422},"line",1,[424,430,436,442,448,452,457,462],{"type":41,"tag":419,"props":425,"children":427},{"style":426},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[428],{"type":47,"value":429},"if",{"type":41,"tag":419,"props":431,"children":433},{"style":432},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[434],{"type":47,"value":435}," (",{"type":41,"tag":419,"props":437,"children":439},{"style":438},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[440],{"type":47,"value":441},"'",{"type":41,"tag":419,"props":443,"children":445},{"style":444},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[446],{"type":47,"value":447},"serviceWorker",{"type":41,"tag":419,"props":449,"children":450},{"style":438},[451],{"type":47,"value":441},{"type":41,"tag":419,"props":453,"children":454},{"style":438},[455],{"type":47,"value":456}," in",{"type":41,"tag":419,"props":458,"children":459},{"style":432},[460],{"type":47,"value":461}," navigator) ",{"type":41,"tag":419,"props":463,"children":464},{"style":438},[465],{"type":47,"value":466},"{\n",{"type":41,"tag":419,"props":468,"children":470},{"class":421,"line":469},2,[471,476,480,486,492,496,501,505,510,516,521],{"type":41,"tag":419,"props":472,"children":473},{"style":432},[474],{"type":47,"value":475},"  window",{"type":41,"tag":419,"props":477,"children":478},{"style":438},[479],{"type":47,"value":211},{"type":41,"tag":419,"props":481,"children":483},{"style":482},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[484],{"type":47,"value":485},"addEventListener",{"type":41,"tag":419,"props":487,"children":489},{"style":488},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[490],{"type":47,"value":491},"(",{"type":41,"tag":419,"props":493,"children":494},{"style":438},[495],{"type":47,"value":441},{"type":41,"tag":419,"props":497,"children":498},{"style":444},[499],{"type":47,"value":500},"load",{"type":41,"tag":419,"props":502,"children":503},{"style":438},[504],{"type":47,"value":441},{"type":41,"tag":419,"props":506,"children":507},{"style":438},[508],{"type":47,"value":509},",",{"type":41,"tag":419,"props":511,"children":513},{"style":512},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[514],{"type":47,"value":515}," function",{"type":41,"tag":419,"props":517,"children":518},{"style":438},[519],{"type":47,"value":520}," ()",{"type":41,"tag":419,"props":522,"children":523},{"style":438},[524],{"type":47,"value":525}," {\n",{"type":41,"tag":419,"props":527,"children":529},{"class":421,"line":528},3,[530,535,539,543,547,552,556,560,565,569,574,578,583,587,592,596,602,606],{"type":41,"tag":419,"props":531,"children":532},{"style":432},[533],{"type":47,"value":534},"    navigator",{"type":41,"tag":419,"props":536,"children":537},{"style":438},[538],{"type":47,"value":211},{"type":41,"tag":419,"props":540,"children":541},{"style":432},[542],{"type":47,"value":447},{"type":41,"tag":419,"props":544,"children":545},{"style":438},[546],{"type":47,"value":211},{"type":41,"tag":419,"props":548,"children":549},{"style":482},[550],{"type":47,"value":551},"register",{"type":41,"tag":419,"props":553,"children":554},{"style":488},[555],{"type":47,"value":491},{"type":41,"tag":419,"props":557,"children":558},{"style":438},[559],{"type":47,"value":441},{"type":41,"tag":419,"props":561,"children":562},{"style":444},[563],{"type":47,"value":564},"\u002Fsw.js",{"type":41,"tag":419,"props":566,"children":567},{"style":438},[568],{"type":47,"value":441},{"type":41,"tag":419,"props":570,"children":571},{"style":488},[572],{"type":47,"value":573},")",{"type":41,"tag":419,"props":575,"children":576},{"style":438},[577],{"type":47,"value":211},{"type":41,"tag":419,"props":579,"children":580},{"style":482},[581],{"type":47,"value":582},"catch",{"type":41,"tag":419,"props":584,"children":585},{"style":488},[586],{"type":47,"value":491},{"type":41,"tag":419,"props":588,"children":589},{"style":512},[590],{"type":47,"value":591},"function",{"type":41,"tag":419,"props":593,"children":594},{"style":438},[595],{"type":47,"value":435},{"type":41,"tag":419,"props":597,"children":599},{"style":598},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[600],{"type":47,"value":601},"e",{"type":41,"tag":419,"props":603,"children":604},{"style":438},[605],{"type":47,"value":573},{"type":41,"tag":419,"props":607,"children":608},{"style":438},[609],{"type":47,"value":525},{"type":41,"tag":419,"props":611,"children":613},{"class":421,"line":612},4,[614,619,623,628,632,636,641,645,649,654,658,663],{"type":41,"tag":419,"props":615,"children":616},{"style":432},[617],{"type":47,"value":618},"      console",{"type":41,"tag":419,"props":620,"children":621},{"style":438},[622],{"type":47,"value":211},{"type":41,"tag":419,"props":624,"children":625},{"style":482},[626],{"type":47,"value":627},"warn",{"type":41,"tag":419,"props":629,"children":630},{"style":488},[631],{"type":47,"value":491},{"type":41,"tag":419,"props":633,"children":634},{"style":438},[635],{"type":47,"value":441},{"type":41,"tag":419,"props":637,"children":638},{"style":444},[639],{"type":47,"value":640},"SW registration failed",{"type":41,"tag":419,"props":642,"children":643},{"style":438},[644],{"type":47,"value":441},{"type":41,"tag":419,"props":646,"children":647},{"style":438},[648],{"type":47,"value":509},{"type":41,"tag":419,"props":650,"children":651},{"style":432},[652],{"type":47,"value":653}," e",{"type":41,"tag":419,"props":655,"children":656},{"style":488},[657],{"type":47,"value":573},{"type":41,"tag":419,"props":659,"children":660},{"style":438},[661],{"type":47,"value":662},";",{"type":41,"tag":419,"props":664,"children":666},{"style":665},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[667],{"type":47,"value":668},"   \u002F\u002F app still works online\n",{"type":41,"tag":419,"props":670,"children":672},{"class":421,"line":671},5,[673,678,682],{"type":41,"tag":419,"props":674,"children":675},{"style":438},[676],{"type":47,"value":677},"    }",{"type":41,"tag":419,"props":679,"children":680},{"style":488},[681],{"type":47,"value":573},{"type":41,"tag":419,"props":683,"children":684},{"style":438},[685],{"type":47,"value":686},";\n",{"type":41,"tag":419,"props":688,"children":690},{"class":421,"line":689},6,[691,696,700],{"type":41,"tag":419,"props":692,"children":693},{"style":438},[694],{"type":47,"value":695},"  }",{"type":41,"tag":419,"props":697,"children":698},{"style":488},[699],{"type":47,"value":573},{"type":41,"tag":419,"props":701,"children":702},{"style":438},[703],{"type":47,"value":686},{"type":41,"tag":419,"props":705,"children":707},{"class":421,"line":706},7,[708],{"type":41,"tag":419,"props":709,"children":710},{"style":438},[711],{"type":47,"value":712},"}\n",{"type":41,"tag":381,"props":714,"children":716},{"id":715},"_2-create-swjs-at-the-app-root",[717,719,724],{"type":47,"value":718},"2. Create ",{"type":41,"tag":64,"props":720,"children":722},{"className":721},[],[723],{"type":47,"value":209},{"type":47,"value":725}," at the App Root",{"type":41,"tag":408,"props":727,"children":729},{"className":410,"code":728,"language":412,"meta":413,"style":413},"const CACHE = 'app-v1';\nconst FILES = ['\u002F', '\u002Findex.html', '\u002Fapp.js', '\u002Fstyles.css', '\u002Ffavicon.png'];\n\nself.addEventListener('install', function (e) {\n  e.waitUntil(caches.open(CACHE).then(function (c) { return c.addAll(FILES); }));\n});\n\nself.addEventListener('activate', function (e) {\n  e.waitUntil(\n    caches.keys().then(function (keys) {\n      return Promise.all(keys.filter(function (k) { return k !== CACHE; })\n                            .map(function (k) { return caches.delete(k); }));\n    })\n  );\n});\n\nself.addEventListener('fetch', function (e) {\n  e.respondWith(\n    caches.match(e.request).then(function (cached) {\n      return cached || fetch(e.request);\n    })\n  );\n});\n",[730],{"type":41,"tag":64,"props":731,"children":732},{"__ignoreMap":413},[733,769,879,888,944,1076,1092,1099,1155,1176,1231,1329,1413,1425,1438,1454,1462,1518,1539,1610,1657,1669,1681],{"type":41,"tag":419,"props":734,"children":735},{"class":421,"line":422},[736,741,746,751,756,761,765],{"type":41,"tag":419,"props":737,"children":738},{"style":512},[739],{"type":47,"value":740},"const",{"type":41,"tag":419,"props":742,"children":743},{"style":432},[744],{"type":47,"value":745}," CACHE ",{"type":41,"tag":419,"props":747,"children":748},{"style":438},[749],{"type":47,"value":750},"=",{"type":41,"tag":419,"props":752,"children":753},{"style":438},[754],{"type":47,"value":755}," '",{"type":41,"tag":419,"props":757,"children":758},{"style":444},[759],{"type":47,"value":760},"app-v1",{"type":41,"tag":419,"props":762,"children":763},{"style":438},[764],{"type":47,"value":441},{"type":41,"tag":419,"props":766,"children":767},{"style":438},[768],{"type":47,"value":686},{"type":41,"tag":419,"props":770,"children":771},{"class":421,"line":469},[772,776,781,785,790,794,798,802,806,810,815,819,823,827,832,836,840,844,849,853,857,861,866,870,875],{"type":41,"tag":419,"props":773,"children":774},{"style":512},[775],{"type":47,"value":740},{"type":41,"tag":419,"props":777,"children":778},{"style":432},[779],{"type":47,"value":780}," FILES ",{"type":41,"tag":419,"props":782,"children":783},{"style":438},[784],{"type":47,"value":750},{"type":41,"tag":419,"props":786,"children":787},{"style":432},[788],{"type":47,"value":789}," [",{"type":41,"tag":419,"props":791,"children":792},{"style":438},[793],{"type":47,"value":441},{"type":41,"tag":419,"props":795,"children":796},{"style":444},[797],{"type":47,"value":94},{"type":41,"tag":419,"props":799,"children":800},{"style":438},[801],{"type":47,"value":441},{"type":41,"tag":419,"props":803,"children":804},{"style":438},[805],{"type":47,"value":509},{"type":41,"tag":419,"props":807,"children":808},{"style":438},[809],{"type":47,"value":755},{"type":41,"tag":419,"props":811,"children":812},{"style":444},[813],{"type":47,"value":814},"\u002Findex.html",{"type":41,"tag":419,"props":816,"children":817},{"style":438},[818],{"type":47,"value":441},{"type":41,"tag":419,"props":820,"children":821},{"style":438},[822],{"type":47,"value":509},{"type":41,"tag":419,"props":824,"children":825},{"style":438},[826],{"type":47,"value":755},{"type":41,"tag":419,"props":828,"children":829},{"style":444},[830],{"type":47,"value":831},"\u002Fapp.js",{"type":41,"tag":419,"props":833,"children":834},{"style":438},[835],{"type":47,"value":441},{"type":41,"tag":419,"props":837,"children":838},{"style":438},[839],{"type":47,"value":509},{"type":41,"tag":419,"props":841,"children":842},{"style":438},[843],{"type":47,"value":755},{"type":41,"tag":419,"props":845,"children":846},{"style":444},[847],{"type":47,"value":848},"\u002Fstyles.css",{"type":41,"tag":419,"props":850,"children":851},{"style":438},[852],{"type":47,"value":441},{"type":41,"tag":419,"props":854,"children":855},{"style":438},[856],{"type":47,"value":509},{"type":41,"tag":419,"props":858,"children":859},{"style":438},[860],{"type":47,"value":755},{"type":41,"tag":419,"props":862,"children":863},{"style":444},[864],{"type":47,"value":865},"\u002Ffavicon.png",{"type":41,"tag":419,"props":867,"children":868},{"style":438},[869],{"type":47,"value":441},{"type":41,"tag":419,"props":871,"children":872},{"style":432},[873],{"type":47,"value":874},"]",{"type":41,"tag":419,"props":876,"children":877},{"style":438},[878],{"type":47,"value":686},{"type":41,"tag":419,"props":880,"children":881},{"class":421,"line":528},[882],{"type":41,"tag":419,"props":883,"children":885},{"emptyLinePlaceholder":884},true,[886],{"type":47,"value":887},"\n",{"type":41,"tag":419,"props":889,"children":890},{"class":421,"line":612},[891,896,900,904,908,912,916,920,924,928,932,936,940],{"type":41,"tag":419,"props":892,"children":893},{"style":432},[894],{"type":47,"value":895},"self",{"type":41,"tag":419,"props":897,"children":898},{"style":438},[899],{"type":47,"value":211},{"type":41,"tag":419,"props":901,"children":902},{"style":482},[903],{"type":47,"value":485},{"type":41,"tag":419,"props":905,"children":906},{"style":432},[907],{"type":47,"value":491},{"type":41,"tag":419,"props":909,"children":910},{"style":438},[911],{"type":47,"value":441},{"type":41,"tag":419,"props":913,"children":914},{"style":444},[915],{"type":47,"value":222},{"type":41,"tag":419,"props":917,"children":918},{"style":438},[919],{"type":47,"value":441},{"type":41,"tag":419,"props":921,"children":922},{"style":438},[923],{"type":47,"value":509},{"type":41,"tag":419,"props":925,"children":926},{"style":512},[927],{"type":47,"value":515},{"type":41,"tag":419,"props":929,"children":930},{"style":438},[931],{"type":47,"value":435},{"type":41,"tag":419,"props":933,"children":934},{"style":598},[935],{"type":47,"value":601},{"type":41,"tag":419,"props":937,"children":938},{"style":438},[939],{"type":47,"value":573},{"type":41,"tag":419,"props":941,"children":942},{"style":438},[943],{"type":47,"value":525},{"type":41,"tag":419,"props":945,"children":946},{"class":421,"line":671},[947,952,956,961,965,970,974,979,983,987,991,995,1000,1004,1008,1012,1017,1021,1026,1031,1036,1040,1045,1049,1054,1058,1062,1067,1072],{"type":41,"tag":419,"props":948,"children":949},{"style":432},[950],{"type":47,"value":951},"  e",{"type":41,"tag":419,"props":953,"children":954},{"style":438},[955],{"type":47,"value":211},{"type":41,"tag":419,"props":957,"children":958},{"style":482},[959],{"type":47,"value":960},"waitUntil",{"type":41,"tag":419,"props":962,"children":963},{"style":488},[964],{"type":47,"value":491},{"type":41,"tag":419,"props":966,"children":967},{"style":432},[968],{"type":47,"value":969},"caches",{"type":41,"tag":419,"props":971,"children":972},{"style":438},[973],{"type":47,"value":211},{"type":41,"tag":419,"props":975,"children":976},{"style":482},[977],{"type":47,"value":978},"open",{"type":41,"tag":419,"props":980,"children":981},{"style":488},[982],{"type":47,"value":491},{"type":41,"tag":419,"props":984,"children":985},{"style":432},[986],{"type":47,"value":371},{"type":41,"tag":419,"props":988,"children":989},{"style":488},[990],{"type":47,"value":573},{"type":41,"tag":419,"props":992,"children":993},{"style":438},[994],{"type":47,"value":211},{"type":41,"tag":419,"props":996,"children":997},{"style":482},[998],{"type":47,"value":999},"then",{"type":41,"tag":419,"props":1001,"children":1002},{"style":488},[1003],{"type":47,"value":491},{"type":41,"tag":419,"props":1005,"children":1006},{"style":512},[1007],{"type":47,"value":591},{"type":41,"tag":419,"props":1009,"children":1010},{"style":438},[1011],{"type":47,"value":435},{"type":41,"tag":419,"props":1013,"children":1014},{"style":598},[1015],{"type":47,"value":1016},"c",{"type":41,"tag":419,"props":1018,"children":1019},{"style":438},[1020],{"type":47,"value":573},{"type":41,"tag":419,"props":1022,"children":1023},{"style":438},[1024],{"type":47,"value":1025}," {",{"type":41,"tag":419,"props":1027,"children":1028},{"style":426},[1029],{"type":47,"value":1030}," return",{"type":41,"tag":419,"props":1032,"children":1033},{"style":432},[1034],{"type":47,"value":1035}," c",{"type":41,"tag":419,"props":1037,"children":1038},{"style":438},[1039],{"type":47,"value":211},{"type":41,"tag":419,"props":1041,"children":1042},{"style":482},[1043],{"type":47,"value":1044},"addAll",{"type":41,"tag":419,"props":1046,"children":1047},{"style":488},[1048],{"type":47,"value":491},{"type":41,"tag":419,"props":1050,"children":1051},{"style":432},[1052],{"type":47,"value":1053},"FILES",{"type":41,"tag":419,"props":1055,"children":1056},{"style":488},[1057],{"type":47,"value":573},{"type":41,"tag":419,"props":1059,"children":1060},{"style":438},[1061],{"type":47,"value":662},{"type":41,"tag":419,"props":1063,"children":1064},{"style":438},[1065],{"type":47,"value":1066}," }",{"type":41,"tag":419,"props":1068,"children":1069},{"style":488},[1070],{"type":47,"value":1071},"))",{"type":41,"tag":419,"props":1073,"children":1074},{"style":438},[1075],{"type":47,"value":686},{"type":41,"tag":419,"props":1077,"children":1078},{"class":421,"line":689},[1079,1084,1088],{"type":41,"tag":419,"props":1080,"children":1081},{"style":438},[1082],{"type":47,"value":1083},"}",{"type":41,"tag":419,"props":1085,"children":1086},{"style":432},[1087],{"type":47,"value":573},{"type":41,"tag":419,"props":1089,"children":1090},{"style":438},[1091],{"type":47,"value":686},{"type":41,"tag":419,"props":1093,"children":1094},{"class":421,"line":706},[1095],{"type":41,"tag":419,"props":1096,"children":1097},{"emptyLinePlaceholder":884},[1098],{"type":47,"value":887},{"type":41,"tag":419,"props":1100,"children":1102},{"class":421,"line":1101},8,[1103,1107,1111,1115,1119,1123,1127,1131,1135,1139,1143,1147,1151],{"type":41,"tag":419,"props":1104,"children":1105},{"style":432},[1106],{"type":47,"value":895},{"type":41,"tag":419,"props":1108,"children":1109},{"style":438},[1110],{"type":47,"value":211},{"type":41,"tag":419,"props":1112,"children":1113},{"style":482},[1114],{"type":47,"value":485},{"type":41,"tag":419,"props":1116,"children":1117},{"style":432},[1118],{"type":47,"value":491},{"type":41,"tag":419,"props":1120,"children":1121},{"style":438},[1122],{"type":47,"value":441},{"type":41,"tag":419,"props":1124,"children":1125},{"style":444},[1126],{"type":47,"value":269},{"type":41,"tag":419,"props":1128,"children":1129},{"style":438},[1130],{"type":47,"value":441},{"type":41,"tag":419,"props":1132,"children":1133},{"style":438},[1134],{"type":47,"value":509},{"type":41,"tag":419,"props":1136,"children":1137},{"style":512},[1138],{"type":47,"value":515},{"type":41,"tag":419,"props":1140,"children":1141},{"style":438},[1142],{"type":47,"value":435},{"type":41,"tag":419,"props":1144,"children":1145},{"style":598},[1146],{"type":47,"value":601},{"type":41,"tag":419,"props":1148,"children":1149},{"style":438},[1150],{"type":47,"value":573},{"type":41,"tag":419,"props":1152,"children":1153},{"style":438},[1154],{"type":47,"value":525},{"type":41,"tag":419,"props":1156,"children":1158},{"class":421,"line":1157},9,[1159,1163,1167,1171],{"type":41,"tag":419,"props":1160,"children":1161},{"style":432},[1162],{"type":47,"value":951},{"type":41,"tag":419,"props":1164,"children":1165},{"style":438},[1166],{"type":47,"value":211},{"type":41,"tag":419,"props":1168,"children":1169},{"style":482},[1170],{"type":47,"value":960},{"type":41,"tag":419,"props":1172,"children":1173},{"style":488},[1174],{"type":47,"value":1175},"(\n",{"type":41,"tag":419,"props":1177,"children":1179},{"class":421,"line":1178},10,[1180,1185,1189,1194,1199,1203,1207,1211,1215,1219,1223,1227],{"type":41,"tag":419,"props":1181,"children":1182},{"style":432},[1183],{"type":47,"value":1184},"    caches",{"type":41,"tag":419,"props":1186,"children":1187},{"style":438},[1188],{"type":47,"value":211},{"type":41,"tag":419,"props":1190,"children":1191},{"style":482},[1192],{"type":47,"value":1193},"keys",{"type":41,"tag":419,"props":1195,"children":1196},{"style":488},[1197],{"type":47,"value":1198},"()",{"type":41,"tag":419,"props":1200,"children":1201},{"style":438},[1202],{"type":47,"value":211},{"type":41,"tag":419,"props":1204,"children":1205},{"style":482},[1206],{"type":47,"value":999},{"type":41,"tag":419,"props":1208,"children":1209},{"style":488},[1210],{"type":47,"value":491},{"type":41,"tag":419,"props":1212,"children":1213},{"style":512},[1214],{"type":47,"value":591},{"type":41,"tag":419,"props":1216,"children":1217},{"style":438},[1218],{"type":47,"value":435},{"type":41,"tag":419,"props":1220,"children":1221},{"style":598},[1222],{"type":47,"value":1193},{"type":41,"tag":419,"props":1224,"children":1225},{"style":438},[1226],{"type":47,"value":573},{"type":41,"tag":419,"props":1228,"children":1229},{"style":438},[1230],{"type":47,"value":525},{"type":41,"tag":419,"props":1232,"children":1234},{"class":421,"line":1233},11,[1235,1240,1246,1250,1255,1259,1263,1267,1272,1276,1280,1284,1289,1293,1297,1301,1306,1311,1316,1320,1324],{"type":41,"tag":419,"props":1236,"children":1237},{"style":426},[1238],{"type":47,"value":1239},"      return",{"type":41,"tag":419,"props":1241,"children":1243},{"style":1242},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1244],{"type":47,"value":1245}," Promise",{"type":41,"tag":419,"props":1247,"children":1248},{"style":438},[1249],{"type":47,"value":211},{"type":41,"tag":419,"props":1251,"children":1252},{"style":482},[1253],{"type":47,"value":1254},"all",{"type":41,"tag":419,"props":1256,"children":1257},{"style":488},[1258],{"type":47,"value":491},{"type":41,"tag":419,"props":1260,"children":1261},{"style":432},[1262],{"type":47,"value":1193},{"type":41,"tag":419,"props":1264,"children":1265},{"style":438},[1266],{"type":47,"value":211},{"type":41,"tag":419,"props":1268,"children":1269},{"style":482},[1270],{"type":47,"value":1271},"filter",{"type":41,"tag":419,"props":1273,"children":1274},{"style":488},[1275],{"type":47,"value":491},{"type":41,"tag":419,"props":1277,"children":1278},{"style":512},[1279],{"type":47,"value":591},{"type":41,"tag":419,"props":1281,"children":1282},{"style":438},[1283],{"type":47,"value":435},{"type":41,"tag":419,"props":1285,"children":1286},{"style":598},[1287],{"type":47,"value":1288},"k",{"type":41,"tag":419,"props":1290,"children":1291},{"style":438},[1292],{"type":47,"value":573},{"type":41,"tag":419,"props":1294,"children":1295},{"style":438},[1296],{"type":47,"value":1025},{"type":41,"tag":419,"props":1298,"children":1299},{"style":426},[1300],{"type":47,"value":1030},{"type":41,"tag":419,"props":1302,"children":1303},{"style":432},[1304],{"type":47,"value":1305}," k",{"type":41,"tag":419,"props":1307,"children":1308},{"style":438},[1309],{"type":47,"value":1310}," !==",{"type":41,"tag":419,"props":1312,"children":1313},{"style":432},[1314],{"type":47,"value":1315}," CACHE",{"type":41,"tag":419,"props":1317,"children":1318},{"style":438},[1319],{"type":47,"value":662},{"type":41,"tag":419,"props":1321,"children":1322},{"style":438},[1323],{"type":47,"value":1066},{"type":41,"tag":419,"props":1325,"children":1326},{"style":488},[1327],{"type":47,"value":1328},")\n",{"type":41,"tag":419,"props":1330,"children":1332},{"class":421,"line":1331},12,[1333,1338,1343,1347,1351,1355,1359,1363,1367,1371,1376,1380,1385,1389,1393,1397,1401,1405,1409],{"type":41,"tag":419,"props":1334,"children":1335},{"style":438},[1336],{"type":47,"value":1337},"                            .",{"type":41,"tag":419,"props":1339,"children":1340},{"style":482},[1341],{"type":47,"value":1342},"map",{"type":41,"tag":419,"props":1344,"children":1345},{"style":488},[1346],{"type":47,"value":491},{"type":41,"tag":419,"props":1348,"children":1349},{"style":512},[1350],{"type":47,"value":591},{"type":41,"tag":419,"props":1352,"children":1353},{"style":438},[1354],{"type":47,"value":435},{"type":41,"tag":419,"props":1356,"children":1357},{"style":598},[1358],{"type":47,"value":1288},{"type":41,"tag":419,"props":1360,"children":1361},{"style":438},[1362],{"type":47,"value":573},{"type":41,"tag":419,"props":1364,"children":1365},{"style":438},[1366],{"type":47,"value":1025},{"type":41,"tag":419,"props":1368,"children":1369},{"style":426},[1370],{"type":47,"value":1030},{"type":41,"tag":419,"props":1372,"children":1373},{"style":432},[1374],{"type":47,"value":1375}," caches",{"type":41,"tag":419,"props":1377,"children":1378},{"style":438},[1379],{"type":47,"value":211},{"type":41,"tag":419,"props":1381,"children":1382},{"style":482},[1383],{"type":47,"value":1384},"delete",{"type":41,"tag":419,"props":1386,"children":1387},{"style":488},[1388],{"type":47,"value":491},{"type":41,"tag":419,"props":1390,"children":1391},{"style":432},[1392],{"type":47,"value":1288},{"type":41,"tag":419,"props":1394,"children":1395},{"style":488},[1396],{"type":47,"value":573},{"type":41,"tag":419,"props":1398,"children":1399},{"style":438},[1400],{"type":47,"value":662},{"type":41,"tag":419,"props":1402,"children":1403},{"style":438},[1404],{"type":47,"value":1066},{"type":41,"tag":419,"props":1406,"children":1407},{"style":488},[1408],{"type":47,"value":1071},{"type":41,"tag":419,"props":1410,"children":1411},{"style":438},[1412],{"type":47,"value":686},{"type":41,"tag":419,"props":1414,"children":1416},{"class":421,"line":1415},13,[1417,1421],{"type":41,"tag":419,"props":1418,"children":1419},{"style":438},[1420],{"type":47,"value":677},{"type":41,"tag":419,"props":1422,"children":1423},{"style":488},[1424],{"type":47,"value":1328},{"type":41,"tag":419,"props":1426,"children":1428},{"class":421,"line":1427},14,[1429,1434],{"type":41,"tag":419,"props":1430,"children":1431},{"style":488},[1432],{"type":47,"value":1433},"  )",{"type":41,"tag":419,"props":1435,"children":1436},{"style":438},[1437],{"type":47,"value":686},{"type":41,"tag":419,"props":1439,"children":1441},{"class":421,"line":1440},15,[1442,1446,1450],{"type":41,"tag":419,"props":1443,"children":1444},{"style":438},[1445],{"type":47,"value":1083},{"type":41,"tag":419,"props":1447,"children":1448},{"style":432},[1449],{"type":47,"value":573},{"type":41,"tag":419,"props":1451,"children":1452},{"style":438},[1453],{"type":47,"value":686},{"type":41,"tag":419,"props":1455,"children":1457},{"class":421,"line":1456},16,[1458],{"type":41,"tag":419,"props":1459,"children":1460},{"emptyLinePlaceholder":884},[1461],{"type":47,"value":887},{"type":41,"tag":419,"props":1463,"children":1465},{"class":421,"line":1464},17,[1466,1470,1474,1478,1482,1486,1490,1494,1498,1502,1506,1510,1514],{"type":41,"tag":419,"props":1467,"children":1468},{"style":432},[1469],{"type":47,"value":895},{"type":41,"tag":419,"props":1471,"children":1472},{"style":438},[1473],{"type":47,"value":211},{"type":41,"tag":419,"props":1475,"children":1476},{"style":482},[1477],{"type":47,"value":485},{"type":41,"tag":419,"props":1479,"children":1480},{"style":432},[1481],{"type":47,"value":491},{"type":41,"tag":419,"props":1483,"children":1484},{"style":438},[1485],{"type":47,"value":441},{"type":41,"tag":419,"props":1487,"children":1488},{"style":444},[1489],{"type":47,"value":257},{"type":41,"tag":419,"props":1491,"children":1492},{"style":438},[1493],{"type":47,"value":441},{"type":41,"tag":419,"props":1495,"children":1496},{"style":438},[1497],{"type":47,"value":509},{"type":41,"tag":419,"props":1499,"children":1500},{"style":512},[1501],{"type":47,"value":515},{"type":41,"tag":419,"props":1503,"children":1504},{"style":438},[1505],{"type":47,"value":435},{"type":41,"tag":419,"props":1507,"children":1508},{"style":598},[1509],{"type":47,"value":601},{"type":41,"tag":419,"props":1511,"children":1512},{"style":438},[1513],{"type":47,"value":573},{"type":41,"tag":419,"props":1515,"children":1516},{"style":438},[1517],{"type":47,"value":525},{"type":41,"tag":419,"props":1519,"children":1521},{"class":421,"line":1520},18,[1522,1526,1530,1535],{"type":41,"tag":419,"props":1523,"children":1524},{"style":432},[1525],{"type":47,"value":951},{"type":41,"tag":419,"props":1527,"children":1528},{"style":438},[1529],{"type":47,"value":211},{"type":41,"tag":419,"props":1531,"children":1532},{"style":482},[1533],{"type":47,"value":1534},"respondWith",{"type":41,"tag":419,"props":1536,"children":1537},{"style":488},[1538],{"type":47,"value":1175},{"type":41,"tag":419,"props":1540,"children":1542},{"class":421,"line":1541},19,[1543,1547,1551,1556,1560,1564,1568,1573,1577,1581,1585,1589,1593,1597,1602,1606],{"type":41,"tag":419,"props":1544,"children":1545},{"style":432},[1546],{"type":47,"value":1184},{"type":41,"tag":419,"props":1548,"children":1549},{"style":438},[1550],{"type":47,"value":211},{"type":41,"tag":419,"props":1552,"children":1553},{"style":482},[1554],{"type":47,"value":1555},"match",{"type":41,"tag":419,"props":1557,"children":1558},{"style":488},[1559],{"type":47,"value":491},{"type":41,"tag":419,"props":1561,"children":1562},{"style":432},[1563],{"type":47,"value":601},{"type":41,"tag":419,"props":1565,"children":1566},{"style":438},[1567],{"type":47,"value":211},{"type":41,"tag":419,"props":1569,"children":1570},{"style":432},[1571],{"type":47,"value":1572},"request",{"type":41,"tag":419,"props":1574,"children":1575},{"style":488},[1576],{"type":47,"value":573},{"type":41,"tag":419,"props":1578,"children":1579},{"style":438},[1580],{"type":47,"value":211},{"type":41,"tag":419,"props":1582,"children":1583},{"style":482},[1584],{"type":47,"value":999},{"type":41,"tag":419,"props":1586,"children":1587},{"style":488},[1588],{"type":47,"value":491},{"type":41,"tag":419,"props":1590,"children":1591},{"style":512},[1592],{"type":47,"value":591},{"type":41,"tag":419,"props":1594,"children":1595},{"style":438},[1596],{"type":47,"value":435},{"type":41,"tag":419,"props":1598,"children":1599},{"style":598},[1600],{"type":47,"value":1601},"cached",{"type":41,"tag":419,"props":1603,"children":1604},{"style":438},[1605],{"type":47,"value":573},{"type":41,"tag":419,"props":1607,"children":1608},{"style":438},[1609],{"type":47,"value":525},{"type":41,"tag":419,"props":1611,"children":1613},{"class":421,"line":1612},20,[1614,1618,1623,1628,1633,1637,1641,1645,1649,1653],{"type":41,"tag":419,"props":1615,"children":1616},{"style":426},[1617],{"type":47,"value":1239},{"type":41,"tag":419,"props":1619,"children":1620},{"style":432},[1621],{"type":47,"value":1622}," cached",{"type":41,"tag":419,"props":1624,"children":1625},{"style":438},[1626],{"type":47,"value":1627}," ||",{"type":41,"tag":419,"props":1629,"children":1630},{"style":482},[1631],{"type":47,"value":1632}," fetch",{"type":41,"tag":419,"props":1634,"children":1635},{"style":488},[1636],{"type":47,"value":491},{"type":41,"tag":419,"props":1638,"children":1639},{"style":432},[1640],{"type":47,"value":601},{"type":41,"tag":419,"props":1642,"children":1643},{"style":438},[1644],{"type":47,"value":211},{"type":41,"tag":419,"props":1646,"children":1647},{"style":432},[1648],{"type":47,"value":1572},{"type":41,"tag":419,"props":1650,"children":1651},{"style":488},[1652],{"type":47,"value":573},{"type":41,"tag":419,"props":1654,"children":1655},{"style":438},[1656],{"type":47,"value":686},{"type":41,"tag":419,"props":1658,"children":1660},{"class":421,"line":1659},21,[1661,1665],{"type":41,"tag":419,"props":1662,"children":1663},{"style":438},[1664],{"type":47,"value":677},{"type":41,"tag":419,"props":1666,"children":1667},{"style":488},[1668],{"type":47,"value":1328},{"type":41,"tag":419,"props":1670,"children":1672},{"class":421,"line":1671},22,[1673,1677],{"type":41,"tag":419,"props":1674,"children":1675},{"style":488},[1676],{"type":47,"value":1433},{"type":41,"tag":419,"props":1678,"children":1679},{"style":438},[1680],{"type":47,"value":686},{"type":41,"tag":419,"props":1682,"children":1684},{"class":421,"line":1683},23,[1685,1689,1693],{"type":41,"tag":419,"props":1686,"children":1687},{"style":438},[1688],{"type":47,"value":1083},{"type":41,"tag":419,"props":1690,"children":1691},{"style":432},[1692],{"type":47,"value":573},{"type":41,"tag":419,"props":1694,"children":1695},{"style":438},[1696],{"type":47,"value":686},{"type":41,"tag":381,"props":1698,"children":1700},{"id":1699},"_3-reflect-online-offline-in-the-ui",[1701],{"type":47,"value":1702},"3. Reflect Online \u002F Offline in the UI",{"type":41,"tag":50,"props":1704,"children":1705},{},[1706,1708,1714,1716,1721,1723,1729],{"type":47,"value":1707},"Show or hide an offline indicator (e.g. ",{"type":41,"tag":64,"props":1709,"children":1711},{"className":1710},[],[1712],{"type":47,"value":1713},"#offline-banner",{"type":47,"value":1715},") from ",{"type":41,"tag":64,"props":1717,"children":1719},{"className":1718},[],[1720],{"type":47,"value":282},{"type":47,"value":1722}," — build the indicator itself with ",{"type":41,"tag":64,"props":1724,"children":1726},{"className":1725},[],[1727],{"type":47,"value":1728},"\u002Fadd-ui",{"type":47,"value":211},{"type":41,"tag":408,"props":1731,"children":1733},{"className":410,"code":1732,"language":412,"meta":413,"style":413},"function updateOnlineUI() {\n  var offline = !navigator.onLine;\n  \u002F\u002F Show\u002Fhide your offline indicator based on `offline` — see \u002Fadd-ui\n}\nwindow.addEventListener('online', updateOnlineUI);\nwindow.addEventListener('offline', updateOnlineUI);\nupdateOnlineUI();\n",[1734],{"type":41,"tag":64,"props":1735,"children":1736},{"__ignoreMap":413},[1737,1757,1798,1806,1813,1858,1901],{"type":41,"tag":419,"props":1738,"children":1739},{"class":421,"line":422},[1740,1744,1749,1753],{"type":41,"tag":419,"props":1741,"children":1742},{"style":512},[1743],{"type":47,"value":591},{"type":41,"tag":419,"props":1745,"children":1746},{"style":482},[1747],{"type":47,"value":1748}," updateOnlineUI",{"type":41,"tag":419,"props":1750,"children":1751},{"style":438},[1752],{"type":47,"value":1198},{"type":41,"tag":419,"props":1754,"children":1755},{"style":438},[1756],{"type":47,"value":525},{"type":41,"tag":419,"props":1758,"children":1759},{"class":421,"line":469},[1760,1765,1770,1775,1780,1785,1789,1794],{"type":41,"tag":419,"props":1761,"children":1762},{"style":512},[1763],{"type":47,"value":1764},"  var",{"type":41,"tag":419,"props":1766,"children":1767},{"style":432},[1768],{"type":47,"value":1769}," offline",{"type":41,"tag":419,"props":1771,"children":1772},{"style":438},[1773],{"type":47,"value":1774}," =",{"type":41,"tag":419,"props":1776,"children":1777},{"style":438},[1778],{"type":47,"value":1779}," !",{"type":41,"tag":419,"props":1781,"children":1782},{"style":432},[1783],{"type":47,"value":1784},"navigator",{"type":41,"tag":419,"props":1786,"children":1787},{"style":438},[1788],{"type":47,"value":211},{"type":41,"tag":419,"props":1790,"children":1791},{"style":432},[1792],{"type":47,"value":1793},"onLine",{"type":41,"tag":419,"props":1795,"children":1796},{"style":438},[1797],{"type":47,"value":686},{"type":41,"tag":419,"props":1799,"children":1800},{"class":421,"line":528},[1801],{"type":41,"tag":419,"props":1802,"children":1803},{"style":665},[1804],{"type":47,"value":1805},"  \u002F\u002F Show\u002Fhide your offline indicator based on `offline` — see \u002Fadd-ui\n",{"type":41,"tag":419,"props":1807,"children":1808},{"class":421,"line":612},[1809],{"type":41,"tag":419,"props":1810,"children":1811},{"style":438},[1812],{"type":47,"value":712},{"type":41,"tag":419,"props":1814,"children":1815},{"class":421,"line":671},[1816,1821,1825,1829,1833,1837,1841,1845,1849,1854],{"type":41,"tag":419,"props":1817,"children":1818},{"style":432},[1819],{"type":47,"value":1820},"window",{"type":41,"tag":419,"props":1822,"children":1823},{"style":438},[1824],{"type":47,"value":211},{"type":41,"tag":419,"props":1826,"children":1827},{"style":482},[1828],{"type":47,"value":485},{"type":41,"tag":419,"props":1830,"children":1831},{"style":432},[1832],{"type":47,"value":491},{"type":41,"tag":419,"props":1834,"children":1835},{"style":438},[1836],{"type":47,"value":441},{"type":41,"tag":419,"props":1838,"children":1839},{"style":444},[1840],{"type":47,"value":290},{"type":41,"tag":419,"props":1842,"children":1843},{"style":438},[1844],{"type":47,"value":441},{"type":41,"tag":419,"props":1846,"children":1847},{"style":438},[1848],{"type":47,"value":509},{"type":41,"tag":419,"props":1850,"children":1851},{"style":432},[1852],{"type":47,"value":1853}," updateOnlineUI)",{"type":41,"tag":419,"props":1855,"children":1856},{"style":438},[1857],{"type":47,"value":686},{"type":41,"tag":419,"props":1859,"children":1860},{"class":421,"line":689},[1861,1865,1869,1873,1877,1881,1885,1889,1893,1897],{"type":41,"tag":419,"props":1862,"children":1863},{"style":432},[1864],{"type":47,"value":1820},{"type":41,"tag":419,"props":1866,"children":1867},{"style":438},[1868],{"type":47,"value":211},{"type":41,"tag":419,"props":1870,"children":1871},{"style":482},[1872],{"type":47,"value":485},{"type":41,"tag":419,"props":1874,"children":1875},{"style":432},[1876],{"type":47,"value":491},{"type":41,"tag":419,"props":1878,"children":1879},{"style":438},[1880],{"type":47,"value":441},{"type":41,"tag":419,"props":1882,"children":1883},{"style":444},[1884],{"type":47,"value":19},{"type":41,"tag":419,"props":1886,"children":1887},{"style":438},[1888],{"type":47,"value":441},{"type":41,"tag":419,"props":1890,"children":1891},{"style":438},[1892],{"type":47,"value":509},{"type":41,"tag":419,"props":1894,"children":1895},{"style":432},[1896],{"type":47,"value":1853},{"type":41,"tag":419,"props":1898,"children":1899},{"style":438},[1900],{"type":47,"value":686},{"type":41,"tag":419,"props":1902,"children":1903},{"class":421,"line":706},[1904,1909,1913],{"type":41,"tag":419,"props":1905,"children":1906},{"style":482},[1907],{"type":47,"value":1908},"updateOnlineUI",{"type":41,"tag":419,"props":1910,"children":1911},{"style":432},[1912],{"type":47,"value":1198},{"type":41,"tag":419,"props":1914,"children":1915},{"style":438},[1916],{"type":47,"value":686},{"type":41,"tag":381,"props":1918,"children":1920},{"id":1919},"_4-handle-data-that-needs-the-network",[1921],{"type":47,"value":1922},"4. Handle Data That Needs the Network",{"type":41,"tag":50,"props":1924,"children":1925},{},[1926],{"type":47,"value":1927},"For screens that require fresh data, detect offline and show a message instead of a broken state:",{"type":41,"tag":408,"props":1929,"children":1931},{"className":410,"code":1930,"language":412,"meta":413,"style":413},"if (!navigator.onLine) {\n  showToast('No connection — showing last saved data', 'error');\n  renderFromCache();   \u002F\u002F e.g. \u002Fadd-local-storage\n  return;\n}\n",[1932],{"type":41,"tag":64,"props":1933,"children":1934},{"__ignoreMap":413},[1935,1968,2018,2039,2051],{"type":41,"tag":419,"props":1936,"children":1937},{"class":421,"line":422},[1938,1942,1946,1951,1955,1959,1964],{"type":41,"tag":419,"props":1939,"children":1940},{"style":426},[1941],{"type":47,"value":429},{"type":41,"tag":419,"props":1943,"children":1944},{"style":432},[1945],{"type":47,"value":435},{"type":41,"tag":419,"props":1947,"children":1948},{"style":438},[1949],{"type":47,"value":1950},"!",{"type":41,"tag":419,"props":1952,"children":1953},{"style":432},[1954],{"type":47,"value":1784},{"type":41,"tag":419,"props":1956,"children":1957},{"style":438},[1958],{"type":47,"value":211},{"type":41,"tag":419,"props":1960,"children":1961},{"style":432},[1962],{"type":47,"value":1963},"onLine) ",{"type":41,"tag":419,"props":1965,"children":1966},{"style":438},[1967],{"type":47,"value":466},{"type":41,"tag":419,"props":1969,"children":1970},{"class":421,"line":469},[1971,1976,1980,1984,1989,1993,1997,2001,2006,2010,2014],{"type":41,"tag":419,"props":1972,"children":1973},{"style":482},[1974],{"type":47,"value":1975},"  showToast",{"type":41,"tag":419,"props":1977,"children":1978},{"style":488},[1979],{"type":47,"value":491},{"type":41,"tag":419,"props":1981,"children":1982},{"style":438},[1983],{"type":47,"value":441},{"type":41,"tag":419,"props":1985,"children":1986},{"style":444},[1987],{"type":47,"value":1988},"No connection — showing last saved data",{"type":41,"tag":419,"props":1990,"children":1991},{"style":438},[1992],{"type":47,"value":441},{"type":41,"tag":419,"props":1994,"children":1995},{"style":438},[1996],{"type":47,"value":509},{"type":41,"tag":419,"props":1998,"children":1999},{"style":438},[2000],{"type":47,"value":755},{"type":41,"tag":419,"props":2002,"children":2003},{"style":444},[2004],{"type":47,"value":2005},"error",{"type":41,"tag":419,"props":2007,"children":2008},{"style":438},[2009],{"type":47,"value":441},{"type":41,"tag":419,"props":2011,"children":2012},{"style":488},[2013],{"type":47,"value":573},{"type":41,"tag":419,"props":2015,"children":2016},{"style":438},[2017],{"type":47,"value":686},{"type":41,"tag":419,"props":2019,"children":2020},{"class":421,"line":528},[2021,2026,2030,2034],{"type":41,"tag":419,"props":2022,"children":2023},{"style":482},[2024],{"type":47,"value":2025},"  renderFromCache",{"type":41,"tag":419,"props":2027,"children":2028},{"style":488},[2029],{"type":47,"value":1198},{"type":41,"tag":419,"props":2031,"children":2032},{"style":438},[2033],{"type":47,"value":662},{"type":41,"tag":419,"props":2035,"children":2036},{"style":665},[2037],{"type":47,"value":2038},"   \u002F\u002F e.g. \u002Fadd-local-storage\n",{"type":41,"tag":419,"props":2040,"children":2041},{"class":421,"line":612},[2042,2047],{"type":41,"tag":419,"props":2043,"children":2044},{"style":426},[2045],{"type":47,"value":2046},"  return",{"type":41,"tag":419,"props":2048,"children":2049},{"style":438},[2050],{"type":47,"value":686},{"type":41,"tag":419,"props":2052,"children":2053},{"class":421,"line":671},[2054],{"type":41,"tag":419,"props":2055,"children":2056},{"style":438},[2057],{"type":47,"value":712},{"type":41,"tag":42,"props":2059,"children":2061},{"id":2060},"verify",[2062],{"type":47,"value":2063},"Verify",{"type":41,"tag":56,"props":2065,"children":2068},{"className":2066},[2067],"contains-task-list",[2069,2081,2098,2126,2135,2151,2160],{"type":41,"tag":60,"props":2070,"children":2073},{"className":2071},[2072],"task-list-item",[2074,2079],{"type":41,"tag":2075,"props":2076,"children":2078},"input",{"disabled":884,"type":2077},"checkbox",[],{"type":47,"value":2080}," App is served over HTTPS",{"type":41,"tag":60,"props":2082,"children":2084},{"className":2083},[2072],[2085,2088,2090,2096],{"type":41,"tag":2075,"props":2086,"children":2087},{"disabled":884,"type":2077},[],{"type":47,"value":2089}," ",{"type":41,"tag":64,"props":2091,"children":2093},{"className":2092},[],[2094],{"type":47,"value":2095},"navigator.serviceWorker.register",{"type":47,"value":2097}," resolves (check DevTools \u002F console)",{"type":41,"tag":60,"props":2099,"children":2101},{"className":2100},[2072],[2102,2105,2107,2112,2113,2118,2119,2124],{"type":41,"tag":2075,"props":2103,"children":2104},{"disabled":884,"type":2077},[],{"type":47,"value":2106}," App shell (",{"type":41,"tag":64,"props":2108,"children":2110},{"className":2109},[],[2111],{"type":47,"value":230},{"type":47,"value":232},{"type":41,"tag":64,"props":2114,"children":2116},{"className":2115},[],[2117],{"type":47,"value":238},{"type":47,"value":232},{"type":41,"tag":64,"props":2120,"children":2122},{"className":2121},[],[2123],{"type":47,"value":245},{"type":47,"value":2125},") is precached on install",{"type":41,"tag":60,"props":2127,"children":2129},{"className":2128},[2072],[2130,2133],{"type":41,"tag":2075,"props":2131,"children":2132},{"disabled":884,"type":2077},[],{"type":47,"value":2134}," Reloading offline still renders the app shell",{"type":41,"tag":60,"props":2136,"children":2138},{"className":2137},[2072],[2139,2142,2144,2149],{"type":41,"tag":2075,"props":2140,"children":2141},{"disabled":884,"type":2077},[],{"type":47,"value":2143}," Old caches are cleaned when ",{"type":41,"tag":64,"props":2145,"children":2147},{"className":2146},[],[2148],{"type":47,"value":371},{"type":47,"value":2150}," version bumps (activate handler)",{"type":41,"tag":60,"props":2152,"children":2154},{"className":2153},[2072],[2155,2158],{"type":41,"tag":2075,"props":2156,"children":2157},{"disabled":884,"type":2077},[],{"type":47,"value":2159}," Offline banner \u002F message appears when connection drops",{"type":41,"tag":60,"props":2161,"children":2163},{"className":2162},[2072],[2164,2167],{"type":41,"tag":2075,"props":2165,"children":2166},{"disabled":884,"type":2077},[],{"type":47,"value":2168}," Network-dependent screens degrade gracefully offline",{"type":41,"tag":42,"props":2170,"children":2172},{"id":2171},"related-skills",[2173],{"type":47,"value":2174},"Related Skills",{"type":41,"tag":56,"props":2176,"children":2177},{},[2178,2188,2199],{"type":41,"tag":60,"props":2179,"children":2180},{},[2181,2186],{"type":41,"tag":64,"props":2182,"children":2184},{"className":2183},[],[2185],{"type":47,"value":358},{"type":47,"value":2187}," — Persist the wearer's data so it survives offline sessions",{"type":41,"tag":60,"props":2189,"children":2190},{},[2191,2197],{"type":41,"tag":64,"props":2192,"children":2194},{"className":2193},[],[2195],{"type":47,"value":2196},"\u002Fconnect-api",{"type":47,"value":2198}," — Add cache-aware fallbacks around API calls",{"type":41,"tag":60,"props":2200,"children":2201},{},[2202,2207],{"type":41,"tag":64,"props":2203,"children":2205},{"className":2204},[],[2206],{"type":47,"value":1728},{"type":47,"value":2208}," — Add the offline indicator",{"type":41,"tag":2210,"props":2211,"children":2212},"style",{},[2213],{"type":47,"value":2214},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2216,"total":1331},[2217,2231,2245,2259,2265,2279,2293],{"slug":2218,"name":2218,"fn":2219,"description":2220,"org":2221,"tags":2222,"stars":23,"repoUrl":24,"updatedAt":2230},"add-device-sensors","integrate device sensor data","Add device sensor data to a Meta Display Glasses webapp — IMU (accelerometer, gyroscope, orientation) via DeviceMotionEvent\u002FDeviceOrientationEvent, and GPS location via navigator.geolocation. Use when the user wants motion tracking, compass, level tool, step counter, shake detection, head tracking, or location.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2223,2224,2227],{"name":21,"slug":22,"type":16},{"name":2225,"slug":2226,"type":16},"Hardware","hardware",{"name":2228,"slug":2229,"type":16},"IoT","iot","2026-09-01T08:30:33.453548",{"slug":2232,"name":2232,"fn":2233,"description":2234,"org":2235,"tags":2236,"stars":23,"repoUrl":24,"updatedAt":2244},"add-gestures","handle gesture interactions in webapps","Handle EMG pinch (tap-to-activate) and opt into continuous pinch-and-drag in a Meta Display Glasses webapp. Use when the user wants sliders, drawing, maps, drag interactions, or game-style continuous input.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2237,2240,2241],{"name":2238,"slug":2239,"type":16},"Design","design",{"name":21,"slug":22,"type":16},{"name":2242,"slug":2243,"type":16},"Interaction","interaction","2026-09-01T08:30:53.889244",{"slug":2246,"name":2246,"fn":2247,"description":2248,"org":2249,"tags":2250,"stars":23,"repoUrl":24,"updatedAt":2258},"add-local-storage","add client-side data persistence","Add client-side data persistence to a Meta Display Glasses webapp using the W3C Web Storage API (localStorage and sessionStorage). Use when the user wants to save settings, cache data, persist state, or store user preferences.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2251,2252,2255],{"name":21,"slug":22,"type":16},{"name":2253,"slug":2254,"type":16},"Persistence","persistence",{"name":2256,"slug":2257,"type":16},"Storage","storage","2026-09-01T08:30:31.384362",{"slug":4,"name":4,"fn":5,"description":6,"org":2260,"tags":2261,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2262,2263,2264],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"slug":2266,"name":2266,"fn":2267,"description":2268,"org":2269,"tags":2270,"stars":23,"repoUrl":24,"updatedAt":2278},"add-text-input","add text input to webapps","Add text entry to a Meta Display Glasses webapp. Standard HTML inputs open the on-glasses composer (handwriting + voice) when focused and tapped. Use when the user wants a text field, search box, form input, or notes area.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2271,2274,2275],{"name":2272,"slug":2273,"type":16},"Forms","forms",{"name":21,"slug":22,"type":16},{"name":2276,"slug":2277,"type":16},"UI Components","ui-components","2026-09-01T08:30:30.563354",{"slug":2280,"name":2280,"fn":2281,"description":2282,"org":2283,"tags":2284,"stars":23,"repoUrl":24,"updatedAt":2292},"add-ui","add UI components to webapps","Add UI components to a Meta Display Glasses webapp — screens, buttons, lists, cards, forms, toggles, counters, or nav bars. Works with vanilla JS and React apps. Use when the user wants to add any interactive UI element or new screen.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2285,2286,2288,2291],{"name":21,"slug":22,"type":16},{"name":2287,"slug":412,"type":16},"JavaScript",{"name":2289,"slug":2290,"type":16},"React","react",{"name":2276,"slug":2277,"type":16},"2026-09-01T08:30:27.477785",{"slug":2294,"name":2294,"fn":2295,"description":2296,"org":2297,"tags":2298,"stars":23,"repoUrl":24,"updatedAt":2309},"connect-api","connect webapps to REST APIs and WebSockets","Connect a Meta Display Glasses webapp to REST APIs or WebSockets. Use when the user wants to fetch data from an API, add real-time updates, show loading\u002Ferror states, or cache API responses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2299,2302,2303,2306],{"name":2300,"slug":2301,"type":16},"API Development","api-development",{"name":21,"slug":22,"type":16},{"name":2304,"slug":2305,"type":16},"REST API","rest-api",{"name":2307,"slug":2308,"type":16},"WebSockets","websockets","2026-09-01T08:30:30.968156",{"items":2311,"total":2489},[2312,2332,2344,2365,2384,2401,2412,2426,2439,2452,2467,2479],{"slug":2313,"name":2313,"fn":2314,"description":2315,"org":2316,"tags":2317,"stars":2329,"repoUrl":2330,"updatedAt":2331},"relay-best-practices","write idiomatic Relay code","Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__\u002F*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2318,2321,2322,2325,2326],{"name":2319,"slug":2320,"type":16},"Engineering","engineering",{"name":21,"slug":22,"type":16},{"name":2323,"slug":2324,"type":16},"GraphQL","graphql",{"name":2289,"slug":2290,"type":16},{"name":2327,"slug":2328,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":2333,"name":2333,"fn":2334,"description":2335,"org":2336,"tags":2337,"stars":2329,"repoUrl":2330,"updatedAt":2343},"relay-performance","optimize Relay application performance","Performance best practices for Relay applications. Use when optimizing data fetching, reducing re-renders, configuring caching, or improving time to first meaningful paint. Covers query placement, @defer, pagination, fetch policies, garbage collection, fragment granularity, and server-side filtering. Companion to the relay-best-practices skill which covers correctness and architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2338,2339,2340,2341,2342],{"name":21,"slug":22,"type":16},{"name":2323,"slug":2324,"type":16},{"name":14,"slug":15,"type":16},{"name":2289,"slug":2290,"type":16},{"name":2327,"slug":2328,"type":16},"2026-06-10T07:30:28.726513",{"slug":2345,"name":2345,"fn":2346,"description":2347,"org":2348,"tags":2349,"stars":2362,"repoUrl":2363,"updatedAt":2364},"add-shape-types-to-torch-model","annotate PyTorch models with tensor shapes","Port a PyTorch model to use pyrefly's tensor shape type system (Tensor[[B, C, H, W]], Int[T]). Use this skill whenever the user wants to add shape annotations to a PyTorch model, type a model with tensor dimensions, port a model to use shape tracking, or annotate model forward methods with tensor shapes. Also use when the user mentions tensor shape ports, Int types for PyTorch, or pyrefly shape checking on a model file. Invoke BEFORE starting any model port — the skill's gated workflow prevents common failure modes.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2350,2353,2356,2359],{"name":2351,"slug":2352,"type":16},"Data Modeling","data-modeling",{"name":2354,"slug":2355,"type":16},"Deep Learning","deep-learning",{"name":2357,"slug":2358,"type":16},"Python","python",{"name":2360,"slug":2361,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":2366,"name":2366,"fn":2367,"description":2368,"org":2369,"tags":2370,"stars":2381,"repoUrl":2382,"updatedAt":2383},"camera-streaming","configure camera streaming and photo capture","Stream, video frames, photo capture, resolution\u002Fframe rate configuration",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2371,2374,2375,2378],{"name":2372,"slug":2373,"type":16},"Camera","camera",{"name":2225,"slug":2226,"type":16},{"name":2376,"slug":2377,"type":16},"iOS","ios",{"name":2379,"slug":2380,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-08-06T05:38:47.523424",{"slug":2385,"name":2385,"fn":2386,"description":2387,"org":2388,"tags":2389,"stars":2381,"repoUrl":2382,"updatedAt":2400},"dat-conventions","develop iOS applications with DAT SDK","Swift patterns, async\u002Fawait, naming conventions, key types for DAT SDK iOS development",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2390,2391,2394,2397],{"name":2376,"slug":2377,"type":16},{"name":2392,"slug":2393,"type":16},"Mobile","mobile",{"name":2395,"slug":2396,"type":16},"SDK","sdk",{"name":2398,"slug":2399,"type":16},"Swift","swift","2026-08-06T05:38:49.536777",{"slug":2402,"name":2402,"fn":2403,"description":2404,"org":2405,"tags":2406,"stars":2381,"repoUrl":2382,"updatedAt":2411},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2407,2409,2410],{"name":2408,"slug":2402,"type":16},"Debugging",{"name":2319,"slug":2320,"type":16},{"name":2376,"slug":2377,"type":16},"2026-08-06T05:38:50.51086",{"slug":2413,"name":2413,"fn":2414,"description":2415,"org":2416,"tags":2417,"stars":2381,"repoUrl":2382,"updatedAt":2425},"display-access","manage display capabilities on wearable devices","Display capability setup, display-capable device selection, UI DSL, icons, buttons, images, and video playback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2418,2419,2422,2423,2424],{"name":2238,"slug":2239,"type":16},{"name":2420,"slug":2421,"type":16},"Images","images",{"name":2242,"slug":2243,"type":16},{"name":2276,"slug":2277,"type":16},{"name":2379,"slug":2380,"type":16},"2026-08-06T05:38:53.520488",{"slug":2427,"name":2427,"fn":2428,"description":2429,"org":2430,"tags":2431,"stars":2381,"repoUrl":2382,"updatedAt":2438},"getting-started","set up Meta wearable SDK integration","SDK setup, Swift Package Manager integration, Info.plist configuration, and first connection to Meta glasses",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2432,2435,2436,2437],{"name":2433,"slug":2434,"type":16},"Configuration","configuration",{"name":2376,"slug":2377,"type":16},{"name":2395,"slug":2396,"type":16},{"name":2398,"slug":2399,"type":16},"2026-08-06T05:38:48.514522",{"slug":2440,"name":2440,"fn":2441,"description":2442,"org":2443,"tags":2444,"stars":2381,"repoUrl":2382,"updatedAt":2451},"live-debugging-mcp","debug iOS wearable applications","Use this whenever debugging an iOS DAT app with local DAT Inspector MCP tools, live device events, Meta AI app\u002Fdevice boundary issues, permissions, registration, sessions, streaming, callbacks, or user reports that the app cannot communicate with glasses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2445,2446,2447,2450],{"name":2408,"slug":2402,"type":16},{"name":2376,"slug":2377,"type":16},{"name":2448,"slug":2449,"type":16},"MCP","mcp",{"name":2392,"slug":2393,"type":16},"2026-08-06T06:09:15.013902",{"slug":2453,"name":2453,"fn":2454,"description":2455,"org":2456,"tags":2457,"stars":2381,"repoUrl":2382,"updatedAt":2466},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2458,2459,2460,2463],{"name":2376,"slug":2377,"type":16},{"name":2392,"slug":2393,"type":16},{"name":2461,"slug":2462,"type":16},"QA","qa",{"name":2464,"slug":2465,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":2468,"name":2468,"fn":2469,"description":2470,"org":2471,"tags":2472,"stars":2381,"repoUrl":2382,"updatedAt":2478},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2473,2474,2475],{"name":2372,"slug":2373,"type":16},{"name":2376,"slug":2377,"type":16},{"name":2476,"slug":2477,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":2480,"name":2480,"fn":2481,"description":2482,"org":2483,"tags":2484,"stars":2381,"repoUrl":2382,"updatedAt":2488},"sample-app-guide","build wearable apps with camera streaming","Building a complete DAT app with camera streaming and photo capture",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2485,2486,2487],{"name":2372,"slug":2373,"type":16},{"name":2376,"slug":2377,"type":16},{"name":2392,"slug":2393,"type":16},"2026-08-06T05:38:51.509255",34]