Aşamalı Web Uygulamalarının Yapı Taşları

Web uygulamaları, yerel uygulamaların ve web sitelerinin tüm işlevlerini aynı anda değiştirebilir. Bu günlerde giderek daha fazla öne çıkıyorlar, ancak hala yeterince insan onlara aşina değil veya onları benimsiyor.

Bu makalede, ilerici bir web uygulamasının nasıl yapılacağına ilişkin bazı yapılması ve yapılmaması gerekenleri ve ayrıca daha fazla araştırma için kaynakları bulabileceksiniz. Ayrıca çeşitli bileşenlere gireceğim ve web uygulamalarını çevreleyen sorunları destekleyeceğim. Her tarayıcı onlara dost olmasa da, bu teknoloji hakkında daha fazla bilgi edinmek için hala bazı zorlayıcı nedenler var.

Bir Web Uygulamasını Aşamalı Yapan Nedir?

Aşamalı bir web uygulaması, web'de uygulama benzeri bir deneyim oluşturmak için bir araya gelen belirli teknolojiler için bir şemsiye terimdir. Basitlik adına, bundan sonra bunlardan sadece web uygulamaları olarak bahsedeceğim.

İdeal bir web uygulaması, hem web hem de yerel uygulamaların en iyi yönlerine sahip bir web sayfasıdır. Etkileşimi hızlı ve hızlı olmalı, cihazın görüş alanına sığmalı, çevrimdışı olarak kullanılabilir durumda kalmalı ve ana ekranda bir simgeye sahip olmalıdır.

Aynı zamanda, uygulamanın derinliklerine bağlanma ve içerik paylaşımını etkinleştirmek için URL'leri kullanma gibi web'i harika yapan şeylerden de ödün vermemelidir. Web gibi, platformlar arasında da iyi çalışmalı ve yalnızca mobil cihazlara odaklanmamalıdır. Yanıt vermeyen m.example.com web siteleri çağına girme riskini almamak için, diğer form faktörlerinde olduğu gibi bir masaüstü bilgisayarda da aynı şekilde davranmalıdır.

Aşamalı web uygulamaları yeni değil. Mobil tarayıcılar, 2011'den beri (Chrome Android'de 2013) telefonunuzun ana ekranına bir web sitesini yer imlerine ekleme yeteneğine sahiptir ve head yüklü web sayfasının görünümünü belirleyen meta etiketler bulunur. Financial Times, 2012'den beri mobil cihazlarda dijital içerik dağıtımı için bir web uygulaması kullanıyor.

Bir web uygulamasına geçiş, Financial Times'ın tek bir dağıtım kanalında platformlar arasında sevkiyat yapmak için aynı uygulamayı kullanmasını sağladı. Financial Times için çalışırken, tek bir yapıyla aşağıdakileri destekleyebildik:

• iOS,
• Android (4.4+) Chrome,
• eski Android (bir sarmalayıcı aracılığıyla),
• Windows 8,
• Böğürtlen,
• Firefox işletim sistemi.

Bu gerçekten "bir kez oluştur, her yerde konuşlandır"ı başarır.

“Ama Bir App Store'da Değil”

Yerel bir uygulamayı bir web sitesine eklemenin çoğu büyük şirket için hala standart bir uygulama olmasının bazı iyi nedenleri vardır. Bunların arasında, tarayıcı desteği ve çoğu kullanıcının yerel uygulamaları kullanmaya alışmasıyla ilgili endişeler var. Bu konulara daha sonra daha detaylı değineceğim. Bu endişelerin en az biri, bir uygulama mağazasında değilse, uygulamanın nasıl ortaya çıkacağıdır.

Bir uygulama mağazasında olmanın önemli bir avantajı olmadığını savunuyorum çünkü uygulama mağazasındaki uygulamaların ilk %0,1'inde değilseniz, orada olmaktan önemli bir fayda sağlayamazsınız.

Kullanıcılar, önce web sitenizi bularak uygulamalarınızı bulma eğilimindedir. Web siteniz bir web uygulamasıysa, zaten hedeflerine ulaşmışlardır.

Bir web uygulamasının güçlü yönlerinden biri, web sitenize giriş ve uygulamanızla etkileşim arasında kullanıcının yeniden etkileşime geçmesi için gereken tıklama sayısını azaltarak etkileşimi artırmanıza olanak sağlamasıdır.

