Pencere yönetimi

Tarayıcı dışındaki bir PWA kendi penceresini yönetir. Bu bölümde API'leri ve işletim sistemi içindeki pencere yönetimi özelliklerini öğreneceksiniz.

PWA penceresi

PWA'nız tarafından yönetilen kendi pencerenizde çalışmak, o işletim sistemindeki tüm aralıklara sahip tüm avantajlara ve sorumluluklara sahiptir. Örneğin:

  • Windows veya ChromeOS gibi çok pencereli işletim sistemlerinde pencereyi yeniden boyutlandırma ve hareket ettirme özelliği.
  • Ekranı, iPadOS bölünmüş modu veya Android bölünmüş ekran modu gibi diğer uygulama pencereleriyle paylaşma.
  • Masaüstünde yuvalar, görev çubukları ve alt sekme menüsünde, mobil cihazlarda ise çoklu görev penceresi listelerinde görünür.
  • Pencereyi simge durumuna küçültme, farklı ekranlar ve masaüstleri arasında taşıma ve istediğiniz zaman kapatma olanağı.

Pencereyi taşıma ve yeniden boyutlandırma

Masaüstü işletim sistemlerinde PWA pencereniz herhangi bir boyutta olabilir ve ekranın herhangi bir yerine yerleştirilebilir. Varsayılan olarak, kullanıcı PWA'yı yükledikten sonra ilk kez açtığında, PWA geçerli ekranın belirli bir yüzdesi kadar varsayılan pencere boyutuna sahip olur ve maksimum çözünürlük 1920x1080 ekranın sol üst köşesine yerleştirilir.

Kullanıcı pencereyi taşıyıp yeniden boyutlandırabilir ve tarayıcı son tercihi hatırlar. Böylece kullanıcının uygulamayı bir sonraki açışında, pencere önceki kullanımın boyutunu ve konumunu korur.

PWA'nızın tercih edilen boyutunu ve konumunu manifest'te tanımlamanın bir yolu yoktur. Pencerenin konumunu yalnızca JavaScript API'yi kullanarak değiştirebilir ve yeniden boyutlandırabilirsiniz. Kodunuzdan 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 PWA pencerenizi yeniden boyutlandırma ve taşıma işlemlerini şunları kullanarak yapabilirsiniz:

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 yeniden boyutlandırıldığını tespit edebilirsiniz. Pencere hareketini yakalayan bir etkinlik olmadığından, konumu sık sık sorgulama seçeneğiniz vardır.

Diğer sitelere göz atma

Kullanıcıyı PWA'nızın kapsamı dışında olan harici bir siteye göndermek isterseniz bunu 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 gittiğinizde PWA'nızın tarayıcı motoru pencerenizin bağlamında uygulama içi tarayıcı oluşturur.

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

  • İçeriğinizin üstünde görünürler.
  • Mevcut kaynağı, pencerenin başlığını ve bir menüyü gösteren statik bir URL çubuğu vardır. Bunların teması genellikle manifest dosyanızdaki theme_color ile belirlenir.
  • İçerik menüsünden, ilgili URL'yi tarayıcıda açabilirsiniz.
  • Kullanıcılar tarayıcıyı kapatabilir veya geri dönebilir.

Kapsam dışı bir URL&#39;ye göz atarken masaüstü PWA&#39;daki uygulama içi tarayıcı.

Bağımsız bir PWA&#39;da kapsam dışı olan bir URL&#39;ye göz atarken bir iPhone&#39;daki uygulama içi tarayıcı.

Bağımsız bir PWA&#39;da kapsam dışı olan bir URL&#39;ye göz atarken Android&#39;deki bir uygulama içi tarayıcı.

Yetkilendirme akışları

Birçok web kimlik doğrulama ve yetkilendirme akışı, PWA'nızın kaynağına geri dönecek bir jeton elde etmek için kullanıcının (ör. OAuth 2.0) farklı kaynaklardaki farklı bir URL'ye yönlendirilmesini içerir.

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

  1. Kullanıcı PWA'nızı açar ve giriş düğmesini 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, 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 penceresinin gezinme bölümünü 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ıda gezinmeyi zorlama

Tarayıcıyı uygulama içi tarayıcı yerine bir URL ile açmaya zorlamak istiyorsanız <a href> öğelerinin _blank hedefini kullanabilirsiniz. Bu yalnızca masaüstü PWA'larda çalışır; mobil cihazlarda ise 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, aynı URL'nin iki tarayıcı sekmesini açıyormuşsunuz gibi, aynı start_url için farklı bir gezinme seçeneği olacaktır. Kullanıcılar, PWA'daki menüden Dosya'yı, ardından Yeni pencere'yi seçebilir. PWA kodunuzdan open() işleviyle yeni bir pencere açabilirsiniz. Ayrıntılar için dokümanları inceleyin.

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

