Web uygulaması manifest dosyası ekle

François Beaufort

Pete LePage

Thomas Steiner

Alexey Rodionov

Tarayıcı Desteği

• . 39
• . 79
• . kat
• . 17

Kaynak

Web uygulaması manifest dosyası, tarayıcıya Progresif Web Uygulaması (PWA), kullanıcının masaüstü veya mobil cihaz Tipik bir manifest dosyası en azından şunları içerir:

• Uygulamanın adı
• Uygulamanın kullanması gereken simgeler
• Uygulama başlatıldığında açılması gereken URL

Manifest dosyasını oluşturma

Manifest dosyasının herhangi bir adı olabilir, ancak genellikle manifest.json olarak adlandırılır ve kök dizinden (web sitenizin üst düzey dizini) sunulur. Spesifikasyon uzantının .webmanifest olması gerektiğini önerir, ancak dosyaları daha net okunmasını sağlayın.

Tipik bir manifest aşağıdaki gibi görünür:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

Önemli manifest özellikleri

short_name ve name

Manifest'inizde short_name veya name özelliklerinden en az birini sağlamalısınız. Eğer Her ikisini de sağlarsanız, uygulama yüklenirken name kullanılır ve short_name Kullanıcının ana ekranında, başlatıcıda veya alanın bulunduğu diğer yerlerde kullanılır sınırlı.

Not: İşletim sistemleri genellikle her uygulama penceresi için bir başlığın olmasını bekler. Bu başlık, alt+tab gibi pencere değiştiren çeşitli yüzeylerde gösterilir. genel bakış modunu ve raf pencere listesini içerir. Bağımsız modda çalışan PWA'lar Chromium, short_name (veya bu seçenek yoksa name) öğesini saldırıya uğramasını önlemek için, HTML belgesinin <title> bağımsız uygulamalar, örneğin işletim sistemiyle karıştırılmaya tıklayın. Uygulamanızın güvende kalmasına yardımcı olmak için uygulama adını Bağımsız mod için <title>.

icons

Bir kullanıcı PWA'nızı yüklediğinde tarayıcı için bir simge grubu tanımlayabilirsiniz ana ekranda, uygulama başlatıcıda, görev değiştiricide, başlangıç ekranında ve başka yer.

icons özelliği, bir görsel nesneleri dizisidir. Her nesne src, sizes özelliği ve resmin type özelliğini içerir. Kullanılacak maskelenebilir simgeler, bazen uyarlanabilir olarak da adlandırılır simgelerine göre "purpose": "any maskable" değerini icon özelliğine ekleyin.

Chromium için en az 192x192 piksel boyutunda bir simge ve 512x512 piksel simge. Yalnızca bu iki simge boyutu sağlanırsa Chrome simgeleri cihaza sığacak şekilde otomatik olarak ölçeklendirir. Hedef EBM'nizi ölçeklendirmeyi piksel mükemmelliği için ayarlayabilir, simgeleri artımlı şekilde 48 dp'dir.

Not: Chromium tabanlı tarayıcılar, ölçeklendirilebilen SVG simgelerini de destekler pikselleştirilmiş görünmeden ve ör. gelişmiş özellikleri destekleyen prefers-color-scheme için yanıt verme. Ancak, bu simgeler yükleme sırasında oldukları durumda kalır canlı olarak güncelleniyor. SVG simgelerini güvenli bir şekilde kullanmak için, her zaman yedek olarak da adlandırılır.

id

id özelliği, bir uygulamadır. id özelliğinin manifest dosyasına eklenmesi, Manifest dosyasının start_url veya konumunu içerir ve güncelleme yapılmasını mümkün kılar. dikkat edin. Daha fazla bilgi için bkz. PWA'ları, web uygulaması manifest kimliği mülküyle benzersiz şekilde tanımlama.

start_url

start_url zorunlu bir özelliktir. Tarayıcıya uygulama başlatıldığında çalışmaya başlar ve uygulamanın başlatılmasını engeller. kullanıcı, uygulamanızı ana ekranına eklerken hangi sayfada olduğu fark etmez.

start_url, kullanıcıları ürüne değil, doğrudan uygulamanıza yönlendirmelidir. açılış sayfası. Kullanıcının hemen ardından ne yapmak isteyeceğini düşünün uygulamanızı açın ve bunları oraya yerleştirin.

background_color

Aşağıdaki durumlarda başlangıç ekranında background_color özelliği kullanılır: kullanıma sunduk.

display

Uygulamanız başlatıldığında gösterilecek tarayıcı kullanıcı arayüzünü özelleştirebilirsiniz. Örneğin, Örneğin, adres çubuğunu ve tarayıcı kullanıcı arayüzü öğelerini gizleyebilirsiniz. Oyunlar tam ekranda başlatılacak şekilde de yapılabilir. display özelliği şunlardan birini alır: şu değerler:

Özellik	Davranış
fullscreen	Web uygulamasını herhangi bir tarayıcı kullanıcı arayüzü olmadan açar ve kullanılabilir.
standalone	Bağımsız bir uygulama gibi görünmek ve hissettirmek için web uygulamasını açar. Uygulama çalışır tarayıcıdan ayrı bir pencerede çalışır ve standart adres çubuğu gibi tarayıcı kullanıcı arayüzü öğeleri. Bağımsız kullanıcı arayüzü.
minimal-ui	Bu mod standalone moduna benzer ancak gezinmeyi kontrol etmek için çok az sayıda kullanıcı arayüzü öğesine sahip kullanıcı, örneğin geri ve yeniden yükle düğmeleri gibi. Minimal kullanıcı arayüzü.
browser	Standart bir tarayıcı deneyimi.

display_override

Web uygulamanızın nasıl gösterileceğini seçmek için manifest dosyasında display modunu şu şekilde ayarlayın: daha önce açıklanmış. Tarayıcıların tüm ekranları desteklemesi gerekmez ancak şu sürümleri desteklemeleri gerekir: özellik tanımlı yedek zinciri ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Bilmiyorlarsa zincirdeki bir sonraki görüntüleme moduna dönerler. İçinde nadiren bu yedekler sorunlara neden olabilir. Örneğin, bir geliştirici "browser" ekranına geri dönmeye zorlanmadan "minimal-ui" iste "minimal-ui" desteklenmediğini lütfen ekleyin. Mevcut davranış ayrıca, yeni ekran modlarını geriye dönük olarak uyumlu olarak sunmak imkansızdır. çünkü yedek zincirinde konumları yoktur.

display_override özelliğini kullanarak kendi yedek dizinizi ayarlayabilirsiniz. Tarayıcının, display özelliğinden önce dikkate aldığı bir değer belirtir. Değeri dizelerin dizisi ve ilki ve ikincisi desteklenen görüntüleme modunun uygulandığından emin olun. Hiçbiri desteklenmiyorsa tarayıcı eski sürüme döner display alanı değerlendirilir. display alanı yoksa tarayıcı display_override değerini yoksayar.

Aşağıda, display_override özelliğinin nasıl kullanılacağına dair bir örnek verilmiştir. İş Listesi’ndeki "window-control-overlay" kapsam dışında bu sayfa için.