Kullanıcının web uygulamanızı ana ekranına ekleyerek "yüklemesini" sağlayarak, web sitenizle etkileşime devam edebilirler. Web tarayıcısını kapattıklarında, telefon onlara web uygulamasının yüklendiği yeri göstererek sizi tekrar onların farkındalığına getirir.

Geçmiş ve Mevcut İklim

Modern web uygulamaları, hizmet çalışanları adı verilen yeni bir teknolojiye dayanmaktadır. Hizmet çalışanları, kullanıcının sekmesi ile daha geniş İnternet arasında oturan programlanabilir vekillerdir. Çok ayrıntılı önbelleğe alma ve çevrimdışı desteğe izin vermek için ağ isteklerini yakalar ve yeniden yazar veya üretirler.

Web sitelerinin ana ekranda işaretlenmesini sağlayan 2011'deki web uygulamasının kökeninden bu yana, ilerici web uygulamalarının oluşturulması için daha fazla temel oluşturmak için bir dizi gelişme gerçekleşti.

Chrome 38, web uygulamanızın yapılandırmasını açıklayan bir JSON dosyası olan web uygulaması bildirimini tanıttı. Bu, konfigürasyonu head kaldırmamıza izin verdi.

Chrome 40'ta (Aralık 2014), hizmet çalışanları Firefox ve Chrome'da yayılmaya başladı. Apple şu ana kadar bu özelliği Safari'de uygulamama kararı aldı, ancak "göz önünde bulunduruyor". Servis çalışanının işlevi, bir uygulamayı çevrimdışı duruma getirme sürecini basitleştirmektir; ayrıca push bildirimleri ve arka plan senkronizasyonu gibi gelecekteki uygulama benzeri özelliklerin temelini oluşturur.

Yeni hizmet çalışanları ve web uygulaması bildirimi temelinde oluşturulan uygulamalar, aşamalı web uygulamaları olarak bilinir hale geldi.

Aşamalı bir web uygulaması, spesifikasyonla aynı değildir. Aslında, tarayıcılarda yerleşik olarak bulunan yeni teknoloji göz önüne alındığında, hizmet çalışanları çağında bir web uygulamasının ne olması gerektiğinin bir tanımı olarak başladı. Özellikle Chrome, bir dizi koşul karşılandığında tarayıcıda bir yükleme istemini tetiklemek için bu tanımı kullanır. Koşullar, web uygulamasının:

• bir servis çalışanı var (HTTPS gerektirir);
• bir web uygulaması bildirim dosyasına sahip (en azından minimum konfigürasyonlu ve display: "standalone" );
• iki ayrı ziyaret gerçekleştirdi.

Bu durumda, "aşamalı", tarayıcı ne kadar çok özelliği desteklerse, deneyimin o kadar uygulamaya benzer olabileceği anlamına gelir.

Web uygulamasını yükleme istemi şu anda Opera, Chrome ve Samsung tarayıcısında değişen koşullar altında gösteriliyor.

Apple, iOS için aşamalı web uygulamalarına ilgi duyduğunu belirtti, ancak bu yazının yazıldığı sırada hala web uygulaması yapılandırması için meta etiketlere ve çevrimdışı kullanım için uygulama önbelleğine (AppCache) güveniyor.

Bir Web Sitesi Hangi Noktada Web Uygulaması Olur?

Bir web sitesinin neye benzediğini ve bir uygulamanın nasıl göründüğünü biliyoruz, ancak bir web sitesi hangi noktada bir web uygulaması haline gelir? Bir şeyi bir web sitesi yerine bir web uygulaması yapan şeyin ne olduğuna dair kesin bir ölçüm yoktur.

Burada bir web uygulamasının özellikleri hakkında biraz daha ayrıntıya gireceğiz.

Aşamalı Bir Web Uygulaması, Uygulamaya Benzer Bazı Özellikler Göstermelidir…

• duyarlı
  Ekranı mükemmel bir şekilde dolduran bu web siteleri öncelikle telefonlara ve tabletlere yöneliktir ve çok sayıda ekran boyutuna yanıt vermelidir. Ayrıca sadece masaüstü web siteleri olarak çalışmalıdırlar. Duyarlı tasarım, yıllardır web sitesi oluşturmanın önemli bir parçası olmuştur. Smashing Magazine'de harika makaleler var.