Masaüstü işletim sisteminde açılmış birkaç pencereyle aynı yüklü PWA.

iOS veya iPadOS'teki PWA (Progresif Web Uygulaması) penceresinden open() çağrısı yapıldığında null döndürülür ve pencere açılmaz. Android'de yeni pencereler açmak, PWA'nızın kapsamında olsa bile URL için yeni bir uygulama içi tarayıcı oluşturur. Bu tarayıcı, genellikle harici bir tarama deneyimini tetiklemez.

Pencere başlığı

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

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

  • Statik olarak HTML <title> öğenizde.
  • document.title dize özelliği herhangi bir zamanda dinamik olarak değiştiriliyor.

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, başlığınızı her rotada güncellemek isteyebilirsiniz.

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, aşağıdaki videoda görebileceğiniz gibi kullanıcının aynı PWA'dan açılmış ancak tümü aynı işletim sistemi penceresinde birbirine bağlanmış olan birkaç sekmesi olabilir:

PWA için sekmeli uygulama modu başlıklı makaleden bu deneysel özellik hakkında daha fazla bilgi edinebilirsiniz.

Pencere denetimleri 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 tasarlayabilsek nasıl olur? Bu noktada, Microsoft Edge'in ve masaüstü PWA'lar için Google Chrome'un yeni deneysel özelliği olan Pencere Denetimleri Yer Paylaşımı devreye girer.

PWA'nızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme başlıklı makaleden bu özellik hakkında daha fazla bilgi edinebilirsiniz.

Pencere denetimi yer paylaşımı sayesinde başlık çubuğunda içerik oluşturabilirsiniz.

Birden çok ekranlı pencere yerleşimi

Birden fazla ekran olduğunda kullanıcılar, kendilerine ayrılan tüm alanı kullanmak isteyecektir. Kullanıcılar:

  • Harici monitörde bir sunu açın.
  • Açık bir pencerenin ekrandaki konumunu geri yükler.
  • Dokunmayı destekleyen ekranları tercih edin.

Multi-Screen Window Placement API PWA'ların yalnızca bunu ve daha fazlasını yapmasını sağlar.

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

Multi-Screen Window Placement API yeni window.getScreenDetails() yöntemini ekler. Bu yöntem, ekli ekranlardan oluşan sabit bir dizi olarak ekranlara sahip bir nesne döndürür. Ayrıca, ScreenDetails.currentScreen adresinden erişilebilen ve mevcut window.screen değerine karşılık gelen canlı bir nesne de var.

Döndürülen nesne, screens dizisi değiştiğinde bir screenschange etkinliği de tetikler. (Bağımsız ekranlardaki özellikler değiştirildiğinde bu durum ortaya çıkmaz.) window.screen veya screens dizisindeki bir ekran 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].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

Mutfakta tabletinizdeki bir tarifi takip ettiğinizi hayal edin. Malzemeleri hazırlamayı bitirdiniz. Elleriniz karışık ve bir sonraki adımı okumak için cihazınıza dönüyorsunuz. Felaket! Ekran karartıldı Screen Wake Lock API'yi kullanabilir, PWA'nın ekran kararmasını, uyku moduna geçmesini veya kilitlenmesini engelleyerek kullanıcıların endişe etmeden durmalarını, başlamalarını, sayfadan ayrılmalarını ve geri dönmelerini sağlayabilirsiniz.

// 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

Telefonlar ve tabletler gibi dokunmatik tabanlı cihazlarda, kullanıcıların PWA'nızın form öğeleri odaktayken yazı yazabilmesi için sanal bir dokunmatik klavye bulunur.

Virtualkeyboard API sayesinde artık PWA'nız, navigator.virtualKeyboard arayüzünü kullanarak aşağıdakiler de dahil olmak üzere uyumlu platformlarda klavye üzerinde daha fazla kontrole sahip olabilir:

  • navigator.virtualKeyboard.show() ve navigator.virtualKeyboard.hide() işlevleriyle sanal klavyeyi gösterme ve gizleme.
  • navigator.virtualKeyboard.overlaysContent öğesini true değerine ayarlayarak sanal klavyeyi kapatma işlemini sizin hallettiğinizi tarayıcıya bildirin.
  • navigator.virtualKeyboard geometrychange etkinliğiyle klavyenin ne zaman görünüp kaybolduğunu bilmek.
  • Ana makine öğelerini düzenlemede (contenteditable kullanılarak) virtualkeyboardpolicy HTML özelliğiyle sanal klavye politikası ayarlanıyor. Politika, sanal klavyenin tarayıcı tarafından auto değeri kullanılarak otomatik olarak mı yoksa komut dosyanız tarafından manual değeri ile mi 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 ortam değişkenlerini kullanma.

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

Kaynaklar