PWA'nızın başlık çubuğunun pencere kontrolleri yer paylaşımını özelleştirin

PWA'nızın uygulamaya daha çok benzemesi için pencere kontrollerinin yanındaki başlık çubuğu alanını kullanın.

Amanda Baker

Thomas Steiner

PWA'nızın uygulamaya daha çok benzemesi başlıklı makalemi hatırlarsanız uygulamanızın başlık çubuğunu özelleştirmenizden strateji geliştirmeyi öğreneceksiniz. Aşağıda, bunun nasıl görünebileceğine dair bir örnek verilmiştir. macOS Podcasts uygulaması gösteriliyor.

Podcasts'in platforma özgü bir macOS uygulaması olduğunu söyleyerek itiraz edebilirsiniz. tarayıcı içinde çalıştırılamaz ve bu nedenle tarayıcının kodu ile oynamak zorunda kalmadan istediklerini yapabilir. kurallar. Doğru, ancak bu seferki konu olan Pencere Denetimi Yer Paylaşımı özelliğinin yakında PWA'nız için benzer kullanıcı arayüzleri oluşturmanıza olanak tanıyacak.

Pencere Denetimi Yer Paylaşımı bileşenleri

Pencere Denetimi Yer Paylaşımı, dört alt özellikten oluşur:

1. "display_override" alanı için "window-controls-overlay" değeri web uygulaması manifest'ini açın.
2. CSS ortam değişkenleri titlebar-area-x, titlebar-area-y, titlebar-area-width ve titlebar-area-height.
3. Daha önce tescilli CSS mülkünün (-webkit-app-region) app-region özelliğini kullanarak web içeriğinde sürüklenebilir bölgeleri tanımlayabilirsiniz.
4. Pencere denetimleri bölgesini sorgulamak ve bu alanda çözüm bulmak için windowControlsOverlay window.navigator üyesi.

Pencere Denetimi Yer Paylaşımı nedir

