PWA'nızın uygulamaya daha çok benzemesi için pencere kontrollerinin yanındaki başlık çubuğu alanını kullanın.
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:
"display_override"
alanı için"window-controls-overlay"
değeri web uygulaması manifest'ini açın.- CSS ortam değişkenleri
titlebar-area-x
,titlebar-area-y
,titlebar-area-width
vetitlebar-area-height
. - 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. - 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
Step | Durum |
---|---|
1. Açıklayıcı oluşturun | Tamamlandı |
2. İlk spesifikasyon taslağını oluşturun | Tamamlandı |
3. Geri bildirim toplama tasarımı yineleyin | Devam ediyor |
4. Kaynak denemesi | Tamamlandı |
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 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:
- Uygulama tarayıcıda değil, ayrı bir PWA penceresinde açılır.
- Manifest dosyası
"display_override": ["window-controls-overlay"]
içeriyor. (Diğer değerler izin verilir.) - PWA, masaüstü işletim sisteminde çalışıyor.
- 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.
.
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.
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ı.