PWA'nızın dönüşümünü ve kullanımını iyileştirebilecek birçok geliştirme vardır.
Uygulama kısayolları
Uygulama kısayolları, manifest dosyanıza yazılan PWA'nıza yönlendiren sabit bir derin bağlantı listesidir. Web Uygulaması Manifest spesifikasyonu: PWA'nızdaki farklı bölümler veya özellikler için kısayollar listesi tanımlamanızı sağlar ve sık erişilen bölümlere gitmeyi hızlandırır.
Uygulama kısayolları, çoğu masaüstü işletim sisteminde ve WebAPK'sı olan Android'de kullanılabilir ve ana ekrandaki, yuvadaki veya görev çubuğundaki uygulamanın simgesinde bulunan içerik menüsünde aşağıdaki resimde olduğu gibi görünür:
Bu menüye erişmek için kullanıcıların PWA'nın simgesini sağ tıklaması veya PWA simgesine uzun basması gerekir.
Kısayollar, manifestin shortcuts üyesinde tanımlanır. Aşağıdaki özelliklere sahip bir üye dizisi gerektirir:
name- Kullanıcıya genellikle içerik menüsünde gösterilecek metin.
url- Kullanıcı bu kısayoldan başlattığında PWA'nın yüklemesi gereken URL. Bu, PWA kapsamınızdaki bir URL olmalı ve
nameveyashort_nametarafından açıklanan özelliğe derin bağlantı sağlamalıdır. short_name- (İsteğe bağlı)
namealanının tam değerini göstermek için yeterli alan olmadığında daha kısa bir ad kullanılır. description- (İsteğe bağlı) Bu kısayolun ne yapacağına dair açıklama
icons- (İsteğe bağlı) Hangi resimlerin kısayolu temsil etmesi gerektiğini açıklayan
src,type,sizesve isteğe bağlıpurposealanlarını içeren simge nesneleri dizisi
Uygulama kısayollarını en iyi sonuç veren bir yöntem olarak değerlendirmelisiniz. Diğer bir deyişle, bu kısayolların tutarlı bir şekilde göründüklerine güvenemezsiniz, hatta görünseler bile kaç kısayolun görüneceğini bilemezsiniz veya platformun, tarayıcının tercihine bağlı olarak simgeleri yok sayıp yoksayacağını bilirsiniz. Her platform için kapsamlı bir tartışma konusu kapsam dışındadır. Ancak aşağıda Android ve masaüstünde nasıl çalıştığı hakkında bir fikir edinebilirsiniz. Bu belirsizlikle başa çıkmanın en iyi yolu, öğeleri önceliklerine göre sıralamaktır.
Aşağıdaki kod örneğinde, uygulamayı Chrome ile Android'e veya Edge ya da Chrome ile masaüstüne yüklerseniz deneyebileceğiniz farklı uygulama kısayolları tanımlanmaktadır.
iOS ve iPadOS
PWA'ları yayınlarken iOS/iPadOS'te Safari kullananların deneyimini iyileştirebilecek bazı geliştirmeler vardır.
Başlangıç ekranları
Web Uygulaması Manifest bölümünde açıklandığı gibi, Android, manifest değerlerini temel alarak başlangıç ekranlarını otomatik olarak oluşturur. Bu durum iOS ve iPadOS için geçerli değildir. Bu cihazlarda, HTML'deki başlangıç ekranlarını <link> öğelerini kullanarak statik resimler olarak tanımlamanız gerekir.
Bu resimler, Apple cihazlarda başlangıç resimleri olarak bilinir ve aşağıdaki gibi apple-touch-startup-image değeriyle rel özelliğini kullanır:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Buradaki zorluk, başlangıç resminin, PWA'nızın açıldığında sahip olacağı pencere boyutuna tam olarak sahip olmasıdır. Bu nedenle, farklı iOS ve iPadOS cihazları için farklı resimler gerekir. iPad'de yatay/dikey olarak açılma ve PWA'nın çoklu görev modunda (ör. ekranın 1/3, 1/2 veya 2/3) oluşturulması gibi daha fazla durumun ele alınması gerekir.
Apple İnsan Arayüzü Yönergeleri'nde iOS ve iPadOS ekran boyutlarının güncellenmiş bir listesini kontrol edebilirsiniz.
Lansman resminin farklı sürümleri, media özelliği içindeki bir medya sorgusu ile ayarlanabilir:
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
iOS başlangıç resimleri için tasarım kalıpları
Başlangıç resimlerinin tanımlanması zor bir iştir. Bu nedenle, otomatik oluşturma ve yapılandırma için birkaç aracımız vardır:
- Statik oluşturma, derleme sisteminizle entegre olur, tüm PNG statik resimlerini oluşturur ve dokümanınıza ekleyeceğiniz
<link>öğelerine sahip HTML kodunu size verir. PWA Asset Oluşturucu, bu tür bir araca örnek olarak gösterilebilir. - Geçerli cihazın türüne ve ekran boyutuna göre, yerleştirilen
<link>öğelere başlangıç resminin bir veya daha fazla base64 sürümünü yerleştirebilen bir JavaScript aracı olan istemci tarafı oluşturma aracı. Bellek içi bir tuval kullanabilir, resmi oluşturabilir ve PNG dosyasıyla birdata:URI'sine dönüştürebilirsiniz. PWA Compat kitaplığı, bunu Android'in tipik başlangıç ekranını klonlayarak yapan, kullanımı kolay bir istemci tarafı kitaplığıdır.
Apple mobil platformlarında PWA'yı algılama
PWA'nızda Progresif Geliştirme ve özellik algılama özelliklerini kullanmanız gerekse de, yükleme talimatları sunmak veya yalnızca iOS'e özgü platforma özgü uygulamaların bağlantıları eklemek gibi durumlarda kullanıcının Apple mobil platformlarında PWA kullanıp kullanmadığını bilmemiz gereken bazı uç durumlar olabilir.
Kullanıcı aracısı dizesini okumaktan kaçınmak için navigator nesnesinin standalone özelliğini kontrol edin. Bu standart olmayan bir özelliktir ve yalnızca iOS ve iPadOS'teki WebKit motorunda kullanılabilir.
navigator.standalonedeğeriundefinedise kullanıcı iPadOS veya iOS cihaz kullanmıyor demektir.navigator.standalonedeğerifalseise kullanıcı PWA'yı tarayıcıda açmış ve oradan da kullanıyor demektir.navigator.standalone,trueise kullanıcı PWA'yı ana ekrandan açmış ve bağımsız PWA deneyimini almaktadır demektir.
Tam ekran desteği
iOS ve iPad'lerdeki Safari'de, PWA'nızın simgesi için görüntüleme modu olarak yalnızca display: standalone desteklenir. display: fullscreen, Android cihazlarda olduğu gibi desteklenmese de PWA'nızı tam ekran moduna geçirmek için standart olmayan bir meta etiket kullanabilirsiniz.
Bir sonraki resmin solunda, tema rengine sahip varsayılan bağımsız bir tasarım, sağ tarafta ise durum çubuğunun arkasında içerik oluşturmanıza olanak tanıyan tam ekran iOS modu bulunan PWA'yı görebilirsiniz.
HTML'nize aşağıdaki etiketi eklerseniz iOS ve iPadOS'teki PWA'nız tam ekran moduna girer ancak bu mod Android'den farklıdır.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Bu modda, cihazın durum çubuğu (saat, pil seviyesi ve bildirim simgelerini gördüğünüz üst tarafta) görünür olmaya devam eder ancak şeffaf bir arka planla içeriğinizin üzerinde oluşturulur.
Bu modu kullanırken, işletim sistemi simgeleri her zaman beyaz renkte oluşturacağından, tasarımınıza dikkat edin. Bu nedenle, ekranın üst kısmı için arka planlarınız arasında her zaman açık renkli içeriğe sahip bir kontrast oluşturmanız gerekir. Ayrıca, Uygulama Tasarımı Bölümü'nde görüldüğü gibi, içeriği güvenli alanda oluşturmak için CSS ortam değişkenlerinin kullanılması da önemlidir.
Yükleme güvenilirliği
iOS ve iPadOS'in 15.4'ten önceki sürümlerinde Safari, ağdan manifest dosyasını yalnızca kullanıcı tarayıcıdaki paylaş simgesini kullanarak paylaşım sayfasını açtığında yükler, sayfa yüklenirken yüklemez. Bu nedenle Safari, web sitenizin PWA olup olmadığını o ana kadar kontrol etmez. Bu da manifest'in yüklenemediği veya çok fazla zaman aldığı durumlara yol açabilir ve Safari bunu dikkate almaz.
Safari manifesti zamanında yükleyemediğinde, "Ana Ekrana Ekle"ye basıldığında ana ekrana bir simge yerleştirilir ancak bu bir uygulama deneyimi sağlanmaz; yalnızca Safari sekmesinin kısayolu olarak kalır.