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ı, PWA'nıza giden derin bağlantıların statik listesidir ve manifest dosyanıza yazılır. Web uygulaması manifest spesifikasyonu. PWA'nızın farklı bölümleri veya özellikleri için bir kısayol listesi tanımlamanıza olanak tanır 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'lı Android'de kullanılabilir. Uygulama kısayolları, aşağıdaki resimde gösterildiği gibi ana ekran, yuva veya görev çubuğundaki uygulama simgesinde bulunan içerik menüsünde görünür:
Bu menüye erişmek için kullanıcıların PWA'nın simgesini sağ tıklaması veya uzun basması gerekir.
ziyaret edin.Kısayollar, manifestin shortcuts üyesinde tanımlanır. Aşağıdaki özelliklere sahip bir üye dizisi alır:
name- Kullanıcıya gösterilen metin (genellikle bir içerik menüsündedir).
url- Kullanıcı, bu kısayoldan başlattığında PWA'nın yüklemesi gereken URL. Bu değer, PWA kapsamına giren bir URL olmalı ve
nameya dashort_nametarafından açıklanan özelliğe derin bağlantı vermelidir. short_name- (İsteğe bağlı)
namealanının tam değerini görüntülemek için yeterli alan olmadığında daha kısa bir ad kullanılır. description- (İsteğe bağlı) Bu kısayolun ne yapacağının açıklaması
icons- (İsteğe bağlı)
src,type,sizesve isteğe bağlıpurposealanlarını içeren ve hangi resimlerin kısayolu temsil etmesi gerektiğini açıklayan simge nesneleri dizisi
Uygulama kısayollarını mümkün olan en iyi yetenek olarak değerlendirmelisiniz. Diğer bir deyişle, bu kısayolların tutarlı bir şekilde görüntülenmesini sağlayamazsınız ve görüntülenseler bile kaç kısayol gösterileceğini bilemezsiniz veya platform, tarayıcıların şahsi karar verme yetkisiyle simgeleri yok sayar. Her platform için yapılacak kapsamlı bir tartışma kapsam dışındadır ancak aşağıda Android ve masaüstünde nasıl çalıştığına dair bir fikir edinebilirsiniz. Bu belirsizlikle başa çıkmanın en iyi yolu öğeleri öncelik sırasına göre sıralamaktır.
ziyaret edin.Aşağıdaki kod örneğinde, uygulamayı Chrome ile Android'e veya masaüstüne Edge ya da Chrome ile yüklerseniz deneyebileceğiniz farklı uygulama kısayolları tanımlanmaktadır.
iOS ve iPadOS
PWA'lar yayınlarken, iOS/iPadOS'te Safari'deki kullanıcıların deneyimini iyileştirebilecek bazı geliştirmeler var.
Başlangıç ekranları
Web uygulaması manifesti bölümünde görüldüğü gibi, Android, manifestin değerlerine göre başlangıç ekranlarını otomatik olarak oluşturur. iOS ve iPadOS için bu durum 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ğı tam pencere boyutuna sahip olması gerektiğidir. Bu nedenle, farklı iOS ve iPadOS cihazlarda farklı görüntülerin olması gerekir. iPad'de yatay/dikey açılışlar 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.
iOS ve iPadOS ekran boyutlarının güncellenmiş listesini Apple İnsan Arayüzü Yönergeleri'nde kontrol edebilirsiniz
Başlangıç 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ıç görüntüleri için tasarım kalıpları
Başlangıç resimlerini tanımlamak zor bir iştir. Bu nedenle, otomatik oluşturma ve yapılandırma için birkaç aracımız var:
- Statik oluşturma, derleme sisteminizle entegre olur, tüm PNG statik resimlerini oluşturur ve dokümanınıza yerleştirebileceğiniz
<link>öğeleri içeren HTML kodunu verir. PWA Öğe Oluşturucu bu tür araçlara örnek olarak verilebilir. - Mevcut cihazın türüne ve ekran boyutuna bağlı olarak, yerleştirilen
<link>öğeye 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 tuval kullanabilir, resmi oluşturabilir ve PNG dosyası içeren birdata:URI'sine dönüştürebilirsiniz. PWA Uyumlu kitaplığı, Android'in normal lansman ekranını kopyalayarak bunu yapan, kullanımı kolay bir istemci taraflı kitaplıktır.
Apple mobil platformlarında PWA (Progresif Web Uygulaması) algılama
PWA'nızda Progresif Geliştirme ve özellik algılamayı kullanmanız gerekir. Ancak, yükleme talimatları sunmak veya platforma özgü uygulamaların bağlantılarını eklemek istediğiniz zaman olduğu gibi, kullanıcının Apple mobil platformlarında PWA kullanıp kullanmadığını bilmemiz gereken bazı sıra dışı 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ının PWA'yı tarayıcıda açtığı ve burada kullandığı anlamına gelir.navigator.standalonedeğeritrueise kullanıcının PWA'yı ana ekrandan açtığı ve bağımsız PWA deneyiminden yararlandığı anlamına gelir.
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 resimde, solda tema rengine sahip varsayılan bağımsız bir tasarım, sağda ise durum çubuğunun arkasında içerik oluşturmanıza olanak tanıyan tam ekran iOS moduna sahip bir PWA (Progresif Web Uygulaması) 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 kısımda) görmeye devam eder ancak şeffaf bir arka planla içeriğinizin üzerinde oluşturulur.
Bu modu kullanırken tasarımınıza dikkat edin. İşletim sistemi simgeleri her zaman beyaz olarak oluşturur. Bu nedenle, ekranın üst kısmı için arka planlarınızda açık renk içerik kullanarak her zaman kontrast oluşturun. Ayrıca, Uygulama Tasarımı Bölümü'nde görüldüğü gibi, güvenli alanda içerik oluşturmak için CSS ortamı değişkenlerinin kullanılması da önemlidir.
Kurulum güvenilirliği
15.4'ten önceki iOS ve iPadOS sürümlerindeki Safari, manifest dosyasını ağdan yalnızca kullanıcı, tarayıcıdaki paylaş simgesini kullanarak paylaşım sayfasını açtığında yüklüyor. Sayfa yüklendiğinde değil. Dolayısıyla Safari, o ana kadar web sitenizin PWA olup olmadığını kontrol etmez. Bu, manifestin yüklenemeyeceği veya çok fazla zaman aldığı durumlara yol açabilir ve Safari bunu yok sayar.
Safari manifesti zamanında yükleyemediğinde "Ana ekrana ekle"ye basarak ana ekrana bir simge yerleştirir ancak uygulama deneyimi sunmayan; yalnızca Safari sekmesinin kısayolu olur.