Membuat Layar Splash PWA Kustom

Seperti yang dinyatakan sebelumnya dalam tutorial manifes PWA kami, Anda dapat membuat layar pembuka unik untuk PWA Anda hanya dengan beberapa baris kode di dalam manifest.json Anda. Prosesnya tidak terlalu rumit seperti yang diharapkan, dan Anda benar-benar dapat menyelesaikan semuanya dalam waktu singkat. Mari kita langsung ke dalamnya, mari kita:

Kasus untuk layar splash di PWA

Saat tidak dikonfigurasi, pengguna yang membuka PWA Anda secara default akan disambut dengan layar putih kosong. Ini akan baik-baik saja dengan sendirinya, karena pada perangkat modern, waktu untuk membuka aplikasi hampir instan. Namun, pada perangkat yang lebih lambat, ini bisa menjadi masalah karena merusak persepsi awal pengguna tentang aplikasi Anda. Ditambah dengan fakta bahwa perangkat dengan spesifikasi lebih rendah dengan RAM 1GB masih menjadi yang paling umum, layar splash unik yang mewakili merek Anda adalah suatu keharusan.

Cara membuat layar splash Anda sendiri

Di Android, prosesnya secepat memasukkan tiga baris kode. Untuk iOS, bagaimanapun, ini adalah cerita yang berbeda karena Anda harus membuat ukuran gambar splash yang berbeda untuk ukuran layar yang berbeda.

Untuk Android

Melakukannya secara manual

Di file manifest.json Anda, pastikan ketiga properti ini: name , background_color , dan icons dikonfigurasi dengan benar:

• name : Nama PWA Anda
• background_color : Warna latar belakang layar splash Anda. Hanya nilai warna CSS yang valid yang dikenali.
• icons : Ikon .png dengan ukuran minimum 192×192 px.

Misalnya, inilah tampilan manifest.json yang dikonfigurasi dengan benar. Perhatikan bagaimana properti icons memiliki empat ukuran berbeda — ikon dengan ukuran berbeda ini disediakan untuk memberikan kompatibilitas terbaik untuk perangkat yang berbeda.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "tampilan": "layar penuh",
    "lingkup": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Solusi eCommerce Generasi Selanjutnya untuk Magento",
    "ikon": [
        {
            "src": "/icon-192x192.png",
            "ukuran": "192x",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-256x256.png",
            "ukuran": "256x",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-384x384.png",
            "ukuran": "384x",
            "ketik": "gambar/png"
        },
        {
            "src": "/icon-512x512.png",
            "ukuran": "512x",
            "ketik": "gambar/png"
        }
    ]
}

Setelah selesai menyiapkan properti (dan file manifest.json Anda), browser yang mendukung PWA (biasanya Chrome) akan secara otomatis menghasilkan ukuran ikon yang berbeda untuk layar splash Anda dan menampilkannya sesuai dengan itu.

Cukup mudah, bukan? Jika Anda bertanya kepada kami, kami pikir seperti inilah seharusnya pengalaman yang berkembang.

 Bacaan yang disarankan: Manifes PWA: Membuat Manifes Aplikasi Web Anda dengan Cara Mudah

Menggunakan Generator Manifes

Anda dapat dengan mudah mengotomatisasi proses ini dengan menggunakan Manifest Generator kami. Cukup masukkan informasi yang diperlukan dan generator kami akan menghasilkan .zip untuk Anda yang akan berisi semua informasi yang Anda perlukan.

Untuk iOS

Apple tentu tidak ingin membuat proses ini mudah bagi pengembang. Pada saat penulisan ini, status dukungan Manifes Aplikasi Web masih terdaftar sebagai Didukung Sebagian — tidak berubah dua tahun setelah kemunculan pertamanya. Ini berarti PWA tidak menerima dukungan untuk icons , minimal-ui , fullscreen , theme-color , dan orientation .

Untungnya, masih ada cara untuk mengatasinya yaitu dengan menggunakan tag meta <apple-touch-startup-image> . Bukan solusi ideal — tetapi berhasil.

 <!-- Layar Pembuka untuk iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) dan (device-height: 812px) dan (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

Dengan menggunakan tag meta <apple-touch-startup-image> , Anda dapat menentukan gambar resolusi tetap untuk layar splash PWA Anda (yaitu startup-image ). Layar splash khusus ini hanya kompatibel dengan satu ukuran layar, dan Anda akan membutuhkan lebih banyak ukuran gambar yang berbeda untuk mengakomodasi berbagai ukuran layar produk Apple di pasaran.

Artinya, Anda harus membuat dua layar pembuka untuk setiap ukuran layar, satu untuk setiap orientasi (lanskap & potret). Beginilah tampilan kode kita ketika kita telah membahas beberapa perangkat dalam daftar:

 <!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) dan (device-height: 812px) dan (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) dan (device-height: 667px) dan (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) dan (device-height: 736px) dan (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) dan (device-height: 568px) dan (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini, Udara (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) dan (device-height: 1024px) dan (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) dan (device-height: 1112px) dan (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) dan (device-height: 1366px) dan (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

Tautkan kode ini di <head> index.html Anda, dan jangan lupa untuk memasukkan tag <meta> di bawah untuk mengaktifkan perilaku PWA, jika tidak, layar pembuka kami tidak akan berfungsi sama sekali.

 <meta name="apple-mobile-web-app-capable" content="yes">

Dengan ini, Anda harus siap. Luncurkan PWA iOS Anda dan Anda akan dapat melihat layar splash Anda.

Menggunakan Generator Layar Percikan iOS

Tentu saja, ada cara yang lebih baik untuk mengotomatisasi proses ini, yaitu dengan menggunakan iOS Splash Screen Generator. Dengan gambar Anda sebagai sumbernya, generator akan menghasilkan untuk Anda gambar berukuran berbeda bersama dengan kode HTML yang diperlukan untuk dimasukkan ke dalam index.html Anda.

Kesimpulan

Meskipun bukan merupakan bagian dari pengalaman orientasi, layar splash tetap memainkan peran penting dalam menciptakan persepsi positif terhadap merek Anda — ini adalah buah yang mudah digantung yang berpotensi memberikan hasil yang tidak Anda harapkan.

Kami berharap tutorial ini memecahkan masalah Anda yang sebenarnya. Menerapkan & menyesuaikan PWA dapat memusingkan jika Anda dan tim Anda tidak memiliki banyak pengalaman dengannya. Solusi pengembangan PWA profesional seperti SimiCart dapat membantu membuatnya lebih mudah.