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' pada perangkat pengguna. Hal ini mencakup hal-hal seperti ikon beresolusi tinggi yang digunakan, misalnya peluncur ponsel atau pengalih aplikasi, atau cara aplikasi web harus dimulai saat dibuka dari layar utama pengguna.

Dan 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 secara otomatis menyisipkan tag meta atau link yang relevan untuk ikon dengan berbagai ukuran, favicon, mode startup, warna, dll.

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

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

Layar pembuka iOS untuk Emojityper, yang dihasilkan oleh PWACompat

Menggunakan PWACompat

Untuk menggunakan PWACompat, pastikan untuk menautkan ke Manifes Aplikasi Web 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 Anda dan melakukan pekerjaan yang diperlukan untuk browser pengguna, terlepas dari apakah mereka menggunakan perangkat seluler atau desktop.

Sebaiknya Anda tetap menambahkan minimal 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.

Catatan: Atau, pertimbangkan untuk memuat library setelah paket utama Anda dengan aset import() dinamis di platform yang penting bagi Anda. Meskipun memiliki layar pembuka adalah hal yang bagus, layar pembuka tidak sepenting kode situs Anda yang lain.

<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 sebenarnya yang 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 (misalnya, fork WebKit/Chromium, dll.) yang menjelaskan cara aplikasi web dibuka
• Menyetel warna tema berdasarkan manifes

Untuk Safari, PWACompat juga:

• Menetapkan apple-mobile-web-app-capable (terbuka 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 hitam
• Membuat gambar pembuka dinamis, yang sangat cocok dengan gambar pembuka yang dihasilkan untuk browser berbasis Chromium

Jika Anda ingin memberikan lebih banyak kontribusi atau membantu terkait dukungan browser tambahan, PWACompat ada di GitHub.

Cobalah

PWACompat live di Airhorner, v8.dev, dan Emojityper. HTML header situs Anda bisa jadi sederhana: cukup tentukan manifes dan biarkan PWACompat menangani sisanya.

📢🤣🎉