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

Jungkee Song

Web platformu, kullanıcıların üretkenliğini artırmak ve temel 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 bununla ilişkili bazı en iyi uygulamaları öğreneceksiniz.

Uygulama kısayolları hakkında

Uygulama kısayolları, kullanıcıların web uygulamanızda sık gerçekleştirilen veya önerilen görevlere hızlı bir şekilde başlamalarına yardımcı olur. Uygulama simgesinin gösterildiği her yerden bu görevlere kolayca erişim, hem kullanıcıların üretkenliğini artırır hem de web uygulamasıyla etkileşimini 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ünde veya mobil cihazında yüklü olan Progresif Web Uygulamaları için gösterilir. Yüklenebilirlik gereksinimleri hakkında bilgi edinmek için "PWA'yı Öğrenin" modülündeki 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 hakkında bilgi verir ve kullanıcının masaüstü veya mobil cihazına yüklendiğinde nasıl davranması gerektiğini belirtir. Daha ayrıntılı belirtmek gerekirse shortcuts dizi üyesinde tanımlanırlar. Aşağıda, potansiyel 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österildiğinde uygulama kısayolunun kullanıcılar tarafından okunabilen etiketi.

short_name (isteğe bağlı)

Alanın sınırlı olduğu yerlerde kullanılan, kullanıcıların okuyabileceği etiket. İsteğe bağlı olsa da bu bilgiyi sağlamanız önerilir.

description (isteğe bağlı)

Uygulama kısayolunun kullanıcılar tarafından okunabilir amacı. Bu bilgi şu anda kullanılmasa da gelecekte yardımcı teknolojilere maruz kalabilir.

url

Kullanıcı, uygulama kısayolunu etkinleştirdiğinde URL açılır. 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 hem src hem de sizes özelliğini içermelidir. Web uygulaması manifesti simgelerinin aksine, type resim isteğe bağlıdır. SVG dosyaları, yazma işlemi sırasında desteklenmemektedir. 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 192x192 piksel boyutunda tek bir simge kullanmanız önerilir.

Bir kalite ölçüsü olarak simgeler, cihazın Android'deki 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, piksel birimleri için dp birimlerini dönüştürme formülünden türetilir.)

Uygulama kısayollarınızı test edin

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.

Bu bölme, uygulama kısayolları da dahil olmak üzere manifest'inizin birçok özelliğinin kullanıcılar tarafından okunabilen bir sürümünü sağlar. Bu, sağlanmış olan 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ı manifest dosyasındaki 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, manifest'te tanımlandıkları sırayla görüntülenir. Görüntülenen uygulama kısayollarının sayısı platforma göre değiştiğinden, uygulama kısayollarını öncelik sırasına göre sıralamanız önerilir. Örneğin, Windows'da Chrome ve Edge uygulama kısayollarını 10 ile sınırlandırırken Android için Chrome'da yalnızca 3 kısayol gösterilir. Android 7 için Chrome 92'den önce 4 sürümüne izin veriliyordu. Chrome 92, site ayarlarına bir kısayol ekledi ve uygulama için mevcut kısayol alanlarından birini aldı.

Ayrı 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, yuva 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şlerine, analiz amacıyla (ör. url: "/my-shortcut?utm_source=homescreen") start_url ile benzer şekilde ek açıklamalar eklemeniz gerekir.

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

Güvenilir Web Etkinliği kullanan Android uygulamaları oluşturmak için önerilen bir 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ı simgelerinin gerekli olduğunu ve BubbleWrap'ta en az 96 x 96 piksel boyutunda 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 de aynı davranışları uygulamak amacıyla Android uygulama kısayolları kullanılabilir.

Örnek

Uygulama kısayolları örneğini ve kaynağı inceleyin.

Faydalı bağlantılar

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