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

Uygulama kısayolları, kullanıcıların sık ihtiyaç duyduğu bazı yaygın işlemlere hızlı bir şekilde erişebilmenizi sağlar.

François Beaufort
François Beaufort
GitHub
Jungkee Song
Jungkee Song
X GitHub

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ştiricilerinin, kullanıcıların sık ihtiyaç duyduğu bazı yaygın işlemlere 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ğunda (Windows) veya panelinde (macOS) uygulama simgesini sağ tıklayarak ya da Android'de uygulamanın başlatıcı simgesine dokunup basılı tutarak çağrılır.

Android'de açılan bir uygulama kısayolları menüsünün ekran görüntüsü
Android'de uygulama kısayolları menüsü açıldı
Windows'da açılan bir uygulama kısayolları menüsünün ekran görüntüsü
Windows'da uygulama kısayolları menüsü açıldı

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, bir kullanıcı amacını ifade eder. Bu amaçlar, web uygulamanızın kapsamındaki bir URL ile ilişkilendirilir. 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ı manifestinde uygulama kısayollarını tanımlama

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ı olarak belirtmek gerekirse, bu değerler shortcuts dizi üyesinde tanımlanır. 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ın okuyabileceği 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ı manifesti 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 sağlayın (ör. 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 piksel simgeler). 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österilmesi için simgenin en az 72x72 piksel 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 Geliştirici Araçları'nın Uygulama panelindeki Manifest bölmesini kullanın.

Geliştirici Araçları'ndaki uygulama kısayollarının ekran görüntüsü
Geliştirici Araçları'nda gösterilen uygulama kısayolları

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. Bu, sağlanmışsa tüm kısayol simgelerinin düzgün şekilde yüklendiğini doğrulamanızı kolaylaştırır.

Progressive Web Uygulaması güncellemeleri günde bir kez sınırlandığından uygulama kısayolları tüm kullanıcılar tarafından 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ıralayın

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'daki Chrome ve Edge, uygulama kısayollarının sayısını 10 ile sınırlarken Android'deki Chrome yalnızca 3 tane 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

Her zaman görünür olmayabileceğinden, uygulama kısayollarını ayırt etmek için simgelere güvenmemelisiniz. Ö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.

Tarayıcı desteği

  • Chrome: 96.
  • Edge: 96.
  • Firefox: Desteklenmez.
  • Safari: 17.4.

Kaynak

ChromeOS'te açılan bir uygulama kısayolları menüsünün ekran görüntüsü
ChromeOS'te uygulama kısayolları menüsü açıldı

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ı kolayca Güvenilir Web Etkinliği'ne dönüştürmenizi sağlayan mükemmel bir araç olan PWABuilder, bazı uyarılarla birlikte uygulama kısayollarını destekler.

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

Örnek

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