Pencere yönetimi

Tarayıcının dışındaki bir PWA kendi penceresini yönetir. Bu bölümde, bir pencereyi yönetmeye ilişkin API'ları ve özellikleri işletim sistemi.

PWA (Progresif Web Uygulaması) penceresi

PWA'nız tarafından yönetilen kendi pencerenizde çalıştırmak, ilgili işletim sisteminde bulunan tüm pencerelerin sunduğu tüm avantaj ve sorumluluklara sahiptir. Örneğin:

• Windows veya ChromeOS gibi çok pencereli işletim sistemlerinde pencereyi yeniden boyutlandırma ve taşıma özelliği.
• 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 yuvalarda, görev çubuklarında, alt sekme menüsünde ve mobil cihazlarda çoklu görev pencere listelerinde gösterilir.
• Pencereyi ekranlar ve masaüstleri 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üklemeden sonra PWA'yı ilk kez açtığında PWA, mevcut ekranın belirli bir yüzdesi kadar varsayılan pencere boyutunu alır. Maksimum çözünürlük ise ekranın sol üst köşesine 1920x1080 olarak yerleştirilir.

Kullanıcı pencereyi hareket ettirebilir ve yeniden boyutlandırabilir ve tarayıcı son tercihi hatırlar. Dolayısıyla, kullanıcı uygulamayı bir sonraki açışında pencere, önceki kullanıma ait boyut ve konumu korur.

Manifest'te PWA'nız için tercih edilen boyutu ve konumu tanımlamanın bir yolu yoktur. Pencereyi yalnızca JavaScript API'yi kullanarak yeniden konumlandırabilir ve yeniden boyutlandırabilirsiniz. Kodunuzda, window nesnesinin moveTo(x, y) ve resizeTo(x, y) işlevlerini kullanarak 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);
   }
});

Geçerli ekran boyutunu ve konumunu window.screen nesnesini kullanarak sorgulayabilirsiniz; window nesnesindeki resize etkinliğini kullanarak pencerenin ne zaman yeniden boyutlandırıldığını 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 atılıyor

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 manifest'inizin 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:

• Bunlar, içeriğinizin üzerinde gösterilir.
• 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ı

Çoğu web kimlik doğrulaması ve yetkilendirme akışı, PWA'nızın kaynağına döndürecek bir jeton almak için kullanıcının farklı bir kaynaktaki farklı bir URL'ye yönlendirilmesini içerir (ör. OAuth 2.0 kullanmak).

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ışında olan bir URL'ye yönlendirir. Böylece, oluşturma motoru PWA'nızın içinde bir uygulama içi tarayıcı açar.
3. Kullanıcı istediği zaman uygulama içi tarayıcıyı iptal edip PWA'nıza geri dönebilir.
4. Kullanıcı, uygulama içi tarayıcıya giriş yapar. Kimlik doğrulama sunucusu, kullanıcıyı PWA kaynağınıza yönlendirerek jetonu bağımsız değişken olarak gönderir.
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, jetonu saklar ve PWA'yı oluşturur.

Tarayıcının gezinmesini zorunlu kılma

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 tarayıcıyı URL ile açma seçeneği yoktur.

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

Yeni pencereler açma

Masaüstünde kullanıcılar aynı PWA'nın birden fazla penceresini açabilir. Her pencere, sanki aynı URL'den iki tarayıcı sekmesi açıyormuşsunuz gibi, aynı start_url öğesine farklı bir gezinme sağlayacaktır. Kullanıcılar PWA'daki menüden Dosya'yı, ardından Yeni pencere'yi seçebilir. Siz de PWA kodunuzdan open() işlevini kullanarak yeni bir pencere açabilirsiniz. Ayrıntılar için belgeleri inceleyin.

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