• Çevrimdışı-ilk
  Uygulama, çevrimdışı başlatılabilmeli ve yine de yararlı bilgiler gösterebilmelidir.
• Dokunmatik özellikli
  Arayüz, jest etkileşimi ile dokunma için tasarlanmalıdır. Kullanıcı etkileşimi, dokunma ve yanıt arasında gecikme olmaksızın duyarlı ve hızlı hissetmelidir.
• Uygulama meta verileri
  Uygulama, tarayıcıya yüklendiğinde nasıl görünmesi gerektiğini söyleyen meta veriler sağlamalıdır, böylece ana ekranda güzel bir yüksek çözünürlüklü simge ve bazı platformlarda bir açılış ekranı elde edersiniz.
• Push bildirimleri
  Uygulama, uygulama çalışmadığında (varsa) bildirim alabilir.

… Ama Web-Benzeri Bazı Özellikleri Korumalı

• ilerici
  Uygulamanın kurulabilme özelliği, aşamalı bir geliştirmedir. Uygulamanın, özellikle henüz kurulum veya servis çalışanlarını desteklemeyen platformlarda, normal bir web sitesi olarak çalışması çok önemlidir.
• Açık web üzerinde HTTPS
  Uygulama, herhangi bir tarayıcıya veya uygulama mağazasına kilitlenmemelidir. Mevcut URL'ye derinden bağlanabilmeli ve mevcut URL'yi paylaşmak için yöntemler sağlamalıdır.

Web Sitenizi Çevrimdışına Alma

Web sitenizi çevrimdışı duruma getirmek bazı önemli avantajlar sağlar.

İlk olarak, kullanıcı kesintili bir ağ bağlantısındayken çalışmaya devam edecektir.

Ayrıca, uygulama ağa güvenmiyorsa, uygulamayı açmadan uygulamayı kullanmaya kadar geçen süre büyük ölçüde azalır. Bu, kullanıcıya harika bir deneyim sunar. Dikkatle optimize edilmiş bir web uygulaması, tarayıcı yakın zamanda kullanılmışsa, yerel olandan daha hızlı başlayabilir.

Bir web sitesinin çevrimdışı çalışmasını sağlamanın iki yöntemi vardır:

• Eski ve bozuk yöntem
  Web sitenizi çevrimdışı başlatma desteği, AppCache biçiminde yıllardır var. AppCache'in bazı ciddi kusurları olsa da, spesifikasyondan bile kaldırılmıştır. Onunla çalışmak zordur ve yanlış yapılandırılırsa web sitenizi kalıcı olarak bozabilir. Yine de, en azından Apple servis çalışanlarını desteklemek için bir hamle yapana kadar, iOS'ta çevrimdışı olmanın tek yolu budur.
• yeni sıcaklık
  Şu anda Chrome, Firefox ve Opera'da desteklenen ve çok yakında Edge'e gelecek olan hizmet çalışanları da etkilidir. Apple'ın WebKit ekibi bunu "değerlendiriliyor" olarak işaretledi.

Hizmet çalışanları, ayrı bir iş parçacığında çalıştıkları için diğer web çalışanları gibidir, ancak belirli bir sekmeye bağlı değildirler. Oluşturulduklarında onlara bir URL kapsamı atanır ve bu kapsamdaki tüm istekleri engelleyebilir ve yeniden yazabilirler. Servis çalışanınız https://example.com/my-site/sw.js oturuyorsa, /my-site/ veya daha düşük bir yere yapılan tüm istekleri engelleyebilir, ancak kök https://example.com/ yapılan istekleri engellemek için yapılamaz. https://example.com/ .

Herhangi bir sekmeye bağlı olmadıkları için, anında iletme bildirimlerini veya arka plan senkronizasyonunu işlemek için arka planda hayata geçirilebilirler. En önemlisi, yeni bir hizmet çalışanı komut dosyası algılandığında otomatik olarak güncellenecekleri için web sitenizi bunlarla kalıcı olarak kırmak imkansızdır.

İyi bir yönerge şudur ki, sıfırdan yeni bir web sitesi oluşturuyorsanız, bir servis çalışanı ile başlayın. Ancak, web siteniz AppCache ile zaten çevrimdışı çalışıyorsa, bundan bir hizmet çalışanı oluşturmak için sw-appcache-behavior aracını kullanabilirsiniz, çünkü yakında bazı tarayıcıların yalnızca hizmet çalışanlarını kabul edeceği ve bazılarının yalnızca kabul edeceği bir noktaya gelebiliriz. Uygulama Önbelleği.

