Masaüstü Progresif Web Uygulamaları (PWA'lar), kullanıcı güvenliği ve gizliliğini merkeze alan bir güvenlik modeliyle uygulamalar oluşturmak ve web'in doğal bağlantı oluşturma özelliği sayesinde yerleşik paylaşım elde etmek için harika bir platformlar ve tarayıcılar arası yöntemdir. Masaüstü uygulaması benzeri özellikler, güvenilirlik ve yüklenebilirlik sunmak için yeni bir web uygulaması oluşturun veya mevcut web uygulamanızı modern API'lerle geliştirin. PWA'lar, ChromeOS için web uygulamanızı sunmanın en iyi yoludur.
ChromeOS'te web platformunun gücü ön plandadır. Web uygulamaları, temel platform özelliklerindendir. Yüklenen PWA'lar ChromeOS başlatıcıda görünür, rafa sabitlenebilir ve işletim sisteminin geri kalanıyla derinlemesine entegre olur.
PWA Kontrol Listesi'ni inceleyerek ve web uygulamanızın temel PWA kontrol listesini geçtiğinden emin olarak başlayın. Özel bir çevrimdışı sayfa sağlamanıza ve uygulamanızın yüklenebilir olmasına yardımcı olması için PWABuilder'ı kullanabilirsiniz. Ardından, ChromeOS'te PWA'nızın dikkat çekmesini sağlamak için bu önerilerden yararlanın.
Yüklenebilir hale getirme
PWA'ların normal web uygulamalarına göre en büyük avantajlarından biri, geleneksel masaüstü uygulamaları gibi yüklenebilmeleridir. web.dev'deki Progresif Web Uygulaması yolunda, PWA'nızı yüklenebilir hale getirmeye ayrılmış bir bölüm vardır. Başlamak için bu bölümü kullanın. Bir PWA'nın ChromeOS'te yüklenebilir olarak tanımlanması için aşağıdaki ölçütlerin karşılanması gerekir. Bu ölçütler, Lighthouse'un yüklenebilir denetimi kullanılarak kontrol edilebilir:
- Geçerli bir web uygulaması manifestine sahip olmalıdır.
-
Chrome'un yükleme ölçütlerini karşılaması gerekir.
- ChromeOS'teki PWA'lar için, kullanıcı etkileşimiyle ilgili bir sezgisel eşik karşılanmadan omnibarda yükleme istemi gösterilir.
Simgeler, PWA'nızın kimliğinin önemli bir parçasıdır. Bu nedenle, simgelerin ilgi çekici ve benzersiz olduğundan emin olun. Hatta şeffaflık da içerebilirler. PWA'lar tüm platformlarda paylaşılan tek bir kod tabanına sahip olduğundan maskelenebilir bir simgenizin olduğundan emin olmanız gerekir. Maskelenebilir simgeleri desteklemeyen işletim sistemleri için normal simgeleri de eklediğinizden emin olun.
PWA'nız yüklenebilir hale geldiğinde artık ChromeOS'te başlatıcıdan rafa kadar her yerde gösterilir. PWA'nızın yüklü olması, uygulamanızın gerçekten öne çıkmasını sağlayacak bazı ek özellikler de sunar.
Çevrimdışı çalışma hakkında not
Uygulamanızı yüklenebilir hale getirerek keşfedilebilirlik, kullanılabilirlik ve özellikler açısından birçok avantaj elde edebilirsiniz. PWA'nızın yüklenebilir olması, deneyiminizin tamamının çevrimdışı çalışması gerektiği anlamına gelmez. Ancak yüklenen bir web uygulamasının geleneksel bir uygulama gibi çalışması için çevrimdışı işlevselliğe sahip olması gerekir. Başlamak için temel bir özel çevrimdışı sayfa yeterlidir. Kullanıcılar, bağlantı durumu değiştiğinde yüklü uygulamaların kilitlenmemesini bekler. Geleneksel uygulamalar çevrimdışı olduklarında asla boş sayfa göstermez. PWA'lar da asla tarayıcının varsayılan çevrimdışı sayfasını göstermemelidir. Özel çevrimdışı sayfalar, kullanıcının oyuna bağlanmak için bağlantıya ihtiyacı olduğunu bildiren bir mesajdan, tekrar bağlanana kadar zaman geçirmesini sağlayan bir mesaja kadar değişebilir. Önbelleğe alınmamış sayfalar veya bağlantı gerektiren özellikler için bu özel çevrimdışı deneyimi sunmak, kullanıcı deneyimi ile uygulama arasındaki boşluğu kapatmaya yardımcı olur.
İstenen sayfayı daha sonra kullanmak üzere önbelleğe alarak ve kullanıcı çevrimdışıysa bu sayfayla yanıt vererek hizmet çalışanın install etkinliği sırasında basit bir çevrimdışı sayfa oluşturabilirsiniz. Bu özelliğin nasıl çalıştığını görmek ve kendiniz nasıl uygulayacağınızı öğrenmek için özel çevrimdışı sayfa örneğimize göz atabilirsiniz.
Daha güçlü bir deneyim sunmak istiyorsanız Cache Storage API'ye ek olarak tarayıcı içi NoSQL depolama için IndexedDB ve kullanıcıların çevrimdışı durumdayken işlem yapmasına ve sunucu iletişimini kullanıcı tekrar sabit bir bağlantıya sahip olana kadar ertelemesine olanak tanımak için arka plan senkronizasyonu gibi özellikleri kullanabilirsiniz. Kullanıcıların kimliğini doğrulanmış durumda tutmak için güvenli ve uzun süreli oturumlar gibi kalıplar, gerekirse önbelleğe alınmış içeriğe veya çevrimdışı göstergeye geri dönebilecek içeriklerin yüklendiğini kullanıcılara hızlıca bildirmek için de iskelet ekranlar uygulayabilirsiniz.
Dokunulabilir hale getirin
Neredeyse tüm ChromeOS cihazlar dokunmayı, birçoğu da kalemi destekler. Bu nedenle, uygulamanızın normal klavye ve fareye ek olarak her iki girişle de sorunsuz şekilde çalıştığından emin olmanız gerekir. Pointer Events API, özellikle bu durumu ele almak için tasarlanmıştır. click etkinlikleri gibi, temel işaretçiyle ilgili bazı etkinlikleri değiştirmeniz gerekmeyebilir. mouseup veya touchstart gibi diğer etkinlikler, her türlü işaretçiyle sorunsuz şekilde çalışabilmeleri için işaretçi etkinlikleri karşılıklarına taşınmalıdır. İsterseniz farklı giriş türlerini ayrı ayrı da yönetebilirsiniz. Dokunma tabanlı kullanıcı girişine büyük ölçüde dayanan uygulamalar ve oyunlar için işaretçi etkinlikleri API'sine geçiş, ChromeOS cihazlarda büyük bir fark yaratacaktır.
Web'de sorunsuz çizim
Kullanıcıların parmaklarıyla veya kalemleriyle çizim yapmasına olanak tanıyan bir uygulama geliştiriyorsanız girişleri ile çıkışınız arasındaki gecikmeyi akıcı bir deneyim sunacak kadar hızlı tutmak geçmişte zordu. ChromeOS için bu tür Canvas API destekli uygulamalar oluştururken desynchronized ipucunu kullanarak canvas.getContext() için düşük gecikmeli oluşturma sağlamanızı öneririz. Bir tuval için desynchronized ipucunu kullanmak üzere aşağıdakileri yapın:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Dokunma için tasarımda dikkat edilmesi gereken noktalar
Web uygulamalarınızı tasarlarken dokunma ve kalem desteğini göz önünde bulundurmanız önemlidir. Fareyle üzerine gelme gibi, normalde sorunsuz kullandığınız etkileşimler diğer giriş yöntemlerinde hiç çalışmaz veya iyi çalışmaz. Dokunmaya ve kaleme uygun arayüzler tasarlarken göz önünde bulundurmanız gereken en iyi uygulamalardan bazıları şunlardır:
- Ekran boyutuna göre girişle ilgili varsayımlarda bulunmayın. Bunun yerine, nasıl yanıt vereceğinizi belirlemek için ideal olarak giriş sırasında özellik algılamayı kullanın. ChromeOS'te kullanıcıların tek bir oturumda sorunsuz bir şekilde fare, dokunma ve ekran kalemi arasında geçiş yapabildiğini unutmayın.
- Kullanıcının dokunmasını beklediğiniz öğelerin, etrafındaki öğelere yanlışlıkla dokunulmaması için yeterince büyük bir minimum hedef boyutuna sahip olduğundan emin olun.
- Fareyle üzerine gelme özelliğini aşamalı iyileştirme olarak değerlendirin ve etkileşimin dokunma ve kalem için başka yollarla (örneğin, uzun basma veya dokunma) gerçekleştirilebilmesini sağlayın.
- Dokunmatik ekran kullanıcıları, ekran üzerindeki öğelerle doğrudan etkileşim kurabilmeyi bekler. Örneğin, haritalarda yakınlaştırma/uzaklaştırma düğmelerini kullanmak yerine parmakla yakınlaştırma özelliğini kullanabilmek isterler. Uygun yerlerde yaygın dokunma hareketleri eklemek, uygulamanızın doğal görünmesine büyük katkı sağlayabilir.
Make it capable
Bazı PWA özellikleri (ör. bir web uygulamasının platform bildirimleri alıp yayınlamasına olanak tanıyan Bildirimler API'si) yaygın olarak bilinse de uygulamalarınızı güçlendirmek için web'e gelecek olan yeni ve yakında kullanıma sunulacak birçok özellik var. Aynı zamanda Project Fugu 🐡 olarak da bilinen Chromium Web Capabilities projesi, web'i benzersiz kılan özellikleri (kullanıcı odaklı güvenlik, düşük sürtünme ve platformlar arası uyumluluk) koruyarak yeni ve güçlü web standartlarını etkinleştirmeyi amaçlar.
Not: Bu özellikler, değerlendirme aşamasından kullanıma sunulmaya kadar çeşitli tamamlanma durumlarındadır ve yalnızca masaüstü veya mobil cihazlar için hedeflenebilir, ikisi için birden hedeflenemez. ChromeOS kullanıcıları, kullanıma sunuldukça masaüstüne yönelik özellikleri kullanabilir. Ancak ChromeOS'te kararlı destek de dahil olmak üzere platformlar arası destek bazen yıllar sürebilir.