Özel PWA Açılış Ekranı Oluşturma

PWA bildirim öğreticimizde daha önce belirtildiği gibi, manifest.json dosyanızın içinde yalnızca birkaç satır kodla PWA'nız için benzersiz bir açılış ekranı oluşturabilirsiniz. Süreç beklendiği gibi aşırı karmaşık değildir ve aslında her şeyi çok kısa sürede tamamlayabilirsiniz. Hemen konuya girelim mi:

PWA'larda açılış ekranları için durum

Yapılandırılmadığında, PWA'nızı açan kullanıcılar varsayılan olarak boş, beyaz bir ekranla karşılaşacak şekilde ayarlanmıştır. Bu, modern cihazlarda olduğu gibi kendi başına iyi olmalı, uygulamaları açma zamanı neredeyse anında. Ancak, daha yavaş cihazlarda, kullanıcının uygulamanıza ilişkin ilk algısını bozduğu için bu bir sorun olabilir . 1 GB RAM'e sahip düşük özellikli cihazların hala en yaygın olduğu gerçeğiyle birleştiğinde, markanızı temsil eden benzersiz bir açılış ekranı bir zorunluluktur.

Kendi açılış ekranınızı nasıl oluşturabilirsiniz?

Android'de süreç, üç satır kod koymak kadar hızlıdır. Ancak iOS için, farklı ekran boyutları için farklı açılış görüntüsü boyutları yapmanız gerekeceğinden bu farklı bir hikaye.

Android için

manuel olarak yapmak

manifest.json dosyanızda şu üç özelliğin olduğundan emin olun: name , background_color ve icons doğru şekilde yapılandırın:

• name : PWA'nızın adı
• background_color : Açılış ekranınızın arka plan rengi. Yalnızca geçerli CSS renk değerleri tanınır.
• icons : Minimum 192×192 piksel boyutunda bir .png simgesi.

Örneğin, uygun şekilde yapılandırılmış bir manifest.json nasıl görünmesi gerektiği aşağıda açıklanmıştır. icons özelliğinin nasıl dört farklı boyuta sahip olduğuna dikkat edin - bu farklı boyuttaki simgeler, farklı cihazlar için en iyi uyumluluğu sağlamak amacıyla sağlanmıştır.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "ekran": "tam ekran",
    "dürbün": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Magento için Yeni Nesil e-Ticaret Çözümleri",
    "simgeler": [
        {
            "src": "/icon-192x192.png",
            "boyutlar": "192x",
            "type": "resim/png"
        },
        {
            "src": "/icon-256x256.png",
            "boyutlar": "256x",
            "type": "resim/png"
        },
        {
            "src": "/icon-384x384.png",
            "boyutlar": "384x",
            "type": "resim/png"
        },
        {
            "src": "/icon-512x512.png",
            "boyutlar": "512x",
            "type": "resim/png"
        }
    ]
}

Özellikleri (ve manifest.json dosyanızı) ayarlamayı bitirdikten sonra, PWA'yı (tipik olarak Chrome) destekleyen tarayıcılar, açılış ekranınız için otomatik olarak farklı simge boyutları oluşturur ve bunları buna göre görüntüler.

Oldukça zahmetsiz, değil mi? Bize sorarsanız, gelişen deneyimin böyle hissetmesi gerektiğini düşünüyoruz.

 Önerilen okuma: PWA Bildirimi: Web Uygulamanızı Oluşturma Kolay Yolu Gösterin

Manifest Oluşturucu Kullanmak

Manifest Jeneratörümüzü kullanarak bu işlemi zahmetsizce otomatikleştirebilirsiniz. Sadece gerekli bilgileri girin ve oluşturucumuz sizin için ihtiyacınız olan tüm bilgileri içeren bir .zip oluşturacaktır.

iOS için

Apple kesinlikle bu süreci geliştiriciler için kolaylaştırmak istemiyor. Bunu yazarken, Web App Manifest desteğinin durumu, ilk görünümünden iki yıl sonra değişmeden, Kısmen Destekleniyor olarak listeleniyor. Bu, PWA'ların icons , minimal-ui kullanıcı arabirimi , fullscreen , theme-color ve orientation için destek almadığı anlamına gelir.

Neyse ki, bunun için <apple-touch-startup-image> meta etiketini kullanmak için hala bir yol var. İdeal bir çözüm değil - ama işe yarıyor.

 <!-- iPhone X için Başlangıç ​​Ekranı (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) ve (device-height: 812px) ve (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

<apple-touch-startup-image> meta etiketini kullanarak, PWA'nızın açılış ekranı için sabit çözünürlüklü bir görüntü belirleyebilirsiniz (yani, startup-image ). Bu özel açılış ekranı yalnızca bir ekran boyutuyla uyumludur ve piyasadaki farklı Apple ürünlerinin ekran boyutlarına uyum sağlamak için çok daha fazla farklı görüntü boyutuna ihtiyacınız olacaktır.

Bunun anlamı, her ekran boyutu için her yön (manzara ve portre) için bir tane olmak üzere iki açılış ekranı oluşturmanız gerekeceğidir. Listedeki bazı cihazları kapsadığımızda kodumuz şu şekilde görünmelidir:

 <!-- iPhone X (1125 piksel x 2436 piksel) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) ve (device-height: 812px) ve (-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) ve (device-height: 667px) ve (-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) ve (device-height: 736px) ve (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640 piksel x 1136 piksel) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) ve (device-height: 568px) ve (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini, Hava (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) ve (device-height: 1024px) ve (-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) ve (device-height: 1112px) ve (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12,9" (2048 piksel x 2732 piksel) -->
<link rel="apple-touch-startup-image" media="(cihaz genişliği: 1024 piksel) ve (cihaz yüksekliği: 1366 piksel) ve (-webkit-device-piksel oranı: 2)" href="/apple -launch-2048x2732.png">

Bu kodu index.html 'nizin <head> dizinine bağlayın ve PWA davranışını etkinleştirmek için aşağıdaki <meta> etiketini eklemeyi unutmayın, aksi takdirde açılış ekranımız hiç çalışmayacaktır.

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

Bununla, hepiniz hazır olmalısınız. iOS PWA'nızı başlatın ve açılış ekranınızı görebileceksiniz.

Bir iOS Açılış Ekranı Oluşturucu Kullanma

Tabii ki, bu işlemi otomatikleştirmenin daha iyi yolları var, ki bu iOS Açılış Ekranı Oluşturucu'yu kullanmaktır. Kaynak olarak resminizle birlikte, oluşturucu sizin için index.html eklenecek gerekli HTML koduyla birlikte farklı boyutlu resimler üretecektir.

Çözüm

İlk katılım deneyiminin tam olarak bir parçası olmasa da, açılış ekranı markanız hakkında olumlu bir algı oluşturmada hala önemli bir rol oynamaktadır - bu, beklemeyeceğiniz sonuçları potansiyel olarak getirebilecek düşük asılı meyvelerdir.

Bu eğitimin tam olarak sorununuzu çözeceğini umuyoruz. Siz ve ekibiniz bu konuda fazla deneyime sahip değilseniz, PWA'yı uygulamak ve özelleştirmek başınızı ağrıtabilir. SimiCart gibi profesyonel bir PWA geliştirme çözümü, bunu çok daha kolay hale getirmeye yardımcı olabilir.