Tsim PWA title bar nrog CSS `window-drag`

Lo lus teb luv luv: yog xav rub qhov rai siv qhov interface uas hloov tau, koj yuav tsum qhib window-controls-overlay hauv manifest, nruab PWA rau hauv computer, teeb tsa window-drag: move rau thaj chaw khoob thiab teeb tsa window-drag: none ncaj qha rau cov khawm, thaj chaw ntaus ntawv thiab lwm yam khoom sib cuag. Yog qhib app hauv ib lub tab ib txwm, kev rub qhov rai yuav tsis ua haujlwm.

Raws li Chrome 152, window-drag yog ib qho CSS property siv los cim thaj chaw uas txav tau qhov rai ntawm web app desktop. Qhov txheej txheem no tsis hloov ib lub vev xaib hauv tab ua ib lub qhov rai ntawm operating system; nws yuav tsum muaj PWA twb nruab lawm thiab siv hom tso saib uas txhawb Window Controls Overlay (raws li developer.chrome.com). Ntu hauv qab no siv ib lub app sau ntawv ua qauv qhia. Hloov lub npe app, kab ke cim app thiab cov ntsiab lus kom haum rau koj qhov project.

Npaj ib puag ncig kom raug ua ntej sau CSS

Qhov qauv no xav tias koj twb muaj ib lub web app uas khiav tau dhau HTTPS lossis localhost, muaj manifest file thiab cov cim app. Kom browser paub thiab nruab tau PWA, app kuj yuav tsum ua tau raws li cov cai nruab uas browser siv tam sim no, xws li txuas manifest kom raug thiab npaj lub tshuab nruab app lawm.

Siv Chrome 152 rau operating system desktop; tsab xov xwm no tsis xav tias txhua lub browser txhawb tau ib yam nkaus.
Pab app dhau HTTPS lossis localhost. Tsis txhob siv ib qho HTTP URL ib txwm ntawm public server rau kauj ruam nruab.
Xyuas kom cov ntaub ntawv cim hauv manifest yeej muaj tiag. Yog siv tus qauv hauv qab no, tsim /icons/icon-192.png thiab /icons/icon-512.png, lossis hloov mus siv koj tus kheej lub kab ke cim uas siv tau.
Koj yuav tsum muaj cai kho HTML, CSS thiab manifest, thiab qhib DevTools los kuaj cov ntaub ntawv thiab syntax errors.

Yog app tseem nruab tsis tau ua PWA, xub daws cov cai nruab kom tiav. window-drag tsis yog txoj kev hloov chaw rau manifest lossis ib lub app desktop uas twb nruab lawm.

Qhib Window Controls Overlay hauv manifest

Qhib manifest file hauv lub hauv paus directory ntawm app, feem ntau yog manifest.webmanifest. Ntxiv cov ntsiab lus zoo ib yam li hauv qab no thiab hloov cov nqi qauv xws li lub npe app, start_url, scope thiab kab ke cim:

