PWACompat - Tüm tarayıcılar için Web Uygulaması Manifesti

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.

PWACompat, bir Web Uygulaması Manifest'ini alıp standart ve standart olmayan meta, bağlantı vb. etiketler ekler.
PWACompat, bir web uygulaması manifesti ile standart ve standart olmayan meta, bağlantı vb. etiketler ekler.

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 tarafından oluşturulan, Emojityper iOS başlangıç ekranı

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 veya minimal-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.

📢🤣🎉