Başlık çubuğu alanı, pencere denetimlerinin (yani (ör. küçültme, büyütme, kapatma vb.) tıklayın ve genellikle uygulamanın başlığını içerir. Pencere Controls Overlay, progresif web uygulamalarının (PWA'lar) mobil uygulama gibi küçük bir yer paylaşımı için mevcut tam genişlikte başlık çubuğu. Bu da Geliştiricilerin daha önce tarayıcı tarafından kontrol edilen başlık çubuğu alanına özel içerik yerleştirmelerini sağladı.

Mevcut durum

Pencere denetimi yer paylaşımı nasıl kullanılır?

window-controls-overlay, web uygulaması manifest dosyasına ekleniyor

Progresif web uygulamaları, Web uygulaması manifest dosyasında birincil "display_override" üyesi olarak "window-controls-overlay":

{
  "display_override": ["window-controls-overlay"]
}

Pencere denetimi yer paylaşımı, yalnızca aşağıdaki koşulların tümü karşılandığında görünür:

1. Uygulama tarayıcıda değil, ayrı bir PWA penceresinde açılır.
2. Manifest dosyası "display_override": ["window-controls-overlay"] içeriyor. (Diğer değerler izin verilir.)
3. PWA, masaüstü işletim sisteminde çalışıyor.
4. Mevcut kaynak, PWA'nın yüklendiği kaynakla eşleşiyor.

Bunun sonucunda, sol tarafta normal pencere denetimleri bulunan boş bir başlık çubuğu alanı uygun olabilir.

İçerikleri başlık çubuğuna taşıma

Artık başlık çubuğunda alan olduğuna göre öğeyi oraya taşıyabilirsiniz. Bu makalede, Wikimedia Öne Çıkan İçerik PWA geliştirdi. Bu uygulama için yararlı bir özellik, daha iyi olur. Arama özelliğinin HTML'si şöyle görünür:

<div class="search">
  <img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
  <label>
    <input type="search" />
    Search for words in articles
  </label>
</div>

Bu div öğesini başlık çubuğuna yukarı taşımak için bazı CSS öğeleri gerekir:

.search {
  /* Make sure the `div` stays there, even when scrolling. */
  position: fixed;
  /**
   * Gradient, because why not. Endless opportunities.
   * The gradient ends in `#36c`, which happens to be the app's
   * `<meta name="theme-color" content="#36c">`.
   */
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
  /* Use the environment variable for the left anchoring with a fallback. */
  left: env(titlebar-area-x, 0);
  /* Use the environment variable for the top anchoring with a fallback. */
  top: env(titlebar-area-y, 0);
  /* Use the environment variable for setting the width with a fallback. */
  width: env(titlebar-area-width, 100%);
  /* Use the environment variable for setting the height with a fallback. */
  height: env(titlebar-area-height, 33px);
}

Bu kodun etkisini aşağıdaki ekran görüntüsünde görebilirsiniz. Başlık çubuğu tamamen duyarlıdır. Zaman PWA penceresini yeniden boyutlandırırsanız başlık çubuğu normal HTML içeriğinden oluşuyormuş gibi tepki verir ve sanırım öyle.

Başlık çubuğunun hangi bölümlerinin sürüklenebilir olduğunu belirleme

Yukarıdaki ekran görüntüsü işin bittiğini belirtse de henüz işiniz daha bitmedi. PWA (Progresif Web Uygulaması) penceresi çok küçük bir alanın dışında, pencere denetimleri düğmeleri sürüklenmediğinden, artık sürüklenemez ve başlık çubuğunun geri kalanı arama widget'ından oluşur. Bunu şunu kullanarak düzelt: drag değerine sahip app-region CSS özelliği. Somut örnekte, input öğesi dışındaki her şey sürüklenebilir.

/* The entire search `div` is draggable… */
.search {
  -webkit-app-region: drag;
  app-region: drag;
}

/* …except for the `input`. */
input {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

Bu CSS yerine, kullanıcı div, img ve veya label. Yalnızca input öğesi etkileşimli olduğundan arama sorgusu girilebilir.

Özellik algılama

Pencere denetimi yer paylaşımı desteği, windowControlsOverlay:

if ('windowControlsOverlay' in navigator) {
  // Window Controls Overlay is supported.
}

Pencere denetimleri bölgesini windowControlsOverlay ile sorgulama

Kodda şu ana kadar tek bir sorun var: Bazı platformlarda pencere denetimleri sağda, diğerlerini görürsünüz. Daha da kötüsü, "üç nokta" vardır. Chrome menüsü değişecek duruma göre de değiştirebilirsiniz. Bu, doğrusal gradyan arka plan resminin #131313→maroon veya maroon→#131313→maroon yönlerden çalışacak şekilde dinamik olarak uyarlanabilir. başlık çubuğunun maroon arka plan rengiyle uyumlu hale gelir. Bu renk, <meta name="theme-color" content="maroon">. Bu, navigator.windowControlsOverlay mülkünde getTitlebarAreaRect() API.

if ('windowControlsOverlay' in navigator) {
  const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
  // Window controls are on the right (like on Windows).
  // Chrome menu is left of the window controls.
  // [ windowControlsOverlay___________________ […] [_] [■] [X] ]
  if (x === 0) {
    div.classList.add('search-controls-right');
  }
  // Window controls are on the left (like on macOS).
  // Chrome menu is right of the window controls overlay.
  // [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
  else {
    div.classList.add('search-controls-left');
  }
} else {
  // When running in a non-supporting browser tab.
  div.classList.add('search-controls-right');
}

Arka plan resmini doğrudan .search sınıfı CSS kurallarında (önceden olduğu gibi) kullanmak yerine, Değiştirilmiş kod artık yukarıdaki kodun dinamik olarak ayarladığı iki sınıf kullanmaktadır.

/* For macOS: */
.search-controls-left {
  background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
}

/* For Windows: */
.search-controls-right {
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
}

Pencere denetimi yer paylaşımının görünür olup olmadığı belirleniyor

Pencere denetimi yer paylaşımı, başlık çubuğu alanında her durumda görünmez. Bu sırada doğal olarak pencere denetimi yer paylaşımı özelliğini desteklemeyen tarayıcılarda bulunmayacağından, Söz konusu PWA bir sekmede çalıştırıldığında da orada olmayacaktır. Bu durumu tespit etmek için şunları yapabilirsiniz: windowControlsOverlay öğesinin visible özelliğini sorgula:

if (navigator.windowControlsOverlay.visible) {
  // The window controls overlay is visible in the title bar area.
}

Alternatif olarak, JavaScript ve/veya CSS'de display-mode medya sorgusunu da kullanabilirsiniz:

// Create the query list.
const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');

// Define a callback function for the event listener.
function handleDisplayModeChange(mql) {
  // React on display mode changes.
}

// Run the display mode change handler once.
handleDisplayChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener('change', handleDisplayModeChange);

@media (display-mode: window-controls-overlay) { 
  /* React on display mode changes. */ 
}

Geometri değişiklikleriyle ilgili bildirim alma

Pencere denetimi bindirme alanını getTitlebarAreaRect() ile sorgulamak tek seferlik yeterli olabilir gibi şeylere göz atabiliriz. Ancak pencere denetimlerinin yerine doğru arka plan resmini diğer durumlarda ise daha hassas bir kontrol süreci gerekir. Örneğin, ekip üyeleri için pencere denetimi yer paylaşımını, kullanılabilir alana göre uyarlayın ve doğrudan pencereye bir espri ekleyin kontrol yer paylaşımını kullanabilirsiniz.

Şuna abone olarak geometrideki değişiklikler hakkında bildirim alabilirsiniz: navigator.windowControlsOverlay.ongeometrychange veya geometrychange etkinliği. Bu etkinlik yalnızca pencere denetimi yer paylaşımı görünür olduğunda tetiklenir. navigator.windowControlsOverlay.visible, true olduğunda.

const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

if ('windowControlsOverlay' in navigator) {
  navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250);
}

ongeometrychange işlevine bir işlev atamak yerine, şunlara da bir etkinlik işleyici ekleyebilirsiniz: windowControlsOverlay olarak ayarlayın. İkisi arasındaki farkı şu sayfada bulabilirsiniz: MDN.

navigator.windowControlsOverlay.addEventListener(
  'geometrychange',
  debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250),
);

Bir sekmede ve desteklenmeyen tarayıcılarda çalışırken uyumluluk

Göz önünde bulundurulması gereken iki olası durum vardır:

• Uygulamanın Window Controls Overlay'i destekleyen bir tarayıcıda çalıştığı, ancak tarayıcı sekmesinde kullanılıyor.
• Uygulamanın, pencere denetimi yer paylaşımını desteklemeyen bir tarayıcıda çalıştığı durum.

Her iki durumda da, varsayılan olarak pencere denetimleri için oluşturulan HTML yer paylaşımı, normal HTML içeriği ve env() değişkenlerinin yedek değerler devreye girer. Desteklenen tarayıcılarda Yer paylaşımının visible özelliği kontrol edilerek pencere denetimi yer paylaşımı için atanan HTML ve false bildiriyor ve ardından bu HTML içeriğini gizliyor.

Desteklenmeyen tarayıcıların da "display_override" web uygulaması manifest mülkünü hiç bilmiyor veya "window-controls-overlay" olarak belirlenen ve bu nedenle yedek zincirine göre sonraki olası değeri kullanır. örneğin, "standalone".

Kullanıcı arayüzü ile ilgili dikkat edilmesi gereken noktalar

Çok cazip görünse de, Pencere Denetimi Yer Paylaşımı alanında klasik bir açılır menü oluşturmanız önerilmez. Aksi takdirde macOS'teki tasarım yönergelerini Kullanıcıların menü çubukları (hem sistem tarafından sağlananlar hem de özel olanları görürsünüz.

Uygulamanız tam ekran deneyimi sunuyorsa bunun mantıklı olup olmadığını dikkatlice düşünün. Pencere Denetimi Yer Paylaşımınızın tam ekran görünümünün parçası olmasını sağlayın. Potansiyel olarak değiştirildikten sonra düzeninizi onfullscreenchange olduğunu unutmayın.

Demo

Şu anda oynayabileceğiniz bir demo oluşturdum. desteklenen ve desteklemeyen farklı tarayıcılarda, ayrıca yüklü ve yüklü olmayan durumlarda da gösterilir. Örneğin, gerçek Window Controls Overlay deneyimini yaşamak için uygulamayı yüklemeniz gerekir. Sürecin işleyişiyle ilgili iki ekran görüntüsünü aşağıda bulabilirsiniz. İlgili içeriği oluşturmak için kullanılan uygulamanın kaynak kodu Glitch'te mevcuttur.

Pencere denetimleri yer paylaşımındaki arama özelliği tamamen işlevseldir:

Güvenlikle ilgili olarak göz önünde bulundurulması gerekenler

Chromium ekibi, Window Controls Overlay API'yi temel ilkeleri kullanarak tasarlayıp uyguladı Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve ergonomi.

Adres sahteciliği

Sitelere başlık çubuğunun kısmen kontrol edilmesi, geliştiricilerin içerikte kopyalanmasına olanak tanır. önceden tarayıcı tarafından kontrol edilen güvenilir bir bölgeydi. Şu anda Chromium tarayıcılarda, modda, ilk başlatma sırasında solda web sayfasının başlığı görüntüleyen bir başlık çubuğu ve sayfanın sağ tarafta kaynağı (ardından "ayarlar ve daha fazlası" düğmesi ve pencere kontrollerinde bulunur). Birkaç saniye sonra kaynak metin kaybolur. Tarayıcı sağdan sola olarak ayarlanmışsa (RTL) dilindeyse bu düzen, kaynak metin solda kalacak şekilde ters çevrilmiştir. Bu, kaynak ve kaynak arasında yeterli dolgu yoksa pencere denetimi, kaynağı taklit etmek için yer paylaşımı yapar sağ kenarını zorlayın. Örneğin, kaynak "evil.ltd" güvenilir bir ile eklenebilir "google.com" gibi bir web sitesini ziyaret ederek kullanıcıları kaynağın güvenilir olduğuna inandırmaya çalışır. Plan, bunu Böylece kullanıcılar uygulamanın kaynağının ne olduğunu öğrenip uygulamanın kendi uygulamalarıyla eşleştiğinden emin olabilirler. emin olmanız gerekir. RTL yapılandırılmış tarayıcılar için kaynağın sağında yeterli dolgu olmalıdır kötü amaçlı bir web sitesinin, güvenli olmayan kaynağı güvenilir bir kaynakla eklemesini engelleyen bir metin.

Dijital parmak izi

Pencere denetimleri yer paylaşımı ve sürüklenebilir bölgeler etkinleştirildiğinde poz verilmez gizlilikle ilgili önemli endişeleri olduğunu lütfen unutmayın. Ancak, çalışma sırasında pencere kontrol düğmelerinin farklı boyutları ve konumlarında için genellikle navigator.windowControlsOverlay.getTitlebarAreaRect(). yöntemi bir DOMRect değeri döndürür konumu ve boyutları, işletim sistemi hakkında bilgi veren Tarayıcının çalıştırdığı SDK'yı kullanın. Şu anda geliştiriciler işletim sistemini zaten ancak dijital parmak iziyle ilgili endişeler nedeniyle UA dizesini dondurma ve işletim sistemi sürümlerini birleştirme hakkında bir tartışma. Bir web sitesinin hangi cihazlarda ne sıklıkta tarandığını anlamak için boyut denetimlerinin platformlar genelindeki bindirme değişikliklerine bunların OS sürümleri genelinde oldukça kararlı olduğu ve bu nedenle küçük işletim sistemi sürümlerini gözlemlemek için yararlı olabilir. Bu potansiyel bir risk olsa da Bu sorun yalnızca özel başlık çubuğu özelliğine sahiptir ve genel tarayıcı kullanımı için geçerli değildir. Ayrıca, navigator.windowControlsOverlay API, PWA'nın içine yerleştirilmiş iframe'ler.

Gezinme

PWA içinde farklı bir kaynağa gitmek, PWA'nın normal bağımsız sürümüne dönmesine neden olur başlık çubuğuna otomatik olarak eklenir. Bunun amacı, farklı bir noktaya gidildiğinde görünen siyah çubuğun yerleştirilmesidir. Şu tarihten sonra: orijinal kaynağa geri dönerseniz, pencere denetimleri yer paylaşımı tekrar kullanılır.

Geri bildirim

Chromium ekibi, Window Controls Overlay API ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi neden olabilir.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın. oluşturmaya ilişkin basit talimatları uygulayın ve Bileşenler alanına UI>Browser>WebAppInstalls yazın. seçin. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

Window Controls Overlay API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chromium ekibine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bunları desteklemenin ne kadar önemli olduğunu gösterir.

@ChromiumDev adresine Tweet göndermek için şu e-posta adresini kullanın: #WindowControlsOverlay hashtag'ini ekleyin ve bunu nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• Açıklayıcı
• Spesifikasyon taslağı
• Chromium hatası
• Chrome Platform Durumu girişi
• TAG incelemesi
• Microsoft Edge'in ilgili belgeleri

Teşekkür

Pencere Denetimi Yer Paylaşımı uygulandı ve belirtilmiş Microsoft Edge ekibinden Amanda Baker. Bu makale Joe Medley ve Kenneth Rohde Christiansen Hero görseli Unsplash'teki Sigmund adlı şarkısı.