Pencere yönetimi

Tarayıcı dışındaki bir PWA kendi penceresini yönetir. İşletim sistemindeki bir pencereyi yönetmeyle ilgili API'ler ve özellikler hakkında bilgi edinin.

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 taşıma ve yeniden boyutlandırma ö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 dock'larda, 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 dilediğ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ı PWA'yı yükleme işleminden sonra ilk kez açtığında PWA, mevcut ekranın yüzdesi kadar bir varsayılan 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. 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'sini kullanarak yeniden konumlandırabilir ve yeniden boyutlandırabilirsiniz. window nesnesinin moveTo(x, y) ve resizeTo(x, y) işlevlerini kullanarak kendi PWA pencerenizi kodunuzdan taşıyabilir ve yeniden boyutlandırabilirsiniz.

Örneğin, PWA'nız yüklendiğinde aşağıdakileri kullanarak PWA pencerenizi yeniden boyutlandırabilir ve 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);
   }
});

Mevcut ekran boyutunu ve konumunu window.screen nesnesini kullanarak sorgulayabilir, pencerenin ne zaman yeniden boyutlandırıldığını window nesnesinden resize etkinliğini kullanarak algılayabilirsiniz. Pencerenin hareketini yakalamak için bir etkinlik olmadığından, konumu sık sık sorgulamak sizin için en iyi seçenektir.

Pencereyi mutlak olarak taşımak ve yeniden boyutlandırmak yerine moveBy() ve resizeBy() tuşlarını kullanarak göreceli olarak taşıyabilir ve yeniden boyutlandırabilirsiniz.

Not: Mobil cihazlarda pencerenizi taşımak veya yeniden boyutlandırmak ekranda herhangi bir değişiklik yapmaz.

Diğer sitelere göz atma

Kullanıcıyı PWA'nızın kapsamı dışındaki harici bir siteye göndermek istiyorsanız bunu standart bir <a href> HTML öğesiyle yapabilirsiniz. location.href simgesini kullanın veya uyumlu platformlarda yeni bir pencere açın.

Manifestinizin kapsamı dışındaki bir URL'yi ziyaret ettiğinizde PWA'nızın tarayıcı motoru, pencereniz bağlamında bir uygulama içi tarayıcı oluşturur.

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

• Bu reklamlar içeriğinizin üzerinde görünür.
• Mevcut kaynağı, pencerenin başlığını ve bir menüyü gösteren statik bir adres çubuğuna sahiptir. Bunlar genellikle manifest'inizin theme_color ile temalandırılır.
• İçerik menüsünden bu URL'yi tarayıcıda açabilirsiniz.
• Kullanıcılar tarayıcıyı kapatabilir veya geri dönebilir.

Uygulama içi tarayıcı ekrandayken PWA'nız, başka bir pencerenin onu engellediği gibi arka planda bekler.

Not: iOS ve iPadOS'te uygulama içi tarayıcı, PWA depolama alanınızdan izole edilmiş bir Safari oluşturma motoru olan SafariViewController'i kullanır. Bu nedenle, kullanıcının Safari'de oturumu varsa bu oturum PWA'nızda görünmez ancak PWA'nızdaki bir uygulama içi tarayıcıda görünür.

Bağımsız bir PWA'da kapsam dışındaki bir URL'ye göz atarken iPhone'da uygulama içi tarayıcı.

Bağımsız bir PWA'da kapsam dışındaki bir URL'ye göz atarken Android'de uygulama içi tarayıcı.

Yetkilendirme akışları

Birçok web kimlik doğrulama ve yetkilendirme akışında, kullanıcının PWA'nızın kaynağına dönen bir jeton edinmek için farklı bir kaynaktaki farklı bir URL'ye yönlendirilmesi gerekir (ör. OAuth 2.0).

Bu durumlarda uygulama içi tarayıcı şu süreci uygular:

1. Kullanıcı, PWA'nızı açar ve giriş yap'ı 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'nın kapsamına giren bir URL algıladığında kendini kapatır.
6. Motor, ana PWA pencere gezinmesini, kimlik doğrulama sunucusunun uygulama içi tarayıcıda bulunduğu sırada 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çmak istiyorsanız <a href> öğelerinin _blank hedefini kullanabilirsiniz. Bu özellik yalnızca masaüstü PWA'larında çalışır. Mobil cihazlarda URL içeren bir tarayıcı 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 pencerede, aynı URL'nin iki tarayıcı sekmesini açıyormuşsunuz gibi aynı start_url için farklı bir gezinme bulunur. Kullanıcılar, PWA'daki menüden Dosya'yı, ardından Yeni pencere'yi seçebilir. PWA kodunuzdan open() işlevini kullanarak yeni bir pencere açabilirsiniz.

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

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

Uyarı: open() işlevinin ikinci bağımsız değişkeni pencerenin adıdır. Her zaman yeni bir pencere açmak için ad için farklı dize değerleri kullanmanız gerekir.