AppCache kullanımdan kaldırıldığından, bu makalede daha fazla tartışmayacağım.

Servis Çalışanı Ayarlama

(Ayrıca, daha ayrıntılı talimatlar için "Servis Görevlisi Ayarlama" konusuna bakın.)

Hizmet çalışanı özel bir tür paylaşılan web çalışanı olduğundan, ana sayfanıza ayrı bir iş parçacığında çalışır. Bu, hizmet çalışanı ile aynı yoldaki tüm web sayfaları tarafından paylaşıldığı anlamına gelir. Örneğin, /my-page/sw.js bulunan bir hizmet çalışanı /my-page/index.html ve my-page/images/header.jpg , ancak /index.html öğesini etkileyemez.

Hizmet çalışanları, data:// URL'lerine yapılanlar da dahil olmak üzere sayfada yapılan tüm ağ isteklerini yakalayabilir ve yeniden yazabilir veya yanıltabilir!

Bu güç, veri bağlantısı olmadığında sayfaların çalışmasını sağlamak için önbelleğe alınmış yanıtlar sunmasını sağlar. Yine de, birçok olası kullanım örneğine izin verecek kadar esnektir.

Çok güçlü olduğu için yalnızca güvenli bağlamlarda (ör. HTTPS) izin verilir. Bu, üçüncü tarafların virüslü veya kötü niyetli bir Wi-Fi erişim noktasından enjekte edilmiş bir hizmet çalışanı kullanarak web sitenizi kalıcı olarak geçersiz kılmasını önler.

Günümüzde HTTPS kurmak göz korkutucu ve pahalı görünebilir, ancak aslında hiç bu kadar kolay veya ucuz olmamıştı. Let's Encrypt, sunucunuzu otomatik olarak yapılandırmanız için ücretsiz SSL sertifikaları ve komut dosyaları sağlar. GitHub'da barındırmanız durumunda, GitHub Sayfaları otomatik olarak HTTPS üzerinden sunulur. Tumblr sayfaları da HTTPS üzerinde çalışacak şekilde yapılandırılabilir. CloudFlare, HTTPS'ye yükseltme isteklerini proxy yapabilir.

Çevrimdışına alma genellikle, web sitenizin farklı bölümleri için, daha hızlı veya İnternet bağlantısı olmadığında sunulmalarını sağlamak için belirli önbelleğe alma yöntemlerinin seçilmesini içerir. Aşağıda çeşitli önbellekleme yöntemlerini tartışacağım.

Karmaşık önbelleğe alma mantığını soyutlamak için Service Worker Toolbox'ı kullanıyorum. Bu kitaplık, temiz bir şekilde yapılandırılabilen önceden yapılandırılmış dört yol sağlayarak yönlendirmeyi idare edecek şekilde ayarlanabilir. Servis çalışanınıza aktarılabilir.

Kullanım Durumu 1: Önbelleğe Alma

Önceden önbelleğe alma, istekleri web siteniz gerekli olduğunu anlamadan önce çeker. Bu, ilk boyama süresini büyük ölçüde azaltabilir, çünkü web sitenizin /images/logo.png web sitenizin logosunu indirmeye başlamadan önce /site.css ayrıştırması gerekmez.

 toolbox.precache(['/index.html', '/site.css', '/images/logo.png']);

Kullanım Durumu 2: Çevrimdışı

Kullanıcıların çevrimdışı olduklarında web sitenizi tekrar ziyaret etmelerine izin vermek, en basit durumda, cihaz çevrimdışıysa önbelleğe geri dönmek anlamına gelir. Kesintili bir ağ, yanlış yapılandırılmış yönlendirici veya sabit portal kullanıcıyı süresiz olarak bekletebileceğinden burada bir zaman aşımı ayarlamak önemlidir.

 toolbox.router.default = toolbox.networkFirst; toolbox.options.networkTimeoutSeconds = 5;