{
  "name": "Desktop Notes",
  "short_name": "Notes",
  "start_url": "/",
  "scope": "/",
  "display_override": [
    "window-controls-overlay",
    "standalone"
  ],
  "display": "standalone",
  "background_color": "#111827",
  "theme_color": "#111827",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Ntxiv HTML hauv qab no rau ntu <head> ntawm nplooj ntawv tseem ceeb, ces hloov kab ke yog manifest tsis nyob hauv lub hauv paus directory:

<link rel="manifest" href="/manifest.webmanifest">

Chrome yuav sim siv thawj tus nqi hauv display_override; yog siv tsis tau, browser yuav hloov mus rau standalone. Property display yog txoj kev fallback rau ib puag ncig uas tsis txhawb override mechanism. Tom qab kho manifest, reload app thiab kuaj hauv DevTools tias manifest file xa rov qab HTTP success code, muaj JSON siv tau thiab cov cim tsis xa rov qab 404 error.

Tsim tus qauv npe qhov rai thiab thaj chaw sib cuag

Hauv HTML ntawm nplooj ntawv app, tso lub npe qhov rai ua ntej cov ntsiab lus tseem ceeb. Tus qauv hauv qab no muaj hom npe, thaj chaw nrhiav thiab khawm teeb tsa:

<body>
  <header class="app-titlebar">
    <div class="titlebar-content">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">N</span>
        <span>Desktop Notes</span>
      </div>

      <label class="search-box">
        <span class="sr-only">Tìm ghi chú</span>
        <input type="search" placeholder="Tìm ghi chú">
      </label>

      <button class="settings-button" type="button">
        Cài đặt
      </button>
    </div>
  </header>

  <main class="page-content">
    <h1>Ghi chú của tôi</h1>
    <p>Nội dung ứng dụng nằm bên dưới thanh tiêu đề tùy biến.</p>
  </main>
</body>

Tom qab ntawd, ntxiv CSS rau hauv stylesheet file uas nplooj ntawv tab tom thauj. Property window-drag: move raug tso rau ntawm lub npe qhov rai; cov thaj chaw uas txais kev ua haujlwm ntawm tus neeg siv raug cais tawm siv window-drag: none:

:root {
  --titlebar-height: 44px;
  --surface: #111827;
  --text: #f9fafb;
  --border: #374151;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: #111827;
  background: #f3f4f6;
  font: 15px/1.5 system-ui, sans-serif;
}

.app-titlebar {
  min-height: var(--titlebar-height);
  color: var(--text);
  background: var(--surface);
  window-drag: move;
}

.titlebar-content {
  min-height: var(--titlebar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  window-drag: none;
}

.brand-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #2563eb;
  font-weight: 700;
}

.search-box {
  flex: 1;
  max-width: 420px;
  window-drag: none;
}

.search-box input {
  width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  color: var(--text);
  background: #1f2937;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.settings-button {
  min-height: 30px;
  padding: 4px 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  window-drag: none;
}

.page-content {
  padding: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Hauv tus qauv no, thaj chaw khoob uas seem hauv .app-titlebar yog thaj chaw rub. Logo, daim ntawv qhia nrhiav, thaj chaw ntaus ntawv thiab khawm raug cim none kom tus neeg siv xaiv, ntaus lossis nias tau, tsis yog yuam kev txav qhov rai.

Tso thaj chaw nyab xeeb rau cov khawm tswj qhov rai

Window Controls Overlay coj cov web contents mus rau thaj chaw uas ib txwm yog lub npe qhov rai, tabsis cov khawm txo qis, nthuav dav thiab kaw qhov rai tseem yog operating system tus tswj thiab tso tawm. Qhov chaw ntawm thaj chaw no hloov raws operating system, kev taw qhia interface, display scale thiab qhov loj ntawm qhov rai. Cov variables titlebar-area-x, titlebar-area-y, titlebar-area-width thiab titlebar-area-height piav txog lub duab plaub fab ntawm thaj chaw title bar uas siv tau; tsis txhob to taub raws tshuab tias lawv yog tib qho left thiab right padding (raws li developer.mozilla.org).

Koj siv tau env() los teeb qhov chaw seem pib. Ntxig ntu no rau tom qab txoj cai CSS saum toj no:

.app-titlebar {
  padding-block-start: env(titlebar-area-y, 0px);
}

.titlebar-content {
  min-height: max(
    var(--titlebar-height),
    env(titlebar-area-height, var(--titlebar-height))
  );
  padding-inline-start: max(
    12px,
    env(titlebar-area-x, 0px)
  );
  padding-inline-end: max(
    12px,
    calc(
      100% - env(titlebar-area-x, 0px) -
      env(titlebar-area-width, 100%)
    )
  );
}

Qhov no tsuas yog kev teeb tsa pib xwb, tsis yog ib qho kev nrug uas haum rau txhua tus qauv. Yog tias title bar muaj kev teeb tsa nyuaj, siv API los nyeem daim duab plaub tiag tiag thiab hloov lub CSS variable ntawm daim ntawv thov tom qab qhov geometry ntawm overlay hloov. Txoj haujlwm env() yuav tsum muaj tus nqi hloov chaw kom lub interface tseem siv tau thaum browser tsis muab environment variable (raws li developer.mozilla.org).

Tshawb xyuas hom kev khiav thiab hloov geometryด้วย JavaScript

Tsis tsim nyog siv User-Agent los txiav txim tias daim ntawv thov tab tom khiav hauv PWA. Ntxig ntu nram qab no rau hauv JavaScript file uas raug load tom qab daim ntawv muaj document.documentElement. Tus code no tsuas hloov interface status thiab sau diagnostic information xwb; daim ntawv thov lub luag haujlwm tseem ceeb yuav tsum tsis txhob vam khom API no:

const standaloneQuery = window.matchMedia(
  '(display-mode: standalone)'
);

function updateWindowMode() {
  const overlay = navigator.windowControlsOverlay;
  const isStandalone = standaloneQuery.matches;
  const isOverlayVisible = Boolean(overlay?.visible);

  document.documentElement.dataset.pwa =
    isStandalone ? 'true' : 'false';

  document.documentElement.dataset.titlebarOverlay =
    isOverlayVisible ? 'true' : 'false';

  if (overlay) {
    const rect = overlay.getTitlebarAreaRect();
    console.debug('Title bar area:', {
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height
    });
  }
}

updateWindowMode();

if (navigator.windowControlsOverlay) {
  navigator.windowControlsOverlay.addEventListener(
    'geometrychange',
    updateWindowMode
  );
}

standaloneQuery.addEventListener('change', updateWindowMode);

Thaum khiav hauv tab, isStandalone feem ntau yog false; thaum qhib los ntawm launcher ua PWA, qhov xwm txheej no yuav hloov mus ua true. Yog tias navigator.windowControlsOverlay tsis muaj, cia title bar nyob li HTML ib txwm siv es tsis txhob sim siv JavaScript los ua qauv rub qhov rais.

Nruab thiab txheeb xyuas raws nraim li qhov kev txiav txim

Pab kom daim ntawv thov khiav: pib lub development server lossis HTTPS server ntawm qhov project. Qhib qhov URL ntawm daim ntawv thov kom raug hauv Chrome 152 ntawm computer.
Tshawb xyuas manifest: hauv DevTools, qhib ntu Application thiab tshawb xyuas manifest, display_override, display, cov icon thiab txhua txoj kev txuas. Kho txhua qhov yuam kev hauv JSON lossis qhov yuam kev thauj file ua ntej mus ntxiv.
Nruab PWA: siv Chrome lub pob nruab PWA, tsis yog tsuas yog pin tab xwb. Yog tias twb nruab daim ntawv thov lawm, kaw lub qhov rais ntawm daim ntawv thov, rov thauj manifest thiab rov nruab dua yog xav tau kom kuaj qhov kev hloov.
Qhib daim ntawv thov kom raug: kaw tab qub, ces qhib PWA los ntawm shortcut lossis operating system launcher.
Tshawb xyuas thaj tsam rub: nias thiab rub qhov chaw seem ntawm .app-titlebar. Qhov xav tau yog lub qhov rais PWA txav raws tus nas.
Tshawb xyuas thaj tsam txwv: nias lub pob Nqis, tso tus cursor rau hauv lub thawv tshawb, sau ntawv thiab sim xaiv cov ntawv. Cov kev ua no yuav tsum tshwm sim hauv nplooj ntawv, tsis yog rub lub qhov rais.
Tshawb xyuas thaj tsam system: hloov qhov loj ntawm lub qhov rais, sim hom phóng to thiab tshawb xyuas thaj tsam ze cov khawm system. Logo, title thiab khawm ntawm daim ntawv thov yuav tsum tsis raug npog.
Tshawb xyuas fallback: qhib tib URL hauv tab ib txwm lossis ib puag ncig uas tsis muaj Window Controls Overlay. Cov ntsiab lus tseem yuav tsum nyeem tau, cov kev tswj tseem yuav tsum siv tau thiab thaj tsam saum nplooj ntawv yuav tsum tsis ua rau zoo li thaj tsam rub qhov rais.

Yog tias qhov kev kuaj thawj zaug rub tsis tau lub qhov rais, tsis txhob kho xim lossis qhov loj ua ntej. Ua ntej txiav txim seb daim ntawv thov puas tau nruab tiag, puas tau rov nyeem manifest thiab puas muaj API.

Kho teeb meem raws li qhov tsos ntawm qhov yuam kev

Title bar rub tsis tau

Tshawb xyuas tias koj tab tom qhib lub qhov rais PWA uas tau nruab lawm, tsis yog URL hauv tab.
Tshawb xyuas tias manifest muaj window-controls-overlay, muaj standalone ua qhov kev xaiv hloov chaw thiab tau txuas los ntawm nplooj ntawv tam sim no.
Tshawb xyuas kom DevTools tsis qhia CSS syntax error lossis stylesheet loading error.
Tshawb xyuas tias thaj tsam yuav rub tsis raug ib qho element npog thiab tsis raug siv window-drag: none ntxiv yam tsis tau npaj siab.
Tshawb xyuas tias browser puas muab navigator.windowControlsOverlay thiab muaj display state uas haum. Yog tsis muaj, qhov rub tsis tau yuav yog fallback uas ua haujlwm raug, tsis yog CSS yuam kev.

Khawm lossis thawv sau ntawv raug rub es tsis txais kev siv

Teeb window-drag: none ncaj qha rau cov element uas txais kev sib cuag. Yog title bar muaj ntau hom control, koj siv tau txoj cai nram qab no:

.titlebar-content button,
.titlebar-content input,
.titlebar-content select,
.titlebar-content textarea,
.titlebar-content a,
.titlebar-content label {
  window-drag: none;
}

Tsis txhob tsuas tshem khawm tawm xwb thiab tsis quav ntsej label uas nyob ib ncig ntawm thawv sau ntawv lossis element uas npog lub control. Tom qab kho CSS, rov thauj lub qhov rais PWA thiab kuaj ob qho kev siv nas thiab keyboard.

Cov ntsiab lus raug khawm kaw lossis khawm phóng to npog

Tsis txhob muab logo lossis khawm ntawm daim ntawv thov tso ruaj rau ntawm kaum sab saud yam tsis suav title bar daim duab plaub. Tshawb xyuas tus nqi rect uas tau sau rau hauv Console, muab piv rau qhov chaw tiag tiag ntawm cov ntsiab lus thiab kho qhov chaw seem. Yog tias layout siv RTL lossis muaj ntau lub monitor, kuj tshawb xyuas qhov kev taw qhia ntawm interface thiab qhov display scale tiag tiag.

Khiav tau hauv Chrome 152 tabsis siv tsis tau hauv lwm browser

Tsis txhob xav tias txhua browser txhawb tib property lossis API. Fallback nram qab no yuav tua thaj tsam rub thaum property tsis raug lees paub thiab tua qhov chaw seem tshwj xeeb rau overlay thaum overlay status yog false:

@supports not (window-drag: move) {
  .app-titlebar {
    window-drag: none;
  }
}

html[data-titlebar-overlay="false"] .app-titlebar {
  padding-block-start: 0;
}

Tsis txhob siv Pointer Events los ua qauv cuav rau kev txav qhov rais. Txoj kev ntawd tsuas txav cov ntsiab lus hauv viewport xwb, tsis txav lub qhov rais uas nyob qib operating system.

Kev siv tau yooj yim, kev ruaj ntseg thiab txoj kev thim rov qab

Khaws lub npe app, qhia meej tias app los ntawm qhov twg thiab kev taw qhia; ib qho interface uas yuav luag tsis muaj system title bar yuav ua rau tus neeg siv nyuaj cais thaj tsam web ntawm thaj tsam qhov rais.
Tsis txhob hloov tag nrho lub vijtsam ua thaj tsam rub. Tus neeg siv tseem yuav tsum xaiv tau ntawv, scroll tau cov ntsiab lus thiab siv keyboard tau.
Xyuas kom txhua lub pob thiab txhua lub npov sau muaj daim ntawv lo, keyboard order thiab focus state uas tsim nyog.
Ntsuam xyuas cov xwm txheej maximized, minimized, siv ntau lub vijtsam, siv qhov display scale loj thiab RTL yog tias app txhawb cov xwm txheej ntawd.
Tsuas khaws Window Controls Overlay yog tias qhov txiaj ntsig ntawm lub title bar uas kho tau tsim nyog rau kev sim ntawm cov operating system thiab browser uas yog hom phiaj.

Yog tias qhov feature ua rau muaj teeb meem lossis tswj nyuaj, txoj kev thim rov qab uas nyab xeeb yog rho tawm window-controls-overlay ntawm display_override, khaws display: "standalone" thiab teeb window-drag: none rau lub title bar. App tseem tuaj yeem khiav ua PWA standalone nrog HTML qauv thiab cov kev tswj ib txwm.

Koj tuaj yeem suav tias kev teeb tsa tiav thaum plaub yam no raug tag nrho: PWA tau nruab rau hauv desktop; thaj tsam khoob ntawm title bar txav tau qhov rais; cov pob thiab cov npov sau tseem ua haujlwm; cov ntsiab lus tsis raug thaj tsam system controls npog. Yog tsis tiav ib yam twg, rov qab mus xyuas manifest, installation state, thaj tsam uas cov ntsiab lus npog thiab cov cai window-drag: none.

Tsim ib tug PWA desktop title bar rub tau nrog `window-drag`