PWA'nızın daha çok bir uygulamaya benzemesi için pencere denetimlerinin yanındaki başlık çubuğu alanını kullanın.
PWA'nızın daha çok bir uygulamaya benzemesini sağlama başlıklı makalemi hatırlarsanız, uygulamaya benzer daha çok bir deneyim oluşturma stratejisi olarak uygulamanızın başlık çubuğunu özelleştirmeden nasıl bahsettiğimizi hatırlarsınız. macOS Podcasts uygulamasını gösterirken bunun nasıl görünebileceğine dair bir örneği burada bulabilirsiniz.
Platforma özgü bir macOS uygulaması olan Podcasts'in, tarayıcıda çalışmayan ve böylece tarayıcı kurallarına göre oynamak zorunda kalmadan istediğini yapabildiğini söyleyerek itiraz etmek isteyebilirsiniz. Doğru, ancak bu makalenin konusu olan Pencere Denetimleri Yer Paylaşımı özelliği, yakında PWA'nız için benzer kullanıcı arayüzleri oluşturmanıza olanak tanıyacak.
Pencere Denetimleri Yer paylaşımı bileşenleri
Pencere Denetimi Yer Paylaşımı dört alt özellikten oluşur:
- Web uygulaması manifestindeki
"display_override"alanı için"window-controls-overlay"değeri. - CSS ortam değişkenleri:
titlebar-area-x,titlebar-area-y,titlebar-area-widthvetitlebar-area-height. - Web içeriğinde sürüklenebilir bölgeleri tanımlamak için daha önce tescilli olan
-webkit-app-regionCSS mülkününapp-regionözelliği olarak standartlaştırılması. window.navigatoröğesininwindowControlsOverlayüyesi aracılığıyla pencere denetimleri bölgesini sorgulamak ve bölge üzerinde çalışmak için kullanılan bir mekanizma.
Pencere Denetimi Yer Paylaşımı nedir?
Başlık çubuğu alanı, pencere denetimlerinin solundaki veya sağındaki alanı (yani simge durumuna küçültme, ekranı kaplama, kapatma düğmeleri vb.) ifade eder ve genellikle uygulamanın başlığını içerir. Pencere Denetimleri Yer Paylaşımı, mevcut tam genişlikteki başlık çubuğunu pencere denetimlerini içeren küçük bir yer paylaşımıyla değiştirerek progresif web uygulamalarının (PWA'lar) daha fazla uygulama benzeri bir görünüm sunmasına olanak tanır. Bu, geliştiricilerin, önceden tarayıcı tarafından kontrol edilen başlık çubuğu alanına özel içerik yerleştirmesine olanak tanır.
Mevcut durum
| Adım | Durum |
|---|---|
| 1. Açıklayıcı oluşturun | Tamamlandı |
| 2. İlk spesifikasyon taslağını oluşturma | Tamamlandı |
| 3. Geri bildirim alma ve tasarımı yineleme | Devam ediyor |
| 4. Kaynak denemesi | Eksiksiz |
| 5. Lansman | Tamamlandı (Chromium 104'te) |
Pencere Denetimi Yer Paylaşımı nasıl kullanılır?
window-controls-overlay, web uygulaması manifest dosyasına ekleniyor
Progresif web uygulaması, web uygulaması manifest dosyasına birincil "display_override" üyesi olarak "window-controls-overlay" ekleyerek pencere kontrolleri yer paylaşımını etkinleştirebilir:
{
"display_override": ["window-controls-overlay"]
}
Pencere denetimleri yer paylaşımı, yalnızca aşağıdaki koşulların tümü karşılandığında görünür:
- Uygulama tarayıcıda açılmaz, bunun yerine ayrı bir PWA penceresinde açılır.
- Manifest,
"display_override": ["window-controls-overlay"]içeriyor. (Daha sonra diğer değerlere izin verilir.) - PWA, masaüstü işletim sisteminde çalışır.
- Mevcut kaynak, PWA'nın yüklendiği kaynakla eşleşiyor.
Bunun sonucunda, işletim sistemine bağlı olarak sol veya sağ tarafta normal pencere denetimlerinin bulunduğu boş bir başlık çubuğu alanı oluşur.
Başlık çubuğuna içerik taşıma
Başlık çubuğunda artık yer olduğuna göre, öğeleri oraya taşıyabilirsiniz. Bu makale için bir Wikimedia Öne Çıkan İçerik PWA'sı oluşturdum. Bu uygulama için yararlı bir özellik, makale başlıklarındaki kelimeleri aramak olabilir. Arama özelliğinin HTML'si şu şekilde 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ğunun üstüne taşımak için biraz CSS 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);
}
Aşağıdaki ekran görüntüsünde bu kodun etkisini görebilirsiniz. Başlık çubuğu tamamen duyarlı. PWA penceresini yeniden boyutlandırdığınızda, başlık çubuğu normal HTML içeriğinden oluşturulmuş gibi tepki verir ve aslında bu şekildedir.
Başlık çubuğunun hangi bölümlerinin sürüklenebilir olduğunu belirleme
Yukarıdaki ekran görüntüsünde işiniz bitmiş olsa da henüz işiniz bitmedi. Pencere denetimi düğmeleri sürükleme alanı olmadığı ve başlık çubuğunun geri kalanı arama widget'ından oluştuğu için PWA penceresi artık (çok küçük bir alanın dışında) sürüklenemiyor. drag değerine sahip app-region CSS özelliğini kullanarak bu sorunu düzeltin. Somut örnekte, input öğesi dışındaki her şeyi sürüklenebilir hale getirmekte bir sakınca yoktur.
/* 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 yerleştirildiğinde kullanıcı div, img veya label öğelerini sürükleyerek uygulama penceresini her zamanki gibi sürükleyebilir. Yalnızca input öğesi etkileşimli olduğundan arama sorgusunun girilebilmesi.
Özellik algılama
Pencere Denetimi Yer Paylaşımı desteği, windowControlsOverlay öğesinin varlığı test edilerek tespit edilebilir:
if ('windowControlsOverlay' in navigator) {
// Window Controls Overlay is supported.
}
Pencere kontrolleri bölgesini windowControlsOverlay ile sorgulama
Kodda şu ana kadar bir sorun var: Pencere denetimleri bazı platformlarda sağda, bazılarında ise soldadır. Daha da kötüsü, "üç nokta" Chrome menüsünün konumu platforma göre değişir. Bu, doğrusal gradyan arka plan resminin #131313→maroon veya maroon→#131313→maroon arasında çalışacak şekilde dinamik olarak uyarlanması ve böylece başlık çubuğunun <meta name="theme-color" content="maroon"> ile belirlenen maroon arka plan rengiyle uyumlu hale gelmesi gerektiği anlamına gelir. Bu, navigator.windowControlsOverlay özelliğinde getTitlebarAreaRect() API'nin sorgulanmasıyla gerçekleştirilebilir.
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');
}
Değiştirilen kod, arka plan resmini doğrudan .search sınıfı CSS kurallarında (önceden olduğu gibi) bulundurmak yerine artık yukarıdaki kodun dinamik olarak ayarladığı iki sınıf kullanıyor.
/* 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 kontrolleri yer paylaşımının görünür olup olmadığı belirleniyor
Pencere denetimi yer paylaşımı, her durumda başlık çubuğu alanında görünmez. Pencere Denetimleri Yer Paylaşımı özelliğini desteklemeyen tarayıcılarda doğal olarak bulunmayacak olsa da söz konusu PWA bir sekmede çalıştırıldığında orada olmayacaktır. Bu durumu tespit etmek için windowControlsOverlay öğesinin visible özelliğini sorgulayabilirsiniz:
if (navigator.windowControlsOverlay.visible) {
// The window controls overlay is visible in the title bar area.
}
Alternatif olarak, display-mode medya sorgusunu JavaScript ve/veya CSS'de de 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 yer paylaşımı alanını getTitlebarAreaRect() ile sorgulamak, pencere denetimlerinin bulunduğu yere göre doğru arka plan resmini ayarlamak gibi tek seferlik işler için yeterli olabilir. Ancak diğer durumlarda daha ayrıntılı kontrol gereklidir. Örneğin, pencere denetimi yer paylaşımını mevcut alana göre uyarlamak ve yeterli alan olduğunda pencere kontrolü yer paylaşımına bir espri eklemek, olası bir kullanım alanı olabilir.
navigator.windowControlsOverlay.ongeometrychange ürününe abone olarak veya geometrychange etkinliği için bir etkinlik işleyici oluşturarak geometri değişikliklerinden haberdar olabilirsiniz. Bu etkinlik yalnızca pencere denetimi yer paylaşımı görünür olduğunda, yani navigator.windowControlsOverlay.visible değeri true olduğunda tetiklenir.
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 öğesine bir işlev atamak yerine, aşağıdaki gibi windowControlsOverlay öğesine bir etkinlik işleyici de ekleyebilirsiniz. İkisi arasındaki farkı MDN'de okuyabilirsiniz.
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:
- Bir uygulamanın, Pencere Denetimleri Yer Paylaşımı'nı destekleyen bir tarayıcıda çalıştırıldığı ancak uygulamanın tarayıcı sekmesinde kullanıldığı durum.
- Bir uygulamanın, pencere denetimleri yer paylaşımını desteklemeyen bir tarayıcıda çalıştırıldığı durum.
Her iki durumda da, varsayılan olarak pencere denetimi yer paylaşımı için oluşturulan HTML, satır içi olarak normal HTML içeriği gibi görüntülenir ve env() değişkenlerinin yedek değerleri konumlandırma için devreye girer. Destekleyen tarayıcılarda, yer paylaşımının visible özelliğini kontrol ederek ve false değerini bildiriyorsa bu HTML içeriğini gizleyerek pencere denetimi yer paylaşımı için belirlenen HTML'yi görüntülememeye karar verebilirsiniz.
Destek vermeyen tarayıcıların ya "display_override" web uygulaması manifest özelliğini hiç dikkate almayacağını ya da "window-controls-overlay" özelliğini tanımayacağını ve bu nedenle yedek zincirine göre sonraki olası değeri (ör. "standalone") kullanacağını hatırlatmak isteriz.
Kullanıcı arayüzüyle ilgili dikkat edilmesi gereken noktalar
Çok cazip görünse de, Pencere Denetimleri Yer Paylaşımı alanında klasik bir açılır menü oluşturmanız önerilmez. Bunu yapmak, kullanıcıların ekranın üst kısmında menü çubukları (hem sistem tarafından sağlananlar hem de özel olanlar) beklediği bir platform olan macOS'teki tasarım yönergelerini ihlal eder.
Uygulamanız tam ekran deneyimi sunuyorsa Pencere Denetimleri Yer Paylaşımınızın tam ekran görünümünün bir parçası olmasının mantıklı olup olmayacağını dikkatle değerlendirin. onfullscreenchange etkinliği etkinleştiğinde düzeninizi yeniden düzenlemek isteyebilirsiniz.
Demografi
Oluşturduğunuz demo ile, desteklenen ve desteklenmeyen farklı tarayıcılarda, yüklü ve yüklü değil durumunda oynayabilirsiniz. Pencere Denetimleri Yer Paylaşımı deneyimi için uygulamayı yüklemeniz gerekir. Aşağıda iki ekran görüntüsü verilmiştir. Uygulamanın kaynak kodu Glitch'te mevcuttur.
Pencere denetimi 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 Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan (kullanıcı kontrolü, şeffaflık ve ergonomi) temel ilkeleri kullanarak tasarladı ve uyguladı.
Adres sahteciliği
Sitelere başlık çubuğunun kısmen denetlenmesini sağlamak, geliştiricilere daha önce güvenilir, tarayıcı kontrolündeki bir bölgede sahtecilik yapmalarına imkan tanır. Şu anda Chromium tarayıcılarda bağımsız modda, ilk başlatma sırasında solda web sayfasının başlığını ve sağda sayfanın kaynağını (ardından "ayarlar ve daha fazlası" düğmesi ile pencere denetimlerinin ardından) görüntüleyen bir başlık çubuğu bulunur. Birkaç saniye sonra kaynak metin kaybolur. Tarayıcı sağdan sola (RTL) bir dile ayarlanırsa bu düzen, kaynak metin solda kalacak şekilde çevrilir. Yer paylaşımının başlangıç noktası ile sağ kenarı arasında yeterli dolgu olmaması durumunda, bu işlem, kaynağı taklit etmek için pencere denetimi yer paylaşımını açar. Örneğin, "evil.ltd" kaynağına "google.com" güvenilir bir site eklenebilir. Bu da kullanıcıların kaynağın güvenilir olduğuna inanmasını sağlar. Plan, bu kaynak metni, kullanıcıların uygulamanın kaynağının ne olduğunu bilmeleri ve beklentileriyle eşleşmesini sağlamak için saklamaktır. RTL ile yapılandırılmış tarayıcılarda, kötü amaçlı bir web sitesinin güvenilir bir kaynağa güvenli olmayan kaynak eklemesini önlemek için kaynak metnin sağ tarafında yeterli dolgu bulunmalıdır.
Dijital Parmak İzi
Pencere denetimi yer paylaşımının ve sürüklenebilir bölgelerin etkinleştirilmesi, özellik algılama dışında önemli gizlilik endişeleri doğurmaz. Ancak, pencere denetimi düğmelerinin işletim sistemlerindeki farklı boyut ve konumları nedeniyle navigator. yöntemi, konumu ve boyutları tarayıcının üzerinde çalıştığı işletim sistemi hakkında bilgi veren bir DOMRect döndürür. Şu anda geliştiriciler, işletim sistemini kullanıcı aracısı dizesinden zaten keşfedebilmektedir. Ancak, dijital parmak izi alma konusundaki endişeler nedeniyle, UA dizesini dondurma ve OS sürümlerini birleştirme konularında tartışmalar yapılmaktadır. Tarayıcı topluluğunda, pencere denetimlerinin farklı platformlarda ne sıklıkla değişiklik gösterdiğini anlamak için çalışmalar yürütülüyor. Şu anki varsayım, bunların işletim sistemi sürümlerinde oldukça istikrarlı olduğu ve dolayısıyla küçük işletim sistemi sürümlerinin gözlemlenmesinde işe yaramayacağı varsayılır. Bu olası bir parmak izi sorunu olsa da, yalnızca özel başlık çubuğu özelliğini kullanan yüklü PWA'lar için geçerlidir ve genel tarayıcı kullanımı için geçerli değildir. Ayrıca navigator. API, PWA içine yerleştirilmiş iframe'ler tarafından kullanılamaz.
Gezinme
Bir PWA içinde farklı bir kaynağa gitmek, yukarıdaki ölçütleri karşılasa ve pencere denetimi yer paylaşımıyla başlatılmış olsa bile normal bağımsız başlık çubuğuna dönmesine neden olur. Bunun amacı, farklı bir kaynağa giderken görüntülenen siyah çubuğu yerleştirmektir. Orijinal kaynağa geri gidildiğinde pencere denetimi yer paylaşımı tekrar kullanılır.
Geri bildirim
Chromium ekibi, Window Controls Overlay API ile ilgili deneyimlerinizi öğrenmek istemektedir.
Bize API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var? İlgili GitHub deposuna özellik sorunu bildiriminde bulunun veya mevcut bir soruna düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorunu bildirin
Chromium'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
new.crbug.com adresinde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve yeniden oluşturmaya ilişkin basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna UI>Browser>WebAppInstalls yazın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.
API'ye desteği gösterin
Window Controls Overlay API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri öncelik sırasına koymasına yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.
#WindowControlsOverlay hashtag'ini içeren bir tweet'i @ChromiumDev adresine göndererek etiketi nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
- Açıklayıcı
- Spesifikasyon taslağı
- Chromium hatası
- Chrome Platform Durum girişi
- TAG incelemesi
- Microsoft Edge'in ilgili belgeleri
Teşekkür
Pencere Denetimleri Yer Paylaşımı, Microsoft Edge ekibi tarafından Amanda Baker tarafından uygulanmış ve belirtilmiştir. Bu makale Joe Medley ve Kenneth Rohde Christiansen tarafından incelenmiştir. Sigmund'un Unsplash'teki lokomotif resmi.