Gerçekte, varlıklarınızın çoğu zamanla değişmeyeceğinden, aslında biraz daha akıllı olabiliriz. Muhtemelen içeriği önbellekten veya ağdan mümkün olan en kısa sürede almak istiyoruz. Aşağıdaki satır, Service Worker Toolbox'a, görüntülerin yollarına yönelik tüm isteklerin, eğer varsa, önbellekten gelmesi gerektiğini söyler.

 toolbox.router.all('/images/*', toolbox.fastest);

Bu durumda, kullanıcının kimliğini doğrularken, yalnızca önbelleğe alınmış bir yanıt döndürmememiz önemlidir; /auth/ için yapılan isteklerin yalnızca ağ üzerinden olması gerektiğini belirtmeliyiz.

 toolbox.router.post('/auth/*', toolbox.networkOnly);

İşte çevrimdışına almak için bazı iyi uygulamalar:

• İlk statik varlıklar önceden önbelleğe alınmalıdır. Bu onları indirir ve hizmet çalışanı yüklendiğinde önbelleğe alır. Bu, sonunda gerekli olduklarında sunucudan yüklenmeleri gerekmediği anlamına gelir.
• Varsayılan olarak, istekler ideal olarak ağdan yeni kaynaklanmalı, ancak çevrimdışı olarak kullanılabilmeleri için önbelleğe geri dönmelidir.
• Nispeten kısa bir ağ zaman aşımı, isteklerin, veri bağlantısına sahip olduğunu ancak yanıt verilmediğini söyleyen bir ağ bağlantısında önbelleğe alınmış verileri döndürebileceği anlamına gelir.
• Görüntüler gibi nadiren güncellenen varlıklar önce önbellekten gönderilmelidir, ardından tarayıcı da bunları güncellemeye çalışır. toolbox.cacheOnly kullanılırsa, kullanıcının verilerini de kaydedebilir.

Not: Tarayıcı önbelleği ve Önbellek API'si farklı hayvanlardır. Önbellek API'si, ağ öncelikli veya yalnızca ağ olması durumunda atlanmıştır. İstekteki önbelleğe alma üstbilgileri hala geçerli olduğunu söylediğinden, istek yine de tarayıcının önbelleğine gelebilir. Bu, kullanıcının önbelleğe alınmış ve yeni verilerin bir karışımını alması sorununa neden olabilir. Jake Archibald'ın bu sorunu önlemek için bazı iyi önerileri var.

Servis Çalışanınızda Hata Ayıklama

Chrome veya Opera kullanıyorsanız, chrome://serviceworker-internals gidin. Bu, hizmet çalışanı komut dosyanızı incelemenize, duraklatmanıza ve kaldırmanıza olanak tanır.

Chrome ve Opera'nın son sürümlerinde, denetçideki "Uygulama" sekmesinden ayrıntılı görünümler ve hata ayıklama araçları alabilirsiniz.

Etkileşim ve Animasyon Performansı

İnsanlar, web'in yerel uygulamaların yaptığı düzgün animasyonlu arayüzlere sahip olmadığını düşünmeye başladı. Ancak, aynı standart web uygulamaları için kabul edilemez. Web uygulamaları, kullanıcılarımızın kalitesiz, ikinci sınıf bir deneyim sunduğumuzu düşünmemesi için sorunsuz bir şekilde canlandırılmalıdır. Hızlı hissettirmek için üç hedefimiz var:

• Kullanıcı bir şey yaptığında, uygulama da 100 milisaniye içinde bir şey yapmalıdır; aksi takdirde kullanıcı bir gecikme fark edecektir. Bu, dokunmalar, tıklamalar, sürüklemeler ve kaydırmalar için geçerlidir.
• Her kare, saniyede 60 kare (kare başına 16 milisaniye) tutarlı bir şekilde oluşturulmalıdır. Birkaç yavaş kare bile bariz olacaktır.
• Yalnızca parlak geliştirme makinenizde değil, zayıf bir ağda çalışan üç yıllık bir bütçe telefonunda hızlı olması gerekir.
• Hızlı başlamalıdır. Uzun zamandır, web sitelerimizin 1 ila 2 saniyeden kısa sürede görünür ve kullanılabilir olmasını sağlayarak kullanıcı etkileşimini korumaya odaklandık. Web uygulamaları söz konusu olduğunda, başlangıç ​​zamanı her zamanki kadar önemlidir. Bir uygulamanın tüm içeriği önbelleğe alınmışsa ve tarayıcı hala cihazın belleğindeyse, bir web uygulaması yerel bir uygulamadan daha hızlı başlayabilir. Yerel uygulama ve web sitesi geliştiricileri tarafından benzer şekilde yapılan bir hata, ürünün çalışması için ağa bağlı içerik gerektirmesidir.
• Web uygulamasının indirilmesi ve güncellenmesi için küçük olması gerekir: Bir uygulama mağazasından 10 MB çok fazla bir şey gibi gelmiyor, ancak her seferinde indirilen 10 önbelleğe alınmamış MB, birçok mobil kullanıcı için yönetmek çok imkansız.

