Uygulama kısayollarıyla işlerinizi hızlıca tamamlayın

Uygulama kısayolları, kullanıcıların sık ihtiyaç duyduğu birkaç işleme hızlı erişim sağlar.

François Beaufort

Jungkee Song

Web platformu, kullanıcıların üretkenliğini artırmak ve önemli görevlerle yeniden etkileşimi kolaylaştırmak için artık uygulama kısayollarını destekliyor. Web geliştiricilerin, kullanıcıların sıklıkla ihtiyaç duyduğu birkaç yaygın işleme hızlı erişim sağlamasına olanak tanır.

Bu makalede, uygulama kısayollarını nasıl tanımlayacağınız açıklanmaktadır. Ayrıca, bu konularla ilgili en iyi uygulamalardan bazılarını da ö��reneceksiniz.

Uygulama kısayolları hakkında

Uygulama kısayolları, kullanıcıların web uygulamanızdaki yaygın veya önerilen görevleri hızlı bir şekilde başlatmasına yardımcı olur. Uygulama simgesinin gösterildiği her yerden bu görevlere kolayca erişmek, kullanıcıların üretkenliğini artırmanın yanı sıra web uygulamasıyla etkileşimlerini de artırır.

Uygulama kısayolları menüsü, kullanıcının masaüstündeki görev çubuğundaki (Windows) veya yuvadaki (macOS) uygulama simgesi sağ tıklanarak veya Android'de uygulamanın başlatıcı simgesine dokunup basılı tutularak çağrılır.

Uygulama kısayolları menüsü yalnızca kullanıcının masaüstü veya mobil cihazına yüklenmiş Progresif Web Uygulamaları için gösterilir. Yüklenebilirlik koşulları hakkında bilgi edinmek için "PWA'yı öğrenin" modülümüzde Yükleme bölümüne göz atın.

Her uygulama kısayolu, web uygulamanızın kapsamı dahilindeki bir URL ile ilişkilendirilen bir kullanıcı amacını ifade eder. Kullanıcı, uygulama kısayolunu etkinleştirdiğinde URL açılır. Uygulama kısayollarına örnek olarak aşağıdakiler verilebilir:

• Üst düzey gezinme öğeleri (ör. ana sayfa, zaman çizelgesi, son siparişler)
• Arama
• Veri girişi görevleri (ör. e-posta veya tweet oluşturma, makbuz ekleme)
• Etkinlikler (ör. en popüler kişilerle sohbet başlatma)

Web uygulaması manifest dosyasında uygulama kısayollarını tanımlayın

Uygulama kısayolları isteğe bağlı olarak web uygulaması manifest'inde tanımlanır. Bu JSON dosyası, tarayıcıya web uygulamanız ve kullanıcının masaüstüne veya mobil cihazına yüklendiğinde nasıl davranması gerektiği hakkında bilgi verir. Daha ayrıntılı belirtmek gerekirse shortcuts dizi üyesinde tanımlanırlar. Aşağıda olası bir web uygulaması manifesti örneği verilmiştir.

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts dizisinin her üyesi, en az bir name ve bir url içeren bir sözlüktür. Diğer üyeler isteğe bağlıdır.

name

Kullanıcıya gösterilen uygulama kısayolunun okunabilir etiketi.

short_name (isteğe bağlı)

Alan sınırlı olduğunda kullanılan, kullanıcılar tarafından okunabilen etiket. İsteğe bağlı olsa da bu bilgileri sağlamanız önerilir.

description (isteğe bağlı)

Uygulama kısayolunun kullanıcılar tarafından okunabilir amacı. Bu özellik şu anda kullanılmasa da gelecekte yardımcı teknolojilere dahil edilebilir.

url

Kullanıcı uygulama kısayolunu etkinleştirdiğinde açılan URL. Bu URL, web uygulaması manifestinin kapsamında olmalıdır. Göreli bir URL ise temel URL, web uygulaması manifestinin URL'si olur.

icons (isteğe bağlı)

Görüntü kaynağı nesneleri dizisi. Her nesne src ve bir sizes özelliği içermelidir. Web uygulaması manifest simgelerinin aksine, resmin type isteğe bağlıdır. SVG dosyaları, bu makalenin yazıldığı sırada desteklenmiyor. Bunun yerine PNG kullanın.

Piksel mükemmelliğinde simgeler istiyorsanız bunları 48 dp'lik artışlarla (yani 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 piksellik simgeler) sağlayın. Aksi takdirde, tek bir 192x192 piksel simge kullanmanız önerilir.

Kalite ölçütü olarak simgeler, Android'de cihazın ideal boyutunun en az yarısı (48 dp) olmalıdır. Örneğin, xxhdpi ekranda görüntülenmesi için simgenin en az 72 x 72 piksel boyutunda olması gerekir. (Bu, dp birimlerini piksel birimlerine dönüştürme formülünden türetilmiştir.)

Uygulama kısayollarınızı test etme

Uygulama kısayollarınızın doğru şekilde ayarlandığını doğrulamak için DevTools'un Uygulama panelindeki Manifest bölmesini kullanın.

Bu bölmede, uygulama kısayolları da dahil olmak üzere manifest'inizin birçok özelliğinin kullanıcı tarafından okunabilir bir sürümü sağlanır. Varsa tüm kısayol simgelerinin düzgün şekilde yüklendiğini doğrulamayı kolaylaştırır.

Progresif Web Uygulaması güncellemeleri günde bir kez olacak şekilde sınırlandırıldığından uygulama kısayolları tüm kullanıcılara hemen kullanılamayabilir. Chrome'un web uygulaması manifestindeki güncellemeleri nasıl işlediği hakkında daha fazla bilgi edinin.

En iyi uygulamalar

Uygulama kısayollarını önceliğe göre sıralama

Kısayolların sırası, manifest dosyasında tanımladığınız sıraya göre belirlenir. Gösterilen uygulama kısayollarının sayısı platforma göre değiştiğinden uygulama kısayollarını önceliğe göre sıralamanızı öneririz. Örneğin, Windows'da Chrome ve Edge uygulama kısayollarını 10 ile sınırlandır��rken Android için Chrome yalnızca 3 kısayol gösterir. Android 7 için Chrome 92'den önce 4'e izin veriliyordu. Chrome 92, uygulama için mevcut kısayol alanlarından birini kullanarak site ayarlarına bir kısayol ekledi.

Farklı uygulama kısayolu adları kullanın

Uygulama kısayollarını ayırt etmek için simgelere güvenmemelisiniz. Simgeler her zaman görünmeyebilir. Örneğin, macOS, dock kısayolları menüsündeki simgeleri desteklemez. Her uygulama kısayolu için farklı adlar kullanın.

Uygulama kısayollarının kullanımını ölçme

Uygulama kısayolları url girişlerini, analiz amacıyla start_url ile yaptığınız gibi ek açıklamayla belirtmeniz gerekir (ör. url: "/my-shortcut?utm_source=homescreen").

Tarayıcı desteği

Uygulama kısayolları, aşağıda listelenen platformlarda ve sürümlerde kullanılabilir.

Güvenilir Web Etkinliği desteği

Trusted Web Activity kullanan Android uygulamaları oluşturmak için önerilen araç olan Bubblewrap, web uygulaması manifestinden uygulama kısayollarını okur ve Android uygulaması için ilgili yapılandırmayı otomatik olarak oluşturur. Uygulama kısayollarının zorunludur ve Bubblewrap'ta en az 96x96 piksel olması gerektiğini unutmayın.

Bir progresif web uygulamasını Güvenilir Web Etkinliği'ne kolayca dönüştürmek için mükemmel bir araç olan PWABuilder, bazı ihtiyatlarla uygulama kısayollarını destekler.

Güvenilir Web Etkinliği'ni Android uygulamalarına manuel olarak entegre eden geliştiriciler, aynı davranışları uygulamak için Android uygulama kısayollarını kullanabilir.

Örnek

Uygulama kısayolları örneğine ve kaynaklarına göz atın.

Faydalı bağlantılar

• MDN
• Spec
• Uygulama kısayolları örneği | Uygulama kısayolları örnek kaynağı
• Blink Bileşeni: UI>Browser>WebAppInstalls