İpucu: window. genel bir JavaScript nesnesi olduğundan open(), moveTo() ve resizeTo() işlevleri window. ön ekiyle çalışmaz. Bunun yerine, moveTo(0, 0) numaralı telefonu arayabilirsiniz. Bu numara daha kolay anlaşılabilir.

Pencere başlığı

<title> öğesi, tarayıcı sekmesindeki alan sınırlı olduğu için öncelikle SEO amacıyla kullanılıyordu. 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:

• HTML <title> öğeniz içinde statik olarak.
• document.title dize özelliğini istediğiniz zaman dinamik olarak değiştirme.

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.

Not: Kimlik avını azaltmak için bazı masaüstü tarayıcılar pencere başlığına ek önlemler ekleyebilir. Örneğin, başlıkta uygulamanızın adını kullanmazsanız tarayıcı, PWA'nızın adını içeren bir ön ek ekleyebilir. Diğer tarayıcılar, başlığı değiştirdiğinizde kullanıcının nereye gittiğini vurgulamak için başlıkta mevcut kaynağı birkaç saniye boyunca oluşturabilir.

Sekmeli mod

Sekmeli mod, PWA'nızın web tarayıcıya benzer şekilde sekme tabanlı bir tasarıma sahip olmasını sağlayan deneysel bir özelliktir. Bu durumda kullanıcı, aynı PWA'da birden fazla sekme açabilir ancak bunların tümü 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.

Not: Deneysel özellikler hakkında daha fazla bilgiyi Deneysel bölümde 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 tasarlayabilseydik ne olurdu? Masaüstü PWAs için Microsoft Edge ve Google Chrome'daki deneysel bir özellik olan Pencere Denetimleri Yerleşimi yardımcı olabilir.

Not: Sekmeli mod ve pencere denetimleri yer paylaşımı özellikleri, manifest'in display üyesi için yeni değerler tanımlar. Manifest grubu, tüm cihazlarla uyumluluğu sağlamak için yedek display zincirini değiştirmenize olanak tanır. Böylece, ilk seçeneğiniz kullanılamıyorsa kullanılacak display değerini belirtebilirsiniz. Görüntü modları hakkında daha fazla bilgi edinin.

Bu özellik hakkında daha fazla bilgiyi Progresif web uygulamanızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme başlıklı makalede bulabilirsiniz.

Pencere yönetimi

Kullanıcılar birden fazla ekranda kullanabilecekleri 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ı, piyasa trendlerini birden fazla pencerede gösterebilir. Bu pencerelerin her biri tam ekran modunda görüntülenebilir.
• 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, ekranları ekli ekranların değiştirilemez bir dizisi olarak içeren bir nesne döndüren yeni bir yöntem (window.getScreenDetails()) ekler. Ayrıca, mevcut window.screen'a karşılık gelen ScreenDetails.currentScreen'ten erişilebilen canlı bir nesne de vardır.

Not: Bazı tarayıcılarda window.getScreenDetails() çağrısı için kullanıcının PWA'larınıza izin vermesi gerekir.

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.

Not: Presentation API ile web içeriğini projektör ve ağa bağlı televizyonlar gibi cihazlarda görüntüleyebilirsiniz.

Ekran uyanık kalma kilidi

Şunu hayal edin. 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 karardı. Screen Wake Lock API, PWA'ların ekranların kararmasını, uyku moduna girmesini veya kilitlenmesini önleyerek kullanıcıların endişelenmeden uygulamayı durdurmasına, başlatmasına, terk etmesine ve geri dönmesine olanak tanır.

// 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 tablet gibi dokunmatik tabanlı cihazlar, kullanıcının PWA'nızın form öğeleri odaktayken yazabilmesi için sanal bir ekran klavyesi sunar.

VirtualKeyboard API ile PWA'nız, navigator.virtualKeyboard arayüzünü kullanarak uyumlu platformlarda klavye üzerinde daha fazla kontrole sahip olabilir.

• navigator.virtualKeyboard.show() ve navigator.virtualKeyboard.hide() tuşlarını kullanarak sanal klavyeyi gösterin veya gizleyin.
• navigator.virtualKeyboard.overlaysContent değerini true olarak ayarlayarak tarayıcıya sanal klavyeyi kendinizin kapattığını bildirin.
• geometrychange etkinliğiyle klavyenin ne zaman göründüğünü ve kaybolduğunu öğrenin.
• virtualkeyboardpolicy HTML özelliğini kullanarak contenteditable değerini auto veya manual olarak ayarlayarak sanal klavye politikasını düzenleyen ana öğeleri ayarlayın. Politika, sanal klavyenin tarayıcı tarafından otomatik olarak (auto) mı yoksa komut dosyanız tarafından mı (manual) işlenmesini istediğinize karar vermenizi sağlar.
• Sanal klavyenin görünümü hakkında bilgi edinmek için CSS çevresel değişkenlerini (ör. keyboard-inset-height ve keyboard-inset-top) kullanın.

Bu API hakkında daha fazla bilgiyi VirtualKeyboard API ile tam kontrol başlıklı makalede bulabilirsiniz.