Yarasa dışında, belgenin head en önemli öğe şudur:

 <meta name="viewport" content="width=device-width">

Bu satır, Chromium tabanlı veya Firefox olan telefon tarayıcılarında 300 milisaniyelik dokunma gecikmesi olmamasını sağlar, ancak yine de kullanıcının sıkıştırarak yakınlaştırmasına izin verir (erişilebilirlik için harika).

iOS 8 çıktığından beri, tıklamalar varsayılan olarak hızlıdır, ancak belirli buluşsal yöntemlere göre, tıklama hızlıysa yavaş görünebilir. Bu sizin için bir sorunsa, gecikmeyi kaldırmak için FastClick'i kullanmanızı öneririm.

Bir de animasyon performansı sorunu var. Muhtemelen içeri ve dışarı hareket eden çok sayıda güzel öğe, kullanıcı tarafından sürüklenebilen öğeler ve diğer hoş etkileşimler isteyeceksiniz.

Web performansı çok detaylı bir şekilde tartışılabilir ve çok sevdiğim bir konu ama burada fazla detaya girmeyeceğim. Etkileşimlerimin ve animasyonlarımın net ve pürüzsüz olmasını sağlamak için yaptıklarıma değineceğim.

Eski bir akıllı telefon için araştırın veya arkadaşlarınızdan veya ailenizden isteyin. Genelde eşimin Nexus 4'ünü ödünç alırım.

Telefonu bilgisayarınıza takın ve chrome://inspect/#devices adresine gidin. Bu, telefonda çalışan web sayfalarını incelemek için kullanabileceğiniz bir inceleme penceresi açacaktır. Düşük performans kaynaklarını bulmak için profil oluşturmayı kullanabilir ve zaman çizelgesini görüntüleyebilir ve ardından bunları gerçek bir temel cihaza göre optimize edebilirsiniz.

Belirli CSS özelliklerini canlandırmak, jank olarak bilinen gergin animasyonun en büyük nedenlerinden biridir. CSS Tetikleyicileri, tarayıcının tüm sayfayı yeniden boyamasına veya yeniden düzenlemesine neden olmadan hangi özelliklerin güvenli bir şekilde canlandırılabileceğini belirlemek için harika bir kaynaktır.

Performanslı animasyonlar yazmak sizin için göz korkutucu bir işse, oradaki birçok kütüphane işi halledecektir. Benim favorim, öğeleri sürükleme gibi dokunma etkileşimlerini çok iyi işleyebilen ve çok süslü animasyon ve ara doldurma yapabilen GreenSock.

Push bildirimleri

Anında iletme bildirimleri, kullanıcılarla yeniden etkileşim kurmanın harika bir yoludur. Kullanıcıyı uyararak, uygulamanızı akıllarında ön plana çıkarırsınız. Bitmemiş bir işlemi bitirebilir veya ilgili yeni içerik hakkında uyarılar alabilirler.

Anlık bildirimlerinizin o anda gerçekleşen olaylar için kullanıcıyla alakalı olduğundan emin olun. Daha sonra yapılabilecek şeyler için zamanlarını boşa harcamayın. Onları bilgilendirdiğiniz şey, eylemlerini gerektirmelidir (birine cevap vermek veya bir etkinliğe gitmek). Ayrıca, web uygulamanız görünür durumdaysa veya odaktaysa bildirim göndermeyin.

İle etkileşime girildiğinde, bir bildirim kullanıcıyı çevrimdışı çalışan bir sayfaya götürmelidir. Bildirimler okunmamış olarak asılı kalabilir; kullanıcının ağ bağlantısı olmadığında etkileşime girebilirler. Push bildiriminiz, etkileşime girmeye çalıştıktan sonra çalışmayı reddederse, kullanıcı hüsrana uğrayacaktır.

