Pencere yönetimi

Tarayıcı dışındaki bir PWA kendi penceresini yönetir. Bu bölümde, işletim sistemindeki bir pencereyi yönetmeyle ilgili API'leri ve özellikleri öğreneceksiniz.

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 dock'larda, görev çubuklarında ve alt sekme menüsünde, mobil cihazlarda ise çoklu görev pencere 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 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 sorgulamanız gerekir.

Not: 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 öğesi kullanarak, location.href'i kullanarak veya uyumlu platformlarda yeni bir 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, 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 URL çubuğuna sahiptirler. 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.

Not: Uygulama içi tarayıcı ekrandayken PWA'nız, başka bir pencere tarafından engellenmiş gibi arka planda bekler.

iOS ve iPadOS'te uygulama içi tarayıcı, PWA depolama alanınızdan izole edilmiş bir Safari oluşturma motoru olan SafariViewController'ı 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.

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öndürülecek 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 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 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 işlem 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 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.

Uyarı: open() işlevinin ikinci bağımsız değişkeni pencerenin adıdır. Kullandığınız ad zaten açıksa motor, bu ada sahip açık pencereyi yeni bir gezinme menüsüyle değiştirir. Her zaman yeni bir pencere açmak istiyorsanız ad için farklı dize değerleri kullanmanız gerekir.

window küresel nesne olduğundan JavaScript yazarken open(), moveTo() ve resizeTo() işlevleri için window. ön ekinin kullanılması gerekmez. moveTo(0, 0) numaralı telefonu arayabilirsiniz. Ancak window.moveTo(0, 0) çağrısı, kodun anlaşılmasını kolaylaştırır.

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: Bazı masaüstü tarayıcılar, PWA'larda kimlik avı saldırılarını azaltmak için pencere başlığında ek önlemlere sahip olabilir. Ö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ığı kullanıcının gittiği yeri vurgulayacak şekilde değiştirdiğinizde başlıkta mevcut kaynağı birkaç saniye boyunca oluşturabilir.

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.

Not: Deneysel bölümde, deneysel özellikleri nasıl kullanmaya başlayabileceğinizi görebilirsiniz.

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? Bu noktada, masaüstü PWA'ları için Microsoft Edge ve Google Chrome'da yeni bir deneysel özellik olan Pencere Denetimleri Yerleşimi devreye girer.

Not: Sekmeli mod ve pencere kontrolleri yer paylaşımı özellikleri, manifest'in display üyesi için yeni değerler tanımlar. Manifest grubu, tüm cihazlarla uyumluluk sağlamak için yedek display zincirini değiştirmenin bir yolunu oluşturmuştur. Böylece, ilk seçeneğiniz kullanılamıyorsa kullanılacak display değerini belirtebilirsiniz. Bu konu hakkında daha fazla bilgiyi Geleceğin görüntüleme modlarına hazırlanma başlıklı makalede bulabilirsiniz.

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

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ı, 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 bunu 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.

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: Web içeriğini projektör ve ağa bağlı televizyonlar gibi büyük sunum cihazlarında görüntülemek için Presentation API'yi de kontrol edebilirsiniz.

Browser Support

• 47
• 79
• x
• x

Source

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 bir 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 engellemesine olanak tanır. Böylece kullanıcılar endişelenmeden uygulamayı durdurabilir, başlatabilir, bırakabilir ve geri dönebilir.

// 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 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 görevini üstlendiğinizi bildirin.
• navigator.virtualKeyboard geometrychange etkinliğiyle klavyenin ne zaman göründüğünü ve kaybolduğunu bilme
• 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 almak için CSS ortam değişkenlerini (ör. keyboard-inset-height ve keyboard-inset-top) kullanma

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

Kaynaklar

• Window Management API ile birden fazla ekranı yönetme
• MDN: Window Management API
• PWA'lar için sekmeli uygulama modu
• Screen Wake Lock API ile ekranı açık tutma
• VirtualKeyboard 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