{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

Tarayıcı, bu uygulamayı yüklerken "window-control-overlay" kullanmayı dener tıklayın. Mevcut bir bütçe yoksa "minimal-ui" değerine geri döner ve ardından display özelliğinden "standalone". Bunların hiçbiri mevcut değilse daha sonra standart yedek zincirine geri döner.

scope

Uygulamanızın scope bölümü, tarayıcının bir parçası olarak kabul ettiği URL'ler grubudur. en iyi şekilde yararlanabilirsiniz. scope, tüm giriş ve çıkışları içeren URL yapısını kontrol eder uygulamaya işaret eder ve tarayıcı, kullanıcının uygulamadan ne zaman ayrıldığını belirlemek için görebilirsiniz.

Dikkat: Kullanıcı, uygulamanızda web sitesinin dışına giden bir bağlantıyı tıklarsa scope, bağlantı mevcut PWA penceresinde açılır ve oluşturulur. Şunu istiyorsanız: bağlantıyı tarayıcı sekmesinde açmak için <a> etiketine target="_blank" ekleyin. Şu tarihte: Android, target="_blank" içeren bağlantılar Chrome özel sekmesinde açılır.

scope ile ilgili birkaç not daha:

• Manifest'inize bir scope dahil etmezseniz varsayılan scope; dosya adı, sorgusu ve parçası kaldırılmış şekilde başlangıç URL'sidir.
• scope özelliği, göreli bir yol (../) veya daha yüksek herhangi bir düzey olabilir. gezinme kapsamının artmasını sağlayacak bir yol (/) web uygulamanızda.
• start_url öğesi kapsam içinde olmalıdır.
• start_url, scope özelliğinde tanımlanan yola bağlıdır.
• / ile başlayan bir start_url her zaman kaynağın kökü olur.

theme_color

theme_color, araç çubuğunun rengini belirler ve Görev değiştiricilerdeki uygulama önizlemesi. theme_color, Dokümanınızın başlığında meta tema rengi belirtildi.

Özel theme_color içeren PWA penceresi örneği.

Medya sorgularındaki theme_color

Tarayıcı Desteği

• . 93
• . 93
• . 106
• . 15

Kaynak

Şu öğenin media özelliğini kullanarak bir medya sorgusunda theme_color değerini ayarlayabilirsiniz: theme_color meta tema renk öğesi. Örneğin, açık mod için tek bir renk tanımlayabilirsiniz diğeri de koyu mod için. Ancak bunları tanımlayamazsınız tercih edin. Daha fazla bilgi için bkz. w3c/manifest#975 GitHub sorunu ile ilgili daha fazla bilgi edinin.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

shortcuts

shortcuts özelliği, bir uygulama kısayolu dizisidir Bunlar, uygulamanızdaki önemli görevlere hızlı erişim sağlayan nesnelerdir. Her üye en az bir name ve bir url içeren bir sözlüktür.

description

description özelliği, uygulamanızın amacını açıklar.

Chrome'da, tüm platformlarda maksimum açıklama uzunluğu 300 karakterdir. Açıklama bundan daha uzunsa, tarayıcı bunu bir metinle keserek üç nokta karakteridir. Android'de, açıklamada ayrıca 7 satırlık metin.

screenshots

screenshots özelliği, uygulamanızı temsil eden bir görüntü nesneleri dizisidir kullanım senaryolarında kullanılabilir. Her nesne bir sizes olan src öğesini içermelidir özelliğinin ve resmin type değerini içerir. form_factor özelliği isteğe bağlıdır. Geniş ekranlara uygun ekran görüntüleri için bunu "wide" olarak ayarlayabilirsiniz veya yalnızca küçük ekran görüntüleri için "narrow" ekleyin.

Chrome'da resmin aşağıdaki ölçütleri karşılaması gerekir:

• Genişlik ve yükseklik en az 320, en fazla 3.840 piksel olmalıdır.
• Maksimum boyut, minimum uzunluğun 2,3 katından fazla olamaz boyutunu oluşturabilirsiniz.
• Uygun form faktörüyle eşleşen tüm ekran görüntüleri aynı olmalıdır en boy oranı.
  • Chrome 109'dan itibaren yalnızca form_factor ayarı "wide" olarak ayarlanmış ekran görüntüleri masaüstünde gösterilir.
• Chrome 109'da, form_factor öğesinin "wide" olarak ayarlandığı ekran görüntüleri Android'de yoksayıldı. form_factor içermeyen ekran görüntüleri şunun için gösterilmeye devam eder: geriye dönük uyumluluk sağlar.

Masaüstündeki Chrome, uyumlu olan en az bir, en fazla sekiz ekran görüntüsü gösterir yardımcı olur. Diğer ekran görüntüleri yoksayılır.

Android'deki Chrome, uyumlu olan en az bir, en çok beş ekran görüntüsü gösterir yardımcı olur. Diğer ekran görüntüleri yoksayılır.

Masaüstü ve mobil cihazlarda daha zengin yükleme kullanıcı arayüzü.

Web uygulaması manifestini sayfalarınıza ekleyin

Manifest'i oluşturduktan sonra sitenizin tüm sayfalarına bir <link> etiketi ekleyin. Progresif Web Uygulaması. Örnek:

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

Manifest isteği olmadan yapılır. kimlik bilgilerinden (ör. aynı alanda olsa bile) emin olun. Manifest dosyası kimlik bilgileri, crossorigin="use-credentials" eklemeniz gerekir kullanabilirsiniz.

Manifest dosyanızı test etme

Manifest dosyanızın doğru şekilde ayarlandığını doğrulamak için Manifest bölmesini kullanın. Chrome Geliştirici Araçları'nın Uygulama paneli

Manifest dosyanızı Geliştirici Araçları'nda test edin.

Bu bölme, manifest dosyanızdaki çoğu dosyanın, ve tüm resimlerin yüklendiğini doğrulayabilmenizi sağlar gerekir.

Mobil cihazlarda başlangıç ekranları

Uygulamanız mobil cihazda ilk kez başlatıldığında, tarayıcı biraz zaman alabilir. ve ilk içeriği oluşturmaya başlayın. Bir web sayfasının kullanıcının uygulamanın çalışmadığını düşünmesine neden olabilecek beyaz ekran, tarayıcı ilk boyaya kadar bir başlangıç ekranı gösteriyor.

Chrome, başlangıç ekranını name uygulamalarından otomatik olarak oluşturur. Manifest'inizde background_color ve icons belirtildi. Sorunsuz bir deneyim için geçişini yapmak sizin için background_color ile aynı renkte olması gerekir.

Chrome, başlangıç ekranları. 192 piksel ve 512 piksel simgeler sağlamak çoğu durumda yeterlidir. ancak daha iyi bir eşleşme için ek simgeler sağlayabilirsiniz.

Daha fazla bilgi

Web uygulaması manifestinize ekleyebileceğiniz diğer özellikler hakkında bilgi edinmek için: MDN Web Uygulaması Manifest dokümanlarını inceleyin.