Bir web uygulaması tasarladınız, kodunu ve hizmet çalışanını yazdınız ve son olarak bir kullanıcının cihazına "yüklendiğinde" nasıl davranması gerektiğini açıklayan Web Uygulaması Manifesti'ni eklediniz. Buna, cep telefonunun başlatıcısı veya uygulama değiştirici için kullanılacak yüksek çözünürlüklü simgeler veya kullanıcının ana ekranından açıldığında web uygulamanızın nasıl başlaması gerektiği de dahildir.
Birçok tarayıcı Web Uygulaması Manifest'ini dikkate alsa da, her tarayıcı belirttiğiniz her değeri
yüklemez veya bunlara uymaz. Web Uygulaması Manifest dosyanızı alan ve farklı boyutlardaki simgeler, site simgesi, başlangıç modu, renkler vb. için alakalı meta
veya link
etiketlerini otomatik olarak ekleyen bir kitaplık olan PWACompat'ı girin.
Bu, artık sayfalarınıza sayısız, standart ve standart olmayan etiket (<link rel="icon" ... />
veya <meta name="orientation" ... />
gibi) eklemek zorunda olmadığınız anlamına gelir. PWACompat, iOS ana ekran uygulamaları için
dinamik olarak başlangıç ekranı da oluşturur. Böylece, her farklı ekran boyutu için başlangıç ekranı oluşturmak zorunda kalmazsınız.
PWACompat'ı Kullanma
PWACompat'ı kullanmak için tüm sayfalarınızda Web Uygulaması Manifest'inize bağlantı oluşturduğunuzdan emin olun:
<link rel="manifest" href="manifest.webmanifest" />
Ardından, bu komut dosyasını veya eşzamansız yüklü bir gruba ekleyin:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat, manifest dosyanızı alır ve mobil cihazda veya masaüstünde olması fark etmeksizin kullanıcınızın tarayıcısı için gereken işlemi yapar.
Yine de arama dizinine ekleme için yüksek kaliteli en az bir kısayol simgesi eklemenizi öneririz:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
Daha fazla bilgi için en iyi uygulamaları inceleyin.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
Kapsamlı
Desteklenen tarayıcılarda PWACompat aslında ne işe yarar? PWACompat, Web Uygulaması Manifest'inizi yükler ve:
- Manifest'teki tüm simgeler için meta simge etiketleri oluşturun (ör. site simgesi için, eski tarayıcılar)
- Çeşitli tarayıcılar (ör. iOS, WebKit/Chromium çatalları vb.) için bir web uygulamasının nasıl açılması gerektiğini açıklayan yedek meta etiketler oluşturun
- Manifest dosyasına göre tema rengini ayarlar
Safari için PWACompat ayrıca:
apple-mobile-web-app-capable
değerini (tarayıcı Chrome'u olmadan açılır) görüntüleme modlarıstandalone
,fullscreen
veyaminimal-ui
için ayarlar- Manifest arka planını şeffaf simgelere ekleyerek
apple-touch-icon
resimler oluşturur: Aksi takdirde iOS, şeffaflığı siyah oluşturur - Chromium tabanlı tarayıcılar için oluşturulan açılış resimleriyle yakından eşleşen dinamik açılış resimleri oluşturur.
Daha fazla katkıda bulunmak veya ek tarayıcı desteği konusunda yardımcı olmak isterseniz PWACompat artık GitHub'da.
Deneyin
PWACompat; Airhorner, v8.dev ve Emojityper'da yayında. Sitelerinizin başlık HTML'si basit olabilir: Manifesti belirtmeniz ve gerisini PWACompat'ın işlemesine izin vermeniz yeterlidir.
📢🤣🎉