Uygulama kısayollarıyla işlerinizi hızla halledin

Kullanıcıların üretkenliğini artırmak ve önemli görevlerle yeniden etkileşimi kolaylaştırmak için web platformu artık uygulama kısayollarını destekliyor. Web geliştiricilerinin, kullanıcıların sık sık ihtiyaç duyduğu bir avuç ortak eyleme hızlı erişim sağlamasına olanak tanır.

Bu makale size uygulama kısayollarını nasıl tanımlayacağınızı öğretecektir. Ek olarak, ilişkili bazı en iyi uygulamaları öğreneceksiniz.

Uygulama kısayolları hakkında #

Uygulama kısayolları, kullanıcıların web uygulamanızda sık kullanılan veya önerilen görevleri hızla başlatmasına yardımcı olur. Uygulama simgesinin görüntülendiği herhangi bir yerden bu görevlere kolay erişim, kullanıcıların üretkenliğini artırmanın yanı sıra web uygulamasıyla etkileşimlerini de artıracaktır.

Uygulama kısayolları menüsü, kullanıcının masaüstündeki görev çubuğundaki (Windows) veya dock’taki (macOS) uygulama simgesine 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üne veya mobil cihazına yüklenen Progresif Web Uygulamaları için gösterilir. Kurulabilirlik gereklilikleri hakkında bilgi edinmek için “PWA Öğrenin” modülümüzde Kuruluma göz atın.

Her uygulama kısayolu, her biri web uygulamanızın kapsamındaki bir URL ile ilişkilendirilmiş bir kullanıcı amacını ifade eder. Bir kullanıcı uygulama kısayolunu etkinleştirdiğinde URL açılır. Uygulama kısayollarının örnekleri aşağıdakileri içerir:

• Üst düzey gezinme öğeleri (ör. ana sayfa, zaman çizelgesi, son siparişler)
• Aramak
• Veri girişi görevleri (örneğin, bir e-posta veya tweet yazın, bir makbuz ekleyin)
• Etkinlikler (örneğin, en popüler kişilerle sohbet başlatın)

Web uygulaması bildiriminde uygulama kısayollarını tanımlayın #

Uygulama kısayolları, isteğe bağlı olarak, 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 veren bir JSON dosyası olan web uygulaması bildiriminde tanımlanır. Daha spesifik olarak, bunlar shortcuts dizi üyesi. Aşağıda, potansiyel bir web uygulaması bildiriminin bir örneği bulunmaktadır.

{
"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" }]
}
]
}

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

name

Kullanıcıya gösterildiğinde uygulama kısayolu için okunabilir etiket.

short_name (isteğe bağlı)

Alanın sınırlı olduğu yerlerde kullanılan insan tarafından okunabilen etiket. İsteğe bağlı olsa bile sağlamanız önerilir.

description (isteğe bağlı)

Uygulama kısayolunun insanlar tarafından okunabilir amacı. Yazma sırasında kullanılmaz, ancak gelecekte yardımcı teknolojiye maruz kalabilir.

url

Bir kullanıcı uygulama kısayolunu etkinleştirdiğinde açılan URL. Bu URL, web uygulaması bildirimi kapsamında bulunmalıdır. Göreceli bir URL ise temel URL, web uygulaması bildiriminin URL’si olacaktır.

icons (isteğe bağlı)

Bir dizi görüntü kaynağı nesnesi. Her nesne şunları içermelidir: src ve bir sizes mülk. Web uygulaması manifest simgelerinin aksine, type görüntü isteğe bağlıdır. SVG dosyaları bu yazının yazıldığı sırada desteklenmemektedir. Bunun yerine PNG’yi kullanın.

Kusursuz piksel simgeleri istiyorsanız, bunları 48dp’lik artışlarla sağlayın (yani 36×36, 48×48, 72×72, 96×96, 144×144, 192×192 piksel simgeler). Aksi takdirde, tek bir 192×192 piksel simge kullanmanız önerilir.

Bir kalite ölçüsü olarak simgeler, cihazın Android’deki ideal boyutu olan 48dp’nin en az yarısı kadar olmalıdır. Örneğin, bir ekranda görüntülemek için xxhdpi ekran, simge en az 72 x 72 piksel olmalıdır. (Bu kaynaktan türetilmiştir. dönüştürme formülü piksel birimleri için dp birimleri.)

Uygulama kısayollarınızı test edin #

Uygulama kısayollarınızın doğru ayarlandığını doğrulamak için Belirgin bölmesinde Başvuru DevTools paneli.

Bu bölme, uygulama kısayolları da dahil olmak üzere bildiriminizin birçok özelliğinin insanlar tarafından okunabilen bir sürümünü sağlar. Varsa, tüm kısayol simgelerinin düzgün şekilde yüklendiğini doğrulamayı kolaylaştırır.

Aşamalı Web Uygulaması güncellemeleri günde bir kez ile sınırlandırıldığından, uygulama kısayolları tüm kullanıcılar tarafından hemen kullanılamayabilir. Chrome’un web uygulaması bildiriminde yapılan 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, bildirimde tanımladığınız sırayla görüntülenir. Görüntülenen uygulama kısayollarının sayısındaki 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’ta Chrome ve Edge, uygulama kısayollarının sayısını 10 ile sınırlarken, Android için Chrome yalnızca 3’ü görüntüler. Android 7 için Chrome 92’den önce 4’e izin veriliyordu. Chrome 92, uygulama için mevcut kısayol yuvalarından birini alarak site ayarlarına bir kısayol ekledi.

Farklı uygulama kısayol adları kullanın #

Her zaman görünmeyebileceklerinden, 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çün #

Uygulama kısayollarına açıklama eklemelisiniz url ile yapacağınız gibi girişler start_url analitik amaçlar için (örn. url: "/my-shortcut?utm_source=homescreen").

tarayıcı desteği #

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

Güvenilir Web Etkinliği desteği #

Kabarcık sargısı, Güvenilir Web Etkinliği kullanan Android uygulamaları oluşturmak için önerilen araç, web uygulaması bildiriminden uygulama kısayollarını okur ve Android uygulaması için ilgili yapılandırmayı otomatik olarak oluşturur. Uygulama kısayolları için simgelerin gerekli ve Bubblewrap’te en az 96 x 96 piksel olmalıdır.

PWABuilderProgresif Web Uygulamasını kolayca Güvenilir Web Etkinliğine dönüştürmek için harika bir araç olan , bazılarıyla uygulama kısayollarını destekler uyarılar.

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

Örnek #

Kontrol et uygulama kısayolları örneği ve Onun kaynak.

Faydalı Bağlantılar #