iOS veya iPadOS'te PWA penceresi içinde open() çağrısı yapıldığında null sonucu döndürülür ve pencere açılmaz. Android'de yeni pencereler açıldığında URL için yeni bir uygulama içi tarayıcı oluşturulur (URL PWA'nızın kapsamında olsa bile) ve bu genellikle harici bir göz atma deneyimini tetiklemez.

Pencere başlığı

<title> öğesi, tarayıcı sekmesindeki alan sınırlı olduğundan öncelikli olarak SEO amacıyla kullanıldı. Tarayıcıdan PWA'daki pencerenize geçtiğinizde başlık çubuğu alanının tamamını kullanabilirsiniz.

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 son derece önemlidir. Başlık, pencerenin başlık çubuğunda ve bazen görev yöneticisi ya da çoklu görev seçiminde kullanılır. Tek sayfalık bir uygulamanız varsa uygulama veya oyununuzu her rota için güncellemek isteyebilirsiniz.

Sekmeli mod

Sekmeli mod olarak bilinen deneysel ö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ı, aşağıdaki videoda görebileceğiniz gibi aynı PWA'dan açılmış ancak hepsi aynı işletim sistemi penceresinde birbirine bağlı birden fazla sekmeye sahip olabilir:

Bu deneysel özellik hakkında daha fazla bilgiyi PWA için sekmeli uygulama modu bölümünde bulabilirsiniz.

Pencere denetimi yer paylaşımı

<title> öğesinin veya document.title özelliğinin değerini tanımlayarak pencerenin başlığını değiştirebileceğinizi belirtmiştik. Ancak bu 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 çok ekran olduğunda kullanıcılar, kendilerine ayrılan tüm alanı kullanmak ister. Örneğin:

• Birden fazla pencereli grafik düzenleyiciler, doğru şekilde konumlandırılmış pencerelere çeşitli düzenleme araçları 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 tam da bunu ve daha fazlasını yapmasına olanak tanır.

Ekran ayrıntıları alınıyor

Window Management API, sabit bir ekli ekranlar dizisi olarak ekranları olan bir nesneyi döndüren yeni bir yöntem olan 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 bir screenschange etkinliği de tetikler. (Bu durum, tek bir ekrandaki özellikler değiştirildiğinde ortaya çıkmaz.) window.screen veya screens dizisindeki bir ekran da dahil olmak üzere bağımsız ekranlar, ö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].pointerTypes;  // e.g. ["touch"]
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 bir currentscreenchange etkinliği de tetiklenir.

Ekran uyanık kalma kilidi

Şunu hayal edin: Mutfaktasınız ve tabletinizde bir tarifi takip ediyorsunuz. Malzemelerinizi hazırlamayı bitirdiniz. Elleriniz karmakarışık ve bir sonraki adımı okumak için cihazınıza geri dönüyorsunuz. Felaket! Ekran karardı! 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.

VirtualKlavye API'si sayesinde PWA'nız artık navigator.virtualKeyboard arayüzünü kullanarak uyumlu platformlarda aşağıdakiler de dahil olmak üzere klavye üzerinde daha fazla kontrol sahibi olabilir:

• navigator.virtualKeyboard.show() ve navigator.virtualKeyboard.hide() işlevlerine sahip sanal klavye gösteriliyor ve gizleniyor.
• navigator.virtualKeyboard.overlaysContent değerini true değerine ayarlayarak sanal klavyeyi kapatma işini tarayıcıya sizin yaptığınızı bildirin.
• Klavyenin ne zaman göründüğünü ve geometrychange/navigator.virtualKeyboard etkinliğiyle kaybolduğunu öğrenir.
• virtualkeyboardpolicy HTML özelliğiyle ana makine öğelerinin düzenlenmesi (contenteditable kullanılarak) ile ilgili sanal klavye politikası ayarlanıyor. 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 vermenizi sağlar.
• Sanal klavye görünümü hakkında bilgi almak için keyboard-inset-height ve keyboard-inset-top gibi CSS çevre değişkenlerini kullanma.

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

Kaynaklar

• Çoklu Ekran Pencere Yerleşimi API'si ile birden fazla ekranı yönetme
• Progresif web uygulamaları için sekmeli uygulama modu
• Screen Wake Lock API ile uyanık kalma
• VirtualKlavye API ile tam kontrol
• Progresif web uygulamanızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme
• Başlık çubuğunda içerik görüntüleme