Anında iletme bildirimleri için en iyi deneyim , kullanıcıyı web uygulamanızı açma zorunluluğundan kurtarır ! “Yeni bir mesajınız var” anlamsız ve tıklama tuzağı bir başlık kadar can sıkıcıdır. Mesajı ve göndereni görüntüleyin.

Bildirimdeki işlem düğmeleri, tarayıcıyı açması gerekmeyen etkileşim istemleri sağlayabilir ("Bu gönderiyi beğen", "Evet ile yanıtla", "Hayır ile yanıtla", "Daha sonra hatırlat"). Bunlar, kullanıcıya kendi şartlarında hizmet eder, onları meşgul eder ve zaman yatırımlarını en aza indirir.

Kullanıcıya normal veya alakasız bildirimlerle spam gönderirseniz, tarayıcıda uygulamanız için bildirimleri devre dışı bırakabilirler. Bundan sonra, onları yeniden etkileşime sokmak neredeyse imkansız olacak ve onlardan tekrar kolayca izin isteyemeyeceksiniz!

Bunu önlemek için, uygulamanızın "bildirimi devre dışı bırak" düğmesine giden yolu net ve kolay hale getirin. Kullanıcıları sinirlendiren herhangi bir sorunu çözdükten sonra, yeniden etkileşim kurmayı deneyebilirsiniz.

Push Notification API, bir hizmet çalışanı gerektirir. Hiçbir tarayıcı sekmesi açık olmadığında anında iletme bildirimleri almak mümkün olduğundan, hizmet çalışanı bildirim isteğini bir arka plan iş parçacığında işleyecektir. Bildirimi kullanıcıya göstermeden önce API'nize getirme isteğinde bulunmak gibi zaman uyumsuz işlemleri gerçekleştirebilir.

Anında iletme bildirimi oluşturmak için tarayıcı üreticisi tarafından sağlanan bir uç noktaya istekte bulunun. Chromium tabanlı tarayıcılar (Opera, Samsung ve Chrome) için bu, Firebase Cloud Messaging olacaktır. Bu tarayıcılar ayrıca biraz da spesifikasyon dışı davranır.

Push-bildirim izni isteyerek bunun ayrıntılarını bulabilirsiniz:

 serviceWorkerRegistration .pushManager .subscribe({ // Required parameter as receiving updates // but not displaying a message is not supported everywhere. userVisibleOnly: true }) .then(function(subscription) { return sendSubscriptionToServer(subscription); })

Abonelik şuna benzeyen bir nesnedir:

 { "endpoint": "https://example.com/some/uuid" }

Yukarıdaki örnekte, kullanıcı kimliği o anda kullanılmakta olan uuid benzersiz bir şekilde tanımlar.

Not: Chromium tabanlı tarayıcılar biraz farklı davranır. Web uygulamanızın bildirim dosyasına girilmesi gereken bir Firebase uygulama kimliğine ihtiyacınız olacak (örneğin, "gcm_sender_id": "90157766285" ).

Ayrıca, bitiş noktası verilen biçimde çalışmayacaktır. Sunucunuzun çalışması için biraz karıştırması gerekiyor. API anahtarınız head ve uuid body olacak şekilde bir POST isteği olması gerekir.

Bir push bildirimi gönderirken, push bildiriminin gövdesinde veri göndermek mümkündür. Bu karmaşıktır ve API isteğindeki içeriğin şifrelenmesini içerir. Node.js için web-push paketi bunu halledebilir, ancak ben bunu tercih etmiyorum.

Bildirim alındıktan sonra zaman uyumsuz istekler gerçekleştirmek mümkündür, bu nedenle istemciye "gıdıklama" olarak bilinen minimal bir bildirim göndermeyi tercih ederim ve ardından hizmet çalışanı herhangi bir şeyi çekmek için API'me bir getirme isteğinde bulunacaktır. son güncellemeler.

Not: Servis çalışanı herhangi bir noktada tarayıcı tarafından kapatılabilir. Push olayındaki event.waitUntil işlevi, hizmet çalışanına olay bitene kadar kapatmamasını söyler.

 self.addEventListener('push', function(event) { event.waitUntil( // Makes API request, returns Promise getMessageDetails() .then(function (details) { self.registration.showNotification( details.title, { body: details.message, icon: '/my-app-logo-192x192.png' }) }) ); });

Bildirim etkinliklerinde de bir tıklama veya basın etkileşimi dinleyebilirsiniz. Nasıl yanıt vereceğinize karar vermek için bunları kullanın. Yeni bir tarayıcı sekmesi açabilir, mevcut bir sekmeye odaklanabilir veya bir API isteğinde bulunabilirsiniz. Ayrıca bildirimi kapatmayı veya açık tutmayı da seçebilirsiniz. Bildirimin kendisinde büyük işlevsellik oluşturmak için bu işlevi bildirim üzerindeki eylemlerle birlikte kullanın. Bu, harika bir deneyim sağlayacaktır çünkü kullanıcının her seferinde uygulamanızı açması gerekmeyecektir.

Web'in Güçlü Yönlerini Görmezden Gelmeyin

Son ve en önemli nokta, uygulama benzeri bir deneyim için acele ederken, çok önemli bir konuda web benzeri kalmayı unutmamalıyız: URL'ler.

Yüklü web uygulamaları genellikle tarayıcı kabuğunu gizler. Kullanıcının mevcut URL'yi paylaşabileceği bir adres çubuğu yoktur ve kullanıcı mevcut sayfayı daha sonra kullanmak üzere kaydedemez.

URL'lerin benzersiz bir web avantajı vardır: İnsanların uygulamanızda nasıl gezineceğini açıklamak yerine tıklayarak uygulamanızı kullanmasını sağlayabilirsiniz. Aynı şekilde, bunu kullanıcılara ifşa etmeyi unutmak çok kolaydır. Dünyanın en iyi uygulamasını yazabilirsin ama bunu kimse paylaşamazsa kendine büyük bir kötülük yapmış olursun.

Şuna geliyor: URL'yi ortaya çıkarmak için uygulamanızı paylaşma düğmeleri veya bir düğme aracılığıyla paylaşmanın yollarını sağlayın.

Aşamalı Web Uygulamalarını Desteklemeyen Tarayıcılar Ne olacak?

Check out ServiceWorker hazır mı? tarayıcılarda hizmet çalışanları için mevcut destek durumu için.

Tüm bunlar boyunca Chrome, Firefox ve Edge'den bahsettiğimi ancak Safari'yi dışarıda bıraktığımı fark etmiş olabilirsiniz. Apple, web uygulamalarını dünyaya tanıttı ve ilerici web uygulamalarına ilgi gösterdi, ancak yine de hizmet çalışanlarını veya web uygulaması bildirimini desteklemiyor. Ne yapabilirsin?

AppCache ile Safari için çevrimdışı bir web sitesi yapmak mümkündür, ancak bunu yapmak hem zor hem de sayfayı bozabilecek veya ilk yüklemeden sonra kalıcı olarak güncelliğini yitirebilecek garip uç durumlarla doludur.

Bunun yerine harika bir web uygulaması deneyimi oluşturun. Çok iyi bir tarayıcı olan Safari'de deneyim yine de harika olacağı için emeğiniz boşa gitmiş olmayacak. Servis çalışanları Safari'ye geldiğinde, onlardan yararlanmaya hazır olacaksınız.

Son olarak, arkalarındaki teknolojilere artan destek ve donanımla etkileşim için Web Bluetooth API, sanal için WebVR gibi web platformuna gelen yeni özelliklerle birlikte web uygulamaları dünyasında birçok heyecan verici gelişmeyi sabırsızlıkla bekleyebiliriz. gerçeklik ve yüksek hızlı oyun için WebGL 2. Şimdi web uygulamalarının olanaklarını keşfetmenin ve web'in geleceğini şekillendirmede yer almanın tam zamanı.

Bağlantılar

Aşamalı Web Uygulamaları Üzerine Diğer Yazılar

• “Progresif Web Uygulamasının Durumu ve Geleceği Hakkında Bir Başka Blog,” Ada Rose Edwards

Makalede Bahsedilen Linkler

• “App Store'un Şekli,” Charles Perry
• Hizmet Çalışanı Yardımcıları, Google, GitHub
• Hizmet Çalışanı Araç Kutusu, Google, GitHub
• "300 Milisaniye Tıklama Gecikmesi ve iOS 8", TJ VanToll
• Jake Archibald, "En iyi Uygulamaları ve maksimum yaş Gotcha'larını önbelleğe alma"