PWA Manifest: Web Uygulamanızı Kolay Yoluyla Oluşturun

Düzgün yapılandırılmış bir web uygulaması bildirimi, PWA'nızın yükleme işlemi için çok önemlidir, çünkü onsuz tüm işlem mümkün değildir. Ve şaşırtıcı bir şekilde, web uygulamanızın manifestosunu düzgün bir şekilde yapılandırmak da o kadar zor değil.

Bu ne için?

Web uygulaması bildirimi, uygulamanızın açılış ekranında ve kullanıcının ana ekranında kendisini kullanıcıya nasıl sunacağını belirlediğinden, PWA'nızın hayati bir parçasıdır. Bunların tümü, kullanıcıların uygulamanızla ilgili izlenimlerinin şekillenmesine katkıda bulunan önemli başlangıç ​​aşamalarıdır; bu nedenle, uygulamayı doğru yapmanız sizin için önemlidir.

manifest.json'unuzu yapılandırmanın yolları

En baştan başlamak

JSON veri formatına biraz aşina olduğunuzda, herhangi bir çaba harcamadan kendinize ait bir web uygulaması bildirimi oluşturabilirsiniz.

Tipik bir manifest.json şöyle görünmelidir:

 {
    "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"
        }
    ]
}

Kodun bazı bölümlerini dışarıda bırakabilirsiniz, ancak yine de bazı gerekli üyeler vardır ve bunlar olmadan kullanıcı PWA'nızı kuramaz:

 ad, kısa ad, simgeler, görüntüleme, start_url

• name : Ana ekranda ve diğer çeşitli yerlerde uygulamanızın simgesinin altında görüntülenen uygulamanızın adı. name özelliğinizin değerini kısa ve basit tutun.

• short-name : name özelliğinizin değeri kullanıcının ekranına sığmadığında, bu özelliğin değeri kullanılacaktır. short-name 20 karakterden kısa olması önerilir. Aslında, 10 karakter için ateş edin.

• icons : Farklı işletim sistemleri ve cihazlar için çeşitli görüntülerden oluşabilen uygulamanızın simgeleri. Tarayıcının ana ekrana, açılış ekranına vb. eklemek için kullanması için bir dizi simge tanımlayabilirsiniz.

Örneğin, yalnızca iOS, 4 aygıtı için 4 farklı boyut gerektirir:

• iPhone: 120 x 120 piksel & 180 x 180 piksel
• iPad Pro: 167 x 167 piksel
• iPad ve iPad mini: 152 x 152 piksel

Google Chrome bile, iOS ve Android'de tam kullanılabilirlik için en az 2 farklı boyut gerektirir:

• 512 x 512 piksel
• 192 x 192 piksel

Resim simgenizin çağrılabilmesi için bir dizi özellik kullanılır, yani src , type ve sizes .

• src : simgenin resim dosyasının yolu
• types : görüntü dosyası türü
• sizes : piksel cinsinden görüntünün genişlik x yüksekliği

 "simgeler": [ 
    {
       "src": "/imgs/icon152.png",
       "type" : "resim/png",
       "boyutlar" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "type" : "resim/png",
       "boyutlar" : "512x512"
    }
]

• display : Uygulamanın nasıl görüntülenmesi gerektiğini belirtir. Sürükleyici ve uygulama benzeri bir deneyim için, fullscreen ayarlamanız önerilir (UI yok). Bununla birlikte, performans açısından daha az maliyetli olan standalone , minimal-ui gibi seçenekler de mevcuttur, ancak bunlar sürükleyici deneyimi kaybetme pahasına gelir (durum çubuğu hala gösterilebilir).

• start_url : Uygulamanızın başladığı yolu gösterir. start_url değeriniz basit olabilir / eğer uygulamanız manifest.json dosyanızın depolandığı aynı .root dizininden başlıyorsa.

İsteğe bağlı üyeler

Kitaba göre hareket etmek bir şeydir ama daha iyi olmaya çalışmak için her zaman yer vardır. Daha iyi ve daha ayrıntılı bir web uygulaması bildirimi için önerilen anahtarlarımız aşağıdadır:

• scope : bir kullanıcının gidebileceği kapsamı sınırlar. Kullanıcı kapsamın dışına çıkarsa, tarayıcı sekmesi veya penceresi içinde normal bir web sayfasına döner. Web sitenizin kapsamını belirlemek için bir / veya web sitenizin tam URL'sini girmeniz yeterlidir.

Notlar :
– scope varsayılan davranışı, manifest.json dosyanızın sunulduğu dizindir.
– Web uygulamasında açılan herhangi bir bağlantı, mevcut PWA penceresinde işlenecektir. Bir tarayıcı sekmesinde herhangi bir bağlantıyı açmak için <a> etiketine target="_blank" eklemeniz gerekir.
– start_url kapsamda olmalıdır.

• background_color : Belirli uygulama bağlamlarında arka plan rengini belirtir. Daha spesifik olarak, bu alan açılış ekranının arka plan rengini ayarlamak için kullanılabilir.

• theme_color : Adres çubuğu gibi web uygulamasının UI öğelerinin tema rengini belirtir. Değişiklik site genelinde uygulanır ve yalnızca site ana ekrandan başlatıldığında etkilidir.

Notlar : Sayfa düzeyinde yapılandırmalarınız — örneğin, theme-color meta etiketi: <meta name="theme-color" content="#3367D6"> — web uygulaması bildirimindeki theme_color değerini geçersiz kılar.

• description : Bu kendi kendini açıklayıcı olmalıdır.

• shortcuts : Web uygulaması içindeki sayfaların kısayollarını tanımlar. Uygulama kısayollarına, Android'de uygulamanın başlatıcı simgesine uzun basarak veya görev çubuğundaki (Windows)/dock'taki (macOS) uygulama simgesine sağ tıklayarak erişilebilir.

 "kısayollar": [
  {
    "ad": "Bildirimler",
    "url": "/kullanıcı/bildirimler/",
    "description": "Kaçırdığınız haberler"
  },
  {
    "name": "Yeni sipariş oluştur",
    "url": "/create/sipariş"
  },
  {
    "name": "İstek listem",
    "url": "/kullanıcı/istek listesi"
  }
]

Bir web uygulaması bildirim oluşturucu kullanma

Bunu yapmanın daha kolay ve zahmetsiz bir yolu, bir web uygulaması bildirim oluşturucu kullanmaktır. Jeneratör girdinizi alır ve buna bağlı olarak olduğu gibi kullanılabilecek tamamen işlevsel bir web uygulaması bildirimi oluşturur.

manifest.json'unuzu bağlayın

Her şey düzgün bir şekilde yapılandırıldığında, sonraki adım, HTML başlığınızdaki web uygulaması bildirimine başvurmaktır.

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

Web uygulaması bildirimine başvurduktan sonra, desteklenen tüm tarayıcılar artık manifest.json dosyanızı doğru şekilde tanıyacaktır. Şu anda desteklenen tarayıcıların tam listesi için CanIUse'a bakın.

Çözüm

Ve basit bir web uygulaması bildirimi için bu kadar. Tamamen işlevsel bir manifest.json oluşturmanız hiç zaman almaz. Ve sadece birkaç ek ince ayar ile web uygulamanız diğer PWA'lar gibi kurulabilir hale getirilebilir.