Pencere yönetimi

Tarayıcı dışındaki bir PWA kendi penceresini yönetir. Bu bölümde, işletim sistemi içinde pencere yönetmeyle ilgili API'ler ve özellikler hakkında bilgi edineceksiniz.

PWA penceresi

PWA'nız tarafından yönetilen kendi pencerenizde çalıştırılan uygulama, ilgili işletim sistemindeki tüm pencerelerin avantaj ve sorumluluklarına sahiptir. Örneğin:

• Windows veya ChromeOS gibi çok pencereli işletim sistemlerinde pencereyi yeniden boyutlandırma ve taşıma olanağı.
• iPadOS bölünmüş modu veya Android bölünmüş ekran modunda olduğu gibi ekranı diğer uygulama pencereleriyle paylaşma.
• Masaüstünde sabitleme alanlarında, görev çubuklarında ve alt sekme menüsünde, mobil cihazlarda ise çoklu görev penceresi listelerinde gösterilir.
• Pencereyi küçültme, ekranlar ve masaüstü bilgisayarlar arasında taşıma ve istediğiniz zaman kapatma olanağı

Pencereyi taşıma ve yeniden boyutlandırma

PWA pencereniz herhangi bir boyutta olabilir ve masaüstü işletim sistemlerinde ekranın herhangi bir yerine yerleştirilebilir. Varsayılan olarak, kullanıcı yükleme işleminden sonra PWA'yı ilk kez açtığında PWA, mevcut ekranın yüzdelik bir kısmına sahip varsayılan bir pencere boyutu alır. Bu pencerenin maksimum çözünürlüğü 1920x1080'dir ve ekranın sol üst köşesinde yer alır.

Kullanıcı pencereyi taşıyabilir ve yeniden boyutlandırabilir. Tarayıcı son tercihi hatırlar. Böylece kullanıcı uygulamayı bir sonraki sefer açtığında pencere, önceki kullanımdaki boyutu ve konumu korur.

PWA'nızın tercih edilen boyutunu ve konumunu manifest dosyasında tanımlayamazsınız. Pencereyi yalnızca JavaScript API'yi kullanarak yeniden konumlandırabilir ve yeniden boyutlandırabilirsiniz. window nesnesinin moveTo(x, y) ve resizeTo(x, y) işlevlerini kullanarak kodunuzdan kendi PWA pencerenizi taşıyabilir ve yeniden boyutlandırabilirsiniz.

Örneğin, PWA yüklendiğinde şunları kullanarak PWA pencerenizi yeniden boyutlandırıp taşıyabilirsiniz:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

window.screen nesnesini kullanarak geçerli ekran boyutunu ve konumunu sorgulayabilirsiniz. Pencerenin ne zaman yeniden boyutlandırıldığını window nesnesindeki resize etkinliğini kullanarak algılayabilirsiniz. Pencere hareketini yakalamak için herhangi bir etkinlik olmadığından, seçeneğiniz konumu sık sık sorgulamaktır.

Diğer sitelere göz atma

Kullanıcıyı PWA'nızın kapsamı dışında olan harici bir siteye yönlendirmek istiyorsanız bu işlemi standart bir <a href> HTML öğesiyle, location.href kullanarak veya uyumlu platformlarda yeni pencere açarak yapabilirsiniz.

Şu anda tüm tarayıcılarda, PWA'nız yüklüyse manifestinizin kapsamı dışındaki bir URL'ye göz attığınızda PWA'nızın tarayıcı motoru, uygulama içi tarayıcıyı pencerenizin bağlamında oluşturur.

Uygulama içi tarayıcıların bazı özellikleri şunlardır:

• Bu reklamlar içeriğinizin üzerinde görünür.
• Bu sayfalarda mevcut başlangıç noktasını, pencerenin başlığını ve bir menüyü gösteren statik bir URL çubuğu bulunur. Bunlar genellikle manifest dosyanızdaki theme_color ile tanımlanır.
• İçerik menüsünden bu URL'yi tarayıcıda açabilirsiniz.
• Kullanıcılar tarayıcıyı kapatabilir veya geri dönebilir.

Yetkilendirme akışları

Birçok web kimlik doğrulama ve yetkilendirme akışında, kullanıcıyı farklı bir kaynaktaki farklı bir URL'ye yönlendirerek PWA'nızın kaynağına dönecek bir jeton edinme işlemi (ör. OAuth 2.0 kullanımı) yer alır.

Bu durumlarda, uygulama içi tarayıcı aşağıdaki süreci izler:

1. Kullanıcı PWA'nızı açar ve giriş yapmayı tıklar.
2. PWA'nız, kullanıcıyı PWA'nın kapsamı dışındaki bir URL'ye yönlendirir. Böylece oluşturma motoru, PWA'nızda bir uygulama içi tarayıcı açar.
3. Kullanıcı, uygulama içi tarayıcıyı iptal edip istediği zaman PWA'nıza geri dönebilir.
4. Kullanıcı uygulama içi tarayıcıya giriş yapar. Kimlik doğrulama sunucusu, jetonu bağımsız değişken olarak göndererek kullanıcıyı PWA kaynağınıza yönlendirir.
5. Uygulama içi tarayıcı, PWA kapsamına giren bir URL algıladığında kendini kapatır.
6. Motor, ana PWA penceresinde gezinmeyi kimlik doğrulama sunucusunun uygulama içi tarayıcıdayken gittiği URL'ye yönlendirir.
7. PWA'nız jetonu alır, saklar ve PWA'yı oluşturur.

Tarayıcının gezinmesini zorlama

Tarayıcıyı uygulama içi tarayıcı yerine URL ile açmaya zorlamak isterseniz <a href> öğelerinin _blank hedefini kullanabilirsiniz. Bu yalnızca masaüstü PWA'larda çalışır. Mobil cihazlarda URL ile tarayıcı açma seçeneği yoktur.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Yeni pencere açma

Masaüstünde kullanıcılar aynı PWA'nın birden fazla penceresini açabilir. Her pencere, aynı URL'nin iki tarayıcı sekmesini açıyormuşsunuz gibi aynı start_url'ye farklı bir gezinme yolu olur. Kullanıcılar, PWA'daki menüden Dosya'yı, ardından Yeni pencere'yi seçebilir. PWA kodunuzda ise open() işlevini kullanarak yeni bir pencere açabilirsiniz. Ayrıntılar için dokümanları inceleyin.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

iOS veya iPadOS'te bir PWA penceresinde open() çağrısı yapıldığında null döndürülür ve pencere açılmaz. Android'de yeni pencereler açtığınızda, URL için yeni bir uygulama içi tarayıcı oluşturulur. Bu tarayıcı, URL PWA'nızın kapsamında olsa bile genellikle harici bir tarama deneyimi tetiklemez.

Pencere başlığı

<title> öğesi, tarayıcı sekmesindeki alan sınırlı olduğundan öncelikli olarak SEO amacıyla kullanıldı. Bir PWA'da tarayıcıdan pencerenize geçtiğinizde başlık çubuğunun tüm alanı kullanılabilir.

Başlık çubuğunun içeriğini tanımlayabilirsiniz:

• Statik olarak HTML <title> öğenizdedir.
• document.title dizesi özelliğinin herhangi bir zamanda dinamik olarak değiştirilmesi.

Masaüstü PWA'larda başlık önemlidir ve pencerenin başlık çubuğunda, bazen de görev yöneticisinde veya çoklu görev seçiminde kullanılır. Tek sayfalık bir uygulamanız varsa her rotada başlığınızı güncelleyebilirsiniz.

Sekmeli mod

Sekmeli mod olarak bilinen deneysel bir özellik, PWA'nızın web tarayıcısına benzer sekme tabanlı bir tasarıma sahip olmasını sağlar. Bu durumda, kullanıcının aynı PWA'dan birden fazla sekmesi olabilir ancak bunların tümü, aşağıdaki videoda gösterildiği gibi aynı işletim sistemi penceresinde birbirine bağlıdır:

Bu deneysel özellik hakkında daha fazla bilgiyi PWA için sekmeli uygulama modu başlıklı makalede bulabilirsiniz.

Pencere denetimi yer paylaşımı

<title> öğesinin veya document.title mülkünün değerini tanımlayarak pencerenin başlığını değiştirebileceğinizden bahsetmiştik. Ancak her zaman bir dize değeridir. Başlık çubuğunu HTML, CSS ve resimlerle istediğimiz gibi tasarlayabilseydik ne olurdu? Microsoft Edge'in ve masaüstü için Google Chrome'un PWA'larındaki yeni deneysel özellik olan Window Controls Overlay burada devreye girer.

Bu özellik hakkında daha fazla bilgiyi PWA'nızın başlık çubuğunun pencere kontrolleri yer paylaşımını özelleştirme bölümünde bulabilirsiniz.

Pencere yönetimi

Birden fazla ekran kullanan kullanıcılar, kendilerine sunulan tüm alanı kullanmak ister. Örneğin:

• Gimp gibi çok pencereli grafik düzenleyiciler, çeşitli düzenleme araçlarını doğru konumlandırılmış pencerelere yerleştirebilir.
• Sanal işlem masaları, pazar eğilimlerini birden çok pencerede gösterebilir. Bu pencerelerden herhangi biri tam ekran modunda görülebilir.
• Slayt gösterisi uygulamaları, konuşmacı notlarını dahili birincil ekranda ve sunuyu harici bir projektörde gösterebilir.

Window Management API, PWA'ların bu ve daha fazlasını yapmasına olanak tanır.

Ekran ayrıntılarını alma

Window Management API, sabit bir ekli ekranlar dizisi olarak ekranları olan bir nesneyi döndüren yeni bir yöntem (window.getScreenDetails()) ekler. Ayrıca, mevcut window.screen öğesine karşılık gelen ScreenDetails.currentScreen üzerinden erişilebilen canlı bir nesne de var.

Döndürülen nesne, screens dizisi değiştiğinde de bir screenschange etkinliği tetikler. (Bu durum, tek tek ekranlardaki özellikler değiştirildiğinde gerçekleşmez.) window.screen veya screens dizisindeki ekranlar gibi tek tek ekranlar da özellikleri değiştiğinde bir change etkinliği tetikler.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Kullanıcı veya işletim sistemi, PWA'nızın penceresini bir ekrandan diğerine taşırsa ekran ayrıntıları nesnesinden de bir currentscreenchange etkinliği tetiklenir.

Ekran uyanık kalma kilidi

Şu durumu düşünün: Mutfaktasınız ve tabletinizdeki bir tarifi izliyorsunuz. Malzemelerinizi hazırladınız. Elleriniz kirli olduğu için sonraki adımı okumak için cihazınıza geri dönersiniz. Felaket! Ekran siyah oldu. Ekran Uyandırma Kilidi API'si tam size göre olup PWA'nın ekranların kararmasını, uyumasını veya kilitlenmesini önleyerek kullanıcıların endişelenmeden durmasını, başlamasını, ayrılmasını ve geri dönmesini sağlar.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Sanal klavye

Telefon ve tabletler gibi dokunmatik cihazlarda sanal bir dokunmatik klavye bulunur. Bu sayede kullanıcılar, PWA'nızın form öğelerine odaklandığında yazı yazabilir.

VirtualKeyboard API sayesinde PWA'nız artık navigator.virtualKeyboard arayüzünü kullanarak uyumlu platformlardaki klavye üzerinde daha fazla kontrole sahip olabilir. Örneğin:

• navigator.virtualKeyboard.show() ve navigator.virtualKeyboard.hide() işlevleriyle sanal klavyeyi gösterme ve gizleme.
• navigator.virtualKeyboard.overlaysContent değerini true olarak ayarlayarak tarayıcıya sanal klavyeyi kapatma konusunda sorumluluk aldığınız bilgisini verebilirsiniz.
• Klavyenin ne zaman göründüğünü ve geometrychange/navigator.virtualKeyboard etkinliğiyle kaybolduğunu öğrenir.
• virtualkeyboardpolicy HTML özelliğiyle, ana makine öğelerini düzenleme (contenteditable kullanarak) için sanal klavye politikasını ayarlama. Politika, sanal klavyenin auto değeri kullanılarak tarayıcı tarafından otomatik olarak mı yoksa manual değeri kullanılarak komut dosyanız tarafından mı işlenmesini istediğinize karar vermenize olanak tanır.
• Sanal klavyenin görünümü hakkında bilgi edinmek için CSS ortam değişkenlerini (ör. keyboard-inset-height ve keyboard-inset-top) kullanma

Bu API hakkında daha fazla bilgiyi VirtualKlavye API ile tam kontrol bölümünde bulabilirsiniz.

Kaynaklar

• Window Management API ile birden fazla ekranı yönetme
• MDN: Window Management API
• Progresif web uygulamaları için sekmeli uygulama modu
• Screen Wake Lock API ile ekranı açık tutma
• VirtualKlavye API ile tam kontrol
• Progresif web uygulamanızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme
• İçeriği başlık çubuğunda görüntüleme