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

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

François Beaufort

Jungkee Şarkısı

Web platformu, kullanıcıların üretkenliğini artırmak ve temel görevlerle yeniden etkileşime girmeyi kolaylaştırmak için artık uygulama kısayollarını destekliyor. Web geliştiricilerinin, kullanıcıların sık ihtiyaç duydukları bir dizi yaygın işleme hızlıca erişmelerini sağlarlar.

Bu makalede uygulama kısayollarını nasıl tanımlayacağınız açıklanmaktadır. Ayrıca, bununla ilgili bazı en iyi uygulamaları öğreneceksiniz.

Uygulama kısayolları hakkında

Uygulama kısayolları, kullanıcıların web uygulamanızda sık yapılan veya önerilen görevleri hızlıca başlatmalarına yardımcı olur. Bu görevlere uygulama simgesinin gösterildiği her yerden kolayca erişilebilmesi hem kullanıcıların üretkenliğini hem de web uygulamasıyla etkileşimlerini 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 ya da Android'de uygulamanın başlatıcı simgesine dokunup basılı tutarak çalıştırılır.

Uygulama kısayolları menüsü yalnızca kullanıcının masaüstü veya mobil cihazına yüklenen Progresif Web Uygulamaları için gösterilir. Yüklenebilirlik gereksinimleri hakkında bilgi edinmek için "PWA Öğrenme" modülümüzdeki Yükleme bölümüne göz atın.

Her uygulama kısayolu, bir kullanıcının amacını ifade eder. Bu amaçların her biri, web uygulamanızın kapsamı dahilindeki bir URL ile ilişkilendirilir. Bir 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ımlama

Uygulama kısayolları, isteğe bağlı olarak web uygulaması manifest dosyasında tanımlanır. Bu, tarayıcıya web uygulamanız ve kullanıcının masaüstü veya mobil cihazına yüklendiğinde nasıl davranması gerektiği hakkında bilgi veren bir JSON dosyasıdır. Daha ayrıntılı belirtmek gerekirse shortcuts dizisi üyesinde belirtilirler. 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 url içeren bir sözlüktür. Diğer üyeler isteğe bağlıdır.

name

Uygulama kısayolunun kullanıcıya gösterildiğinde okunabilir etiketi.

short_name (isteğe bağlı)

Yerin kısıtlı olduğu yerlerde kullanıcıların okuyabileceği bir etiket kullanılır. İsteğe bağlı olsa da bunu sağlamanız önerilir.

description (isteğe bağlı)

Uygulama kısayolunun kullanıcılar tarafından okunabilir amacı. Bu yazı yazıldığında kullanılmaz ancak ileride yardımcı teknolojilerle karşılaşabilirsiniz.

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ü kaynak nesneleri dizisi. Her nesne, src ve bir sizes özelliğini içermelidir. Web uygulaması manifest simgelerinin aksine, resmin type değeri isteğe bağlıdır. Yazma sırasında SVG dosyaları desteklenmemektedir. Bunun yerine PNG kullanın.

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

Bir kalite ölçüsü olarak, simgeler Android'de ideal boyut olan 48 dp'nin en az yarısı kadar olmalıdır. Örneğin, xxhdpi ekranda görüntülenmesi için simgenin en az 72x72 piksel olması gerekir. (Bu, piksel birimleri için dp birimlerini dönüştürme formülünden türetilir.)

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.

Bu bölme, uygulama kısayolları da dahil olmak üzere manifest özelliklerinizin birçoğunun kullanıcılar tarafından okunabilir bir sürümünü sağlar. Tüm kısayol simgelerinin (sağlanmışlarsa) düzgün bir şekilde yüklendiğini doğrulamayı kolaylaştırır.

Progresif Web Uygulaması güncellemeleri günde bir kez ile sınırlandığından, uygulama kısayolları tüm kullanıcılara hemen kullanılamayabilir. Chrome'un web uygulaması manifest dosyasındaki güncellemeleri nasıl ele aldığı hakkında daha fazla bilgi edinin.

En iyi uygulamalar

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

Kısayollar, manifest dosyasında tanımladığınız sırayla görüntülenir. Görüntülenen uygulama kısayollarının sayısıyla ilgili sınır platforma göre değiştiğinden uygulama kısayollarını önceliğe göre sıralamanız önerilir. Örneğin, Windows'daki Chrome ve Edge uygulama kısayollarının sayısı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, site ayarlarına bir kısayol ekleyerek uygulama için mevcut kısayol yuvalarından birini kullandı.

Farklı uygulama kısayolu adları kullanın

Her zaman görünür olmayabileceğinden uygulama kısayollarını birbirinden 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ı kullanımını ölçme

Analiz amacıyla, uygulama kısayolları url girişlerine, start_url özelliğinde olduğu gibi ek açıklamalar eklemeniz gerekir (ör. url: "/my-shortcut?utm_source=homescreen").

Tarayıcı desteği

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

Güvenilir Web Etkinliği desteği

Güvenilir Web Etkinliği kullanan Android uygulamaları oluşturmak için önerilen Bubblewrap aracı, web uygulaması manifest dosyasından 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 96x96 piksel boyutunda olması gerektiğini unutmayın.

Progresif Web Uygulamasını kolayca Güvenilir Web Etkinliği'ne dönüştüren harika bir araç olan PWABuilder, bazı uyarılarla 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 bunun kaynağına göz atın.

Faydalı bağlantılar

• MDN
• Özellikler
• Uygulama kısayolları örneği | Uygulama kısayolları örnek kaynağı
• Yanıp Sönen Bileşen: UI>Browser>WebAppInstalls