PWACompat - Manifes Aplikasi Web untuk semua browser

Anda telah mendesain aplikasi web, menulis kode dan pekerja layanannya, serta menambahkan Manifes Aplikasi Web untuk menjelaskan perilakunya saat 'diinstal' di perangkat pengguna. Hal ini mencakup hal-hal seperti ikon beresolusi tinggi yang akan digunakan, misalnya peluncur atau pengalih aplikasi ponsel, atau cara aplikasi web Anda dimulai saat dibuka dari layar utama pengguna.

Meskipun banyak browser akan mematuhi Manifes Aplikasi Web, tidak semua browser akan memuat atau mematuhi setiap nilai yang Anda tentukan. Masukkan PWACompat, library yang mengambil Manifes Aplikasi Web Anda dan otomatis menyisipkan tag meta atau link yang relevan untuk ikon dengan berbagai ukuran, favicon, mode pengaktifan, warna, dll.

PWACompat mengambil Manifes Aplikasi Web dan menambahkan tag meta, link, dll. standar dan non-standar.
PWACompat mengambil Manifes Aplikasi Web dan menambahkan tag meta, link, dll. standar dan non-standar.

Artinya, Anda tidak perlu lagi menambahkan tag standar dan non-standar yang tak terhitung jumlahnya (seperti <link rel="icon" ... /> atau <meta name="orientation" ... />) ke halaman. Dan untuk beranda iOS aplikasi layar, PWACompat bahkan akan membuat layar pembuka secara dinamis sehingga Anda tidak perlu menghasilkan satu untuk setiap ukuran layar yang berbeda.

Layar pembuka iOS untuk Emojityper, yang dibuat oleh PWACompat

Menggunakan PWACompat

Untuk menggunakan PWACompat, pastikan untuk menautkan ke Aplikasi Web Anda Manifes di semua halaman Anda:

<link rel="manifest" href="manifest.webmanifest" />

Kemudian, sertakan skrip ini, atau tambahkan ke paket yang dimuat secara asinkron:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat akan mengambil file manifes dan melakukan pekerjaan yang diperlukan untuk browser pengguna, apa pun itu apakah mereka menggunakan perangkat seluler atau desktop.

Sebaiknya tetap tambahkan setidaknya satu ikon pintasan berkualitas tinggi, untuk pengindeksan penelusuran:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

Untuk informasi selengkapnya, lihat praktik terbaik.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

Liputan Khusus

Untuk browser yang didukung, apa yang sebenarnya dilakukan PWACompat? PWACompat akan memuat Manifes Aplikasi Web Anda dan:

  • Membuat tag ikon meta untuk semua ikon dalam manifes (misalnya, untuk favicon, browser lama)
  • Buat tag meta penggantian untuk berbagai browser (mis. iOS, fork WebKit/Chromium, dll.) yang menjelaskan bagaimana aplikasi web harus membuka
  • Menetapkan warna tema berdasarkan manifes

Untuk Safari, PWACompat juga:

  • Menyetel apple-mobile-web-app-capable (membuka tanpa chrome browser) untuk mode tampilan standalone, fullscreen, atau minimal-ui
  • Membuat gambar apple-touch-icon, menambahkan latar belakang manifes ke ikon transparan: jika tidak, iOS akan merender transparansi sebagai warna hitam
  • Membuat gambar pembuka yang dinamis, yang sangat cocok dengan gambar pembuka yang dibuat untuk aplikasi berbasis Chromium browser

Jika Anda ingin berkontribusi lebih banyak atau membantu dengan dukungan {i>browser<i} tambahan, PWACompat ada di GitHub.

Cobalah

PWACompat aktif di Airhorner, v8.dev, dan Emojityper. HTML header situs Anda dapat dibuat sederhana: cukup tentukan manifes dan biarkan PWACompat menangani sisanya.

📢🤣🎉