Progresif Web Uygulamanızı bir web sitesi gibi değil, "gerçek" bir uygulama gibi yapın
Progresif Web Uygulamasında moda olan bingo oyununu oynarken, "PWA'lar sadece web siteleridir" ayarını güvenle belirleyebilirsiniz. Microsoft'un PWA belgelerinde bunu kabul ediyor, yani sitede bahsettik. Hatta PWA adayları Frances Berriman ve Alex Russell bile bunu yazdı. PWA'lar yalnızca web sitesi olduğu gibi, aslında bundan çok daha fazlasını ifade eder. Doğru yapılırsa PWA'yı web sitesine değil, "gerçek" bir uygulama gibi hissettirin. Peki gerçek bir uygulama gibi hissetmek ne anlama gelir?
Örnek olarak Apple Podcasts uygulamasını kullanarak bu soruyu yanıtlayabiliriz. Masaüstünde macOS'te, mobil cihazlarda iOS'te (ve iPadOS'te) ise kullanılabilir. Podcast'ler bir medya uygulaması olsa da, yardımlarıyla açıkladığım temel fikirler diğer uygulama kategorileri için de geçerlidir.
Çevrimdışı çalıştırılabilir
Bir adım geriye çekilip cep telefonunuzda veya masaüstü bilgisayarınızda bulunan platforma özgü uygulamaları düşündüğünüzde, bir şey çok açıktır: hiçbir şey elde edemezsiniz. Podcast'ler uygulamasında, çevrimdışı olsam bile her zaman bir şeyler var. Ağ bağlantısı olmadığında uygulama doğal olarak açılmaya devam eder. Üst Sıralar bölümünde herhangi bir içerik gösterilmez ancak Yeniden dene düğmesiyle eşlenmiş bir Şu anda bağlanılamıyor iletisi görüntülenir. Çok samimi bir deneyim olmasa da güzel bir deneyim yaşadım.
Podcasts uygulaması, uygulama kabuğu modeli olarak adlandırılan modeli izler. Temel uygulamayı göstermek için gereken tüm statik içerik (soldaki menü simgeleri ve temel oynatıcı kullanıcı arayüzü simgeleri gibi dekoratif resimler dahil) yerel olarak önbelleğe alınır. Üst Sıralar verileri gibi dinamik içerikler yalnızca istek üzerine yüklenir ve yükleme başarısız olduğunda yerel olarak önbelleğe alınmış yedek içerik kullanılabilir. Bu mimari modeli web uygulamanıza nasıl uygulayacağınızı öğrenmek için Uygulama Kabuğu Modeli adlı makaleyi okuyun.
Çevrimdışı içerik mevcut ve medya oynatılabilir
İnternet'e bağlı değilken, sol taraftaki çekmeceyi kullanarak İndirilenler bölümüne giderek oynatılmaya hazır olan ve poster ve açıklamalar gibi tüm meta verilerle birlikte görüntülenen indirilmiş podcast bölümlerinin keyfini çıkarabilirsiniz.
Daha önce indirilen medya içeriği, önbellekten sunulabilir. Bunun için Çalışma Kutusu kitaplığındaki Önbelleğe alınmış ses ve videoyu sunma tarifi kullanılabilir. Diğer içerikler her zaman önbellekte veya IndexedDB'de depolanabilir. Tüm ayrıntıları öğrenmek ve hangi depolama teknolojisini ne zaman kullanacağınızı öğrenmek için Web için depolama başlıklı makaleyi okuyun. Kullanılabilir bellek miktarı azaldığında tamamen silinme riski olmadan kalıcı olarak depolanması gereken verileriniz varsa Persistent Storage API'yi kullanabilirsiniz.
Proaktif arka plan indirme
İnternete tekrar bağlandığında http 203 gibi bir sorguyla içerik arayabilirim ve arama sonucuna abone olmaya karar verdiğimde HTTP 203 podcast serinin son bölümü hemen indirilir ve hiç soru sorulmaz.
Podcast bölümlerini indirme işlemi daha uzun sürebilir. Arka Planda Getirme API'si, indirme işlemleri için tarayıcıya yetki vermenizi sağlar. Böylece, indirme işlemleri arka planda gerçekleştirilir. Android'de ise tarayıcı, bu indirme işlemlerini işletim sistemine daha ayrıntılı yetki verebilir, dolayısıyla tarayıcının sürekli çalışması gerekmez. İndirme işlemi tamamlandıktan sonra uygulamanızın hizmet çalışanı uyanır ve yanıtla ne yapacağınıza karar verebilirsiniz.
Diğer uygulamalarla paylaşım ve etkileşimde bulunma
Podcasts uygulaması diğer uygulamalarla doğal bir şekilde entegre olur. Örneğin, beğendiğim bir bölümü sağ tıkladığımda, cihazımdaki Mesajlar uygulaması gibi diğer uygulamalarla paylaşabiliyorum. Ayrıca, sistem panosuyla doğal olarak entegre oluyor. Herhangi bir bölümü sağ tıklayıp bağlantısını kopyalayabilirim.
Web Share API ve Web Share Target API, uygulamanızın cihazdaki diğer uygulamalara giden ve bu uygulamalardan metin, dosya ve bağlantı paylaşmasına ve almasına olanak tanır. Bir web uygulamasının işletim sisteminin yerleşik sağ tıklama menüsüne menü öğeleri eklemesi henüz mümkün olmasa da, cihazdaki diğer uygulamalara bağlantı vermenin ve bu uygulamalardan bağlantı oluşturmanın başka birçok yolu vardır. Async Clipboard API ile metin ve resim verilerini (PNG resimleri) sistem panosuna programlı bir şekilde okuyup yazabilirsiniz. Android'de, cihazın kişi yöneticisinden giriş seçmek için Kişi Seçici API'sini kullanabilirsiniz. Hem platforma özel bir uygulama hem de PWA sunuyorsanız platforma özgü uygulamanın yüklü olup olmadığını kontrol etmek için Get Related Apps API'yi kullanabilirsiniz. Bu durumda kullanıcıyı PWA'yı yüklemeye veya web push bildirimlerini kabul etmeye teşvik etmeniz gerekmez.
Arka planda uygulama yenileme
Podcasts uygulamasının ayarlarından, uygulamayı yeni bölümleri otomatik olarak indirecek şekilde yapılandırabilirim. Bu şekilde, bunu düşünmek bile gerekmiyor, güncellenmiş içerikler hep orada olacak. Sihir.
Periyodik Arka Plan Senkronizasyonu API'si uygulamanızın çalışmasına gerek kalmadan arka planda düzenli olarak içeriğini yenilemesine olanak tanır. Bu, yeni içeriğin proaktif olarak kullanıma sunulduğu anlamına gelir. Böylece kullanıcılarınız karar verirlerse hemen aramaya başlayabilirler.
Durum bulut üzerinden senkronize edildi
Aynı zamanda aboneliklerim sahip olduğum tüm cihazlarda senkronize ediliyor. Sorunsuz bir dünyada podcast aboneliklerimi manuel olarak senkronize etme konusunda endişelenmeme gerek yok. Aynı şekilde, masaüstü bilgisayarımda dinlediğim bölümlerin mobil cihaz belleğinin dolacağından korkmam da gerek. Çalma durumu senkronize edilir ve dinlenen bölümler otomatik olarak silinir.
Uygulama durumu verilerinin senkronize edilmesi, Arka Plan Sync API'ye yetki verebileceğiniz bir görevdir. Senkronizasyon işleminin hemen değil, nihayetinde ve belki kullanıcı uygulamayı tekrar kapatmışken bile gerçekleşmesi gerekmez.
Donanım medya tuşu kontrolleri
Diyelim ki Chrome tarayıcıda bir haber sayfasını okurken başka bir uygulamayla meşgulken, dizüstü bilgisayarımdaki medya tuşlarıyla Podcasts uygulamasını kontrol edebiliyorum. İleri veya geri atlamak için uygulamaya geçiş yapmanız gerekmez.
Medya anahtarları, Medya Oturumu API'si tarafından desteklenir. Bu şekilde, kullanıcılar fiziksel klavyelerindeki veya kulaklıklarındaki donanım medya tuşlarını kullanabilir, hatta akıllı saatlerindeki yazılım medya tuşlarından web uygulamasını kontrol edebilirler. Arama işlemlerinin sorunsuz ilerlemesi için bir diğer fikir, kullanıcı içeriğin önemli bir bölümünü aradığında (örneğin, açılış jeneriklerini veya bir bölüm sınırını geçmek gibi) bir titreşim kalıbı göndermektir.
Çoklu görev ve uygulama kısayolu
Elbette, Podcasts uygulamasını kullanarak istediğim yerden aynı anda birden fazla iş yapabilirim. Uygulamanın, masaüstüme veya uygulama yuvama da yerleştirebileceğim açıkça ayırt edilebilir bir simgesi var. Böylece Podcast'leri istediğim zaman hemen başlatabilirim.
Hem masaüstündeki hem de mobil cihazlardaki Progresif Web Uygulamaları ana ekrana, başlat menüsüne veya uygulama yuvasına yüklenebilir. Yükleme, proaktif bir isteme dayalı olarak veya uygulama geliştiricisi tarafından tamamen kontrol edilebilir. Yüklenebilir olmak için gerekenler başlıklı makalede, bilmeniz gereken her şey ele alınmaktadır. Çoklu görev gerçekleştirirken PWA'lar tarayıcıdan bağımsız olarak görünür.
İçerik menüsündeki hızlı işlemler
Yeni içerik için Arama ve Yeni Bölümleri Kontrol Et gibi en yaygın uygulama işlemleri, doğrudan uygulamanın Yuva'daki içerik menüsünden kullanılabilir. Seçenekler menüsünü kullanarak, giriş sırasında uygulamayı da açabilirim.
PWA'nın web uygulaması manifest dosyasında uygulama simgesi kısayolları belirterek kullanıcıların doğrudan uygulama simgesinden erişebileceği sık kullanılan görevlere giden hızlı rotaları kaydedebilirsiniz. macOS gibi işletim sistemlerinde kullanıcılar uygulama simgesini sağ tıklayarak da uygulamayı giriş sırasında başlatılacak şekilde ayarlayabilir. Girişte çalıştır teklifiyle ilgili bir teklif üzerinde çalışmalar devam etmektedir.
Varsayılan uygulama olarak kullan
Diğer iOS uygulamaları, hatta web siteleri veya e-postalar, podcasts:// URL şemasından yararlanarak Podcasts uygulamasına entegre edilebilir. Tarayıcıdayken podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 gibi bir bağlantıyı takip edersem doğrudan Podcasts uygulamasına yönlendirilirim ve podcast'e abone olabilir ya da podcast'i dinleyebilirim.
Tamamen özel URL şemaları henüz kullanılamaz, ancak PWA'lar (Progresif Web Uygulaması) için URL Protokolü İşleme teklifi üzerinde çalışmalar devam etmektedir. Şu an için en iyi alternatif, web+ şema önekine sahip registerProtocolHandler()'tir.
Yerel dosya sistemi entegrasyonu
Hemen aklınıza gelmeyebilir, ancak Podcasts uygulaması doğal olarak yerel dosya sistemiyle entegre olur. Bir podcast bölümünü indirdiğimde dizüstü bilgisayarımda ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache konumunda depolanıyor. ~/Documents örneğinden farklı olarak, bu dizin elbette normal kullanıcılar tarafından doğrudan erişilmesi için tasarlanmamıştır, ancak dizinde bulunmaktadır.
Dosyalardan başka depolama mekanizmalarına çevrimdışı içerik bölümünde atıfta bulunulmuştur.
File System Access API, geliştiricilerin cihazın yerel dosya sistemine erişebilmesini sağlar. Bu API'yi doğrudan veya API'yi desteklemeyen tarayıcılar için şeffaf bir şekilde yedek sağlayan browser-fs-access destek kitaplığı üzerinden kullanabilirsiniz. Güvenlik nedeniyle, sistem dizinlerine web'den erişilemez.
Platform görünümü ve tarzı
Podcasts gibi iOS uygulamalarında kulağa çok kolay gelen bir şey var: Metin etiketlerinin hiçbiri seçilemez ve tüm metinler makinenin sistem yazı tipiyle uyumlu. Sistem renk teması (koyu mod) seçimim de dikkate alınır.
none değerine sahip user-select CSS özelliğini kullanarak kullanıcı arayüzü öğelerinin yanlışlıkla seçilmesini önleyebilirsiniz.
Bununla birlikte, uygulama içeriklerini seçilemez hale getirdiği için bu özelliği kötüye kullanmadığınızdan emin olun.
Yalnızca düğme metinleri gibi kullanıcı arayüzü öğeleri için kullanılmalıdır. font-family CSS özelliğinin system-ui değeri, uygulamanız için kullanılacak sistemin varsayılan kullanıcı arayüzü yazı tipini belirtmenize olanak tanır.
Son olarak uygulamanız, kullanıcının prefers-color-scheme seçimine uyarak kullanıcının renk şeması tercihine uyarak ayarı geçersiz kılmak için isteğe bağlı koyu modu açma/kapatma
ayarlayabilir.
Karar verilmesi gereken bir başka konu da, örneğin yenilemek için özel çek uygulamak gibi bir kaydırma alanının sınırına ulaşırken tarayıcının ne yapması gerektiği olabilir.
overscroll-behavior CSS mülkü ile bunu yapabilirsiniz.
Özelleştirilmiş başlık çubuğu
Podcast Abonelikleri uygulama penceresine baktığınızda, Safari tarayıcı penceresi gibi klasik entegre bir başlık çubuğunun ve araç çubuğunun olmadığını, ancak ana oynatıcı penceresine yerleştirilmiş bir kenar çubuğuna benzeyen özelleştirilmiş bir deneyimin olduğunu fark ediyorsunuz.
Şu anda mümkün olmasa da başlık çubuğunu özelleştirme üzerinde çalışılıyor.
Bununla birlikte, uygulama pencerenizin görünümünü ve tarzını belirlemek ve hangi varsayılan tarayıcı denetimlerinin (muhtemelen hiçbirinin) gösterilmeyeceğine karar vermek için web uygulaması manifestinin display ve theme-color özelliklerini belirtebilirsiniz.
Hızlı animasyonlar
Podcast Aboneliklerinde uygulama içi animasyonlar hızlı ve akıcıdır. Örneğin, sağ taraftaki Bölüm Notları çekmecesini açtığımda zarif bir şekilde içeri kayar. İndirilen bölümlerimden bir bölümü kaldırdığımda ekranda belirip silinen bölüm tarafından serbest bırakılan ekran alanını tüketiyor.
Animasyonlar ve Performans makalesinde özetlenen bir dizi en iyi uygulama dikkate alındığında, web'de etkili animasyonlar kesinlikle kullanılabilir. Sayfalara ayrılmış içerikte veya medya bantlarında sık görülen kaydırma animasyonları, CSS Kaydırma Tutturması özelliği kullanılarak büyük ölçüde iyileştirilebilir. Tam kontrol için Web Animasyonları API'sini kullanabilirsiniz.
İçerik, uygulamanın dışında gösterildi
iOS'teki Podcasts uygulaması, içeriği gerçek uygulamanın dışındaki konumlarda gösterebilir. Örneğin, sistemin Widget'ları görünümünde veya Siri Önerisi biçiminde olabilir. Etkileşimde bulunmak için sadece bir dokunmayı gerektiren proaktif, kullanıma dayalı harekete geçirici mesajlara sahip olmak, Podcast'ler gibi uygulamaların yeniden etkileşim oranını büyük oranda artırabilir.
Content Index API'si, uygulamanızın PWA'nın hangi içeriğinin çevrimdışı kullanılabilir olduğunu tarayıcıya bildirmesini sağlar. Böylece tarayıcı bu içeriği ana uygulamanın dışında gösterebilir. Uygulamanızdaki ilgi çekici içeriği speakable ses çalmaya uygun olarak işaretleyerek ve genel olarak yapılandırılmış işaretlemeyi kullanarak, arama motorlarının ve Google Asistan gibi sanal asistanların tekliflerinizi ideal bir şekilde sunmasına yardımcı olabilirsiniz.
Kilit ekranı medya denetimi widget'ı
Podcast bölümü çalınırken Podcast'ler uygulaması; bölüm posteri, bölüm başlığı ve podcast adı gibi meta verileri içeren kilit ekranında şık bir kontrol widget'ı gösterir.
Media Session API'yi kullanarak poster, parça başlıkları vb. meta veriler belirtebilirsiniz. Bunlar daha sonra kilit ekranında, akıllı saatlerde veya tarayıcıdaki diğer medya widget'larında görüntülenir.
Push bildirimleri
Push bildirimleri web'de oldukça rahatsız edici hale geldi (ancak bildirim istemleri artık çok daha sessiz). Ancak doğru şekilde kullanıldığında büyük değer katabilirler. Örneğin, iOS Podcasts uygulaması isteğe bağlı olarak abone olduğum podcast'lerin yeni bölümlerini bana bildirebilir veya yeni podcast bölümleri önerebilir ve uygulamanın yeni özellikleri konusunda beni uyarabilir.
Push API'si uygulamanızın push bildirimleri almasına olanak tanıyarak PWA'nızla ilgili önemli etkinlikler hakkında kullanıcılarınızı bilgilendirmenize olanak tanır. Gelecekte bilinen bir zamanda etkinleşmesi gereken ve ağ bağlantısı gerektirmeyen bildirimler için Notification Triggers API'yi kullanabilirsiniz.
Uygulama simgesi rozeti ekleme
Abone olduğum podcast'lerden biri için yeni bölümler çıktığında, Podcasts'in ana ekranı simgesinde uygulama simgesi rozeti beliriyor. Bu rozet beni uygulamayla rahatsız edici olmayacak şekilde yeniden etkileşimde bulunmaya teşvik ediyor.
Uygulama simgesi rozetlerini Rozet API'si ile ayarlayabilirsiniz. Bu, özellikle PWA'nızın bazı"okunmamış" öğeler kavramı varsa veya kullanıcının dikkatini göze çarpmadan tekrar uygulamaya çekmek için bir yönteme ihtiyacınız olduğunda faydalıdır.
Medya oynatma, enerji tasarrufu ayarlarına göre önceliklidir
Podcast medyası çalarken ekran kapanabilir ancak sistem bekleme moduna girmez. Uygulamalar da isteğe bağlı olarak ekranı açık tutabilir (örneğin, şarkı sözlerini veya altyazıları gösterebilir).
Screen Wake Lock API, ekranın kapanmasını önlemenizi sağlar. Web'de medya oynatma, sistemin bekleme moduna girmesini otomatik olarak engeller.
Uygulama mağazası aracılığıyla uygulama keşfi
Podcasts uygulaması, macOS masaüstü deneyiminin bir parçası olsa da iOS'ta App Store'dan yüklenmelidir.
podcast, podcasts veya apple podcasts için yapılan hızlı bir arama, uygulamayı hemen App Store'da açar.
Apple, App Store'da PWA'lara izin vermese de Android'de PWA'nızı Güvenilir Web Etkinliği içine sarmalanmış olarak gönderebilirsiniz.
bubblewrap komut dosyası bunu sorunsuz bir işlem haline getirir.
Bu komut dosyası aynı zamanda PWABuilder'ın komut satırına dokunmadan kullanabileceğiniz Android uygulama dışa aktarma özelliğini dahili olarak destekler.
Özellik özeti
Aşağıdaki tabloda, tüm özelliklerin kısa bir özeti ve bu özellikleri web'de gerçekleştirmek için kullanabileceğiniz yararlı kaynakların bir listesi sunulmaktadır.
Sonuç
PWA'lar, 2015'teki kullanıma sunulmalarından bu yana çok yol katetti. Project Fugu 🐡 bağlamında, şirketler arası Chromium ekibi kalan son boşlukları kapatmak için çalışıyor. Bu makaledeki tavsiyelerin sadece bir kısmını bile uygulayarak, parça parça bu uygulama benzeri hissiyatla yaklaşabilir ve kullanıcılarınızın "sadece bir web sitesiyle" uğraştıklarını unutmalarını sağlayabilirsiniz. Çünkü dürüst olmak gerekirse çoğu kullanıcı, gerçek bir uygulama gibi göründüğü sürece uygulamanızın nasıl geliştirildiğini (ve neden geliştirmeli?) önemsemez.
Teşekkür
Bu makale Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Grants ve Reilly Grants tarafından incelenmiştir.