Twitter PWA: Bilmeniz Gerekenler

En iyi şirketler ile takip eden küçük şirketler arasındaki teknoloji farkı hiç bu kadar yakın olmamıştı. Aşamalı web uygulamasıyla, en büyük katkıda bulunanlardan biri, finansal yeteneğin büyük ölçüde azalmasıdır. Hizmet çalışanlarından derinden bahsetmesi gereken web uygulaması teknolojisinin yeni ve gelişmiş kullanımını uygulayarak, her büyüklükteki şirket PWA'yı kendi işlevsel ihtiyaçlarına ve bütçelerine göre ayarlayabilir. Dünyanın harika PWA uyarlamalarından ilham almak istiyorsanız, Twitter PWA'daki aşağıdaki örnek olay kaçırmamanız gereken bir şey.

Twitter'ın PWA Entegrasyonu Öncesi Öyküsü

Nisan 2017'de, sitesinin mobil tarayıcıdaki yeni geliştirmesi olan Twitter Lite, Google ile yapılan bir işbirliğinin ardından piyasaya sürüldü. Adı, daha hafif, daha hızlı ve daha kullanışlı olacak şekilde yapıldığı gerçeğinden geldi.

Bu güne hızlı bir şekilde ilerleyen Twitter, ABD'deki en popüler 3. sosyal medya sitesi ve dünya çapında en popüler 15. sosyal medya sitesidir. Kullanıcı demografisinin çoğu ABD'de olmasına rağmen, Japonya ve Hindistan, Twitter kullanıcılarının bir araya geldiğinde ABD kullanıcı sayısını aşan en büyük iki temsilcisidir.

Twitter Lite'ın hikayesi, Twitter'ın dünyanın en iyi sosyal medya sitesi olma yolunda ilerlediği 2010'dan 2017'ye kadar uzanmalıdır.

Twitter, ilk günlerde en büyük rakibi olan Facebook'a kıyasla zor bir başlangıç ​​yaptı. Bununla birlikte, 2010'dan itibaren, mavi kuş grafikte harika bir manzaraya tanık oldu, çeyrek çeyrek tutarlı bir büyüme. 2015, 2016 ve 2017 yılları arasında büyüme hızı yavaşladı.

ABD dışındaki potansiyeli fark eden Twitter, uluslararası pazara hızla ulaşıyordu.

Google, PWA'yı tanıttığı anda, Twitter nasıl genişleyebileceğini ve yeni kullanıcılar kazanabileceğini biliyordu. Twitter Lite, güvenilmez ağ bağlantılarına sahip gelişmekte olan ülkelere adanmış son cevaplarıydı. Yeni Twitter PWA, optimize edilmiş veri tasarrufu moduyla çalışırken bir megabayttan daha az depolama alanı kaplar. Kullanıcılar tıklayana kadar bulanık bir önizlemede görüntüler ve videolar.

Google for Twitter Lite Mühendislik Lideri Nicolas Gallagher, "Twitter Lite artık Twitter'ı kullanmanın en hızlı, en ucuz ve en güvenilir yolu" dedi. Twitter Lite'ın başarısı, PWA ile ilgili birçok makaleye manşet oldu.

Dünyanın En Büyük PWA'sının Çözümü – Twitter PWA

PWA geliştirmenin eylemsel bilgisi konusunda size yardımcı olmak için, Twitter PWA veya Twitter Lite çerçevesi hakkında önemli noktalar ve isteğe bağlı istekler için özelleştirilmiş yenilikçi yöntemler aşağıda sunulacaktır.

Twitter Lite'ın tüm amacının, zayıf İnternet bağlantılarından bağımsız olarak kullanıcıların mükemmel bir site deneyimine sahip olmalarını sağlamak olduğuna dikkat edin, bu da sonraki ziyaretlere yol açar ve ziyaretçileri sık kullanıcılara dönüştürür. PWA'nın hızını, güvenilirliğini ve güvenliğini geliştirme yeteneği sayesinde bunu mobile.twitter.com'da deneyimleyebilirsiniz.

Mimari Fikir

Twitter Lite, özünde basit, alçakgönüllü bir Node.js sunucusu ve istemci tarafı JavaScript uygulamasıdır. PWA, veri önbelleğe alma ve depolama için API oluşturulmasını sağlayacaktır. Sunucu önce kimlik doğrulama süreciyle ilgilenecek, uygulamanın en eski durumunu bir araya getirecek ve uygulama kabuğunda ilk HTML oluşturma işlemiyle web kodlarını etkileşimli sayfalara dönüştürecektir.

Arka planda yüklendikten sonra, veriler doğrudan Twitter API'sinden istenecektir. Bu mimarideki sadelik, Twitter PWA'nın büyüklük ölçeğinde bile verimlilik açısından olağanüstü ve güvenilir bir hizmet sunmasına yardımcı olur.

Tasarım Performansı

Kullanımı kolay, Twitter Lite için en önemli önceliklerden biridir. Milyonlarca, hatta yüz milyonlarca kullanıcı bu sosyal ağa her ay erişecektir. Bu nedenle, her türlü bağlantı koşulunda son derece kullanışlı bir kullanıcı yolculuğu oluşturmak istiyorlar.

Geliştiriciler, Service Worker, Web Push Bildirimleri, IndexedDB ve Web App Install Banner'ları oluşturmak için modern tarayıcılardan gelen en son güncellemelerle birleştirilmiş bir dizi artan performans kaldıracı olan PRPL modeli kullanmıştı. Hepsi etkileyici yükleme hızının ve bağlantıdan bağımsızlığın bir parçasıydı.

Verilerin Kullanımı

Veri kaydetme moduyla birlikte daha küçük verileri önceden sunmak için önbelleğe alınmış kaynaklara dayanan Twitter Lite, doğası gereği veri kullanımını en aza indirecek şekilde ayarlanmıştır ve zaman çizelgesi sayfasında %40'lık bir kesinti sağlar. İsteğe bağlı olarak optimize edilmiş görüntüyü yüklemek için, bir düğme tıklamasıyla boyutunu görüntülemek için bir HEAD isteği gerçekleştirilir.

Aşamalı Yükleme

Tarayıcıya ilk HTML yanıtını döktükten sonra, sunucunun etkileşimli durumu bir araya getirmesi için önemli kaynakları önceden yüklemek için talimatlar gönderilir. Komut dosyaları, yalnızca istendiğinde yüklemek için web paketi kullanılarak ince parçalara ayrılır.

Başka bir deyişle, Twitter Lite'ın ilk yüklemesi son derece hızlıdır, çünkü yalnızca görünür görünümün gerekliliği yürütülürken, bir hizmet çalışanı gelecekteki etkileşimlerde neredeyse anında görünümü ve sorunsuz geçişi sağlamak için ek kaynakları önceden önbelleğe alacaktır.

Çevrimdışı Kullanılabilirlik

Tıpkı yerel uygulaması gibi, bir hizmet çalışanı da geçici çevrimdışı kullanımı mümkün kılar. Önceden yüklenen tüm sayfalar, HTML uygulama kabuğundaki önbelleğe alma, statik varlıklar ve en yaygın bazı emojiler aracılığıyla anında yeniden açılır.

"Yeniden Dene" düğmesi, sorunun halledilmesini sağlamak için verilerde veya komut dosyaları yüklenirken bir hata olduğunda sağlanır. Çevrimdışı taramayı etkinleştirmek, başlatma ve sonraki ziyaretlerdeki yükleme hızı çok daha iyi.

oluşturma

Pahalı işleme işini unutun; Twitter Lite, bileşen oluşturma için optimize edilmiştir. Bununla birlikte, daha büyük sorun, ek performans için sonsuz gereksinim listesiyle birlikte Tweetlerin karmaşıklığında yatmaktadır.

Ardından, içeriği yalnızca yukarıda sunulan görünüm için görünür kılan ve ekranlar arasında kaydırmak için korunan sanallaştırılmış bir liste bileşeni düşündüler. Başka bir güncelleme, çok önemli olmayan işlemeyi etkin olmayan moda ertelemek ve requestIdleCallback API tarafından veri tüketiminden tasarruf etmekti.

Sistemler ve Yinelenen Hız

Twitter Lite, uygulamanın herhangi bir şekil isteğine uyması için bileşen ayrıntılarına dayalı olarak oluşturulmuş duyarlı bir tasarım sistemidir. UI bileşenleriyle çalışmak, hızlı yineleme ve yerleşik yapı taşlarının yeniden kullanımı için alan açmıştı. Ayrıca, mizanpaj tasarımı, renklere, yazı tipi boyutlarına ve uzunluklara sabitlenmiş sınırlı sayılar için flexbox'a büyük ölçüde güvenildiğini belirtmekte fayda var.

Twitter PWA'nın Sonucu

Mobil ve Masaüstü Sitesi

Twitter PWA'nın 3G ağına sahip çoğu cihazda en kısa sürede 5 saniye ve altında etkileşime girdiği iddia ediliyor. Lite sürümü %30 daha hızlı yüklenir ve veri kullanımında %70'e varan oranda tasarruf sağlarken etkileşim süresi gecikmesini %25'ten fazla azaltır.

Eski yerel uygulamayla karşılaştırıldığında, Twitter PWA yalnızca boyutun en fazla %3'ünü kaplar, bu da cihazın depolama alanında çok az yer kaplar. Yine de derinden ve güçlü bir şekilde çalışır. En karmaşık özelliklerden biri olan zaman çizelgeleri, Redux modülünü bir React bileşenine, karma içeriğe eklerken sınırlı 30 kod yapılandırma satırından oluşturulabilir.

PWA, normal besleme, anında iletme bildirimi açılır pencereleri, doğrudan mesajlaşma ve arama sekmeleri gibi standart özelliklerle yerel uygulamaya çok benzer şekilde çalışır. Geçiş, sayfalar ve öğeler arasında duyarlıdır, ancak dokunma yanıtının yerel uygulamalarından belirgin şekilde daha yavaş olduğu bildirilir. Geliştiriciler, gelecekteki sürümlerde kullanılabilirliği ve sorumluluğu artırmak için hala çalışıyor.

Hem Mac hem de Windows'taki eski ihmal edilmiş Twitter resmi uygulamalarına kıyasla, dar pencerelerde iyi çalışan masaüstü sürümünde her şey oldukça uygundur. Tüm deneyim, nispeten hafif ve kullanımı rahat hissettiriyor.

Twitter Lite şu anda 42 dili desteklemektedir ve Globalize özelliği yerellere uyan sayıları, tarihleri ​​ve mesajları ortaya çıkarmak için oluşturulmuştur.

Rakamlarla Sonuçlar

• Oturum başına sayfa sayısında %65 artış
• Gönderilen Tweet sayısında %75 artış
• Hemen çıkma oranında %20 azalma

Twitter PWA Nasıl En Hızlı PWA'lardan Biri Oldu?

Daha az veri tüketimi için optimizasyonun yanı sıra servis çalışanlarının mevcut bilgilerindeki işlevsel ince ayar ile PWA, daha hızlı yükleme hızıyla başa çıkmak ve hem başlangıçta hem de yolculuk sırasında sonraki ziyaretlerde neredeyse anında görünecek şekilde yapılandırılmıştır.

Hız için optimizasyon bir veya iki gün içinde olmayacak, tekrarlayan bir test etme, izleme, ölçme, bunun neden olduğunu anlamaya çalışma ve olası çözümleri uygulama süreci olacak. Performans üzerinde çalışmak, burada ve orada izleme, ölçme ve iyileştirme kısır döngüsüdür.

Bununla birlikte, Twitter Lite, ilk sayfa yüklemesi, React bileşenlerinin oluşturulması, yeniden oluşturulmasının önlenmesi vb. Her biri, bir bütün olarak performans artışına hizmet ediyor ve şu anda gördüğümüzü telafi eden tüm küçük çabalar, dünyanın en büyük ve en hızlı PWA benimsemelerinden biri.

Tabii ki, bu unvanı korumak için geliştiricilerin her şeyin kontrol altında olduğundan emin olmak ve bir şans varsa süreci daha da iyi bir şeye dönüştürmek için sürekli çalışması gerekir.

Twitter PWA ve PWA Hakkında Sıkça Sorulan Sorular

Twitter Bir PWA mı?

Kesinlikle. Twitter, 2017'de Google geliştiricileri ile işbirliği içinde yeni aşamalı web uygulaması sürümünü yayınladı. Twitter PWA'nın adı Twitter Lite ve yapısı, ABD'ye kıyasla genellikle kararsız bağlantılarla karşılaşabilecek uluslararası kullanıcılara hizmet vermeye odaklandı.

Twitter PWA Gibi Bir PWA Oluşturmak Pahalı mı?

Twitter PWA'nın tüm Twitter yetkililerinin en ucuz sürümü olduğu söyleniyor, ancak farklı tarayıcılarda harika bir performans sergiliyor ve hatta yerel uygulamanın en iyi özelliklerinden bazılarına benziyor.

Twitter PWA, mükemmel performans optimizasyonu ile PWA'nın modern teknolojisinin birinci sınıf uygulamasının bir birleşimidir. Bununla birlikte, Twitter Lite gibi istisnai bir PWA oluşturmak, büyük ölçüde işe aldığınız veya dışarıdan hizmet aldığınız geliştirme ekibine bağlıdır.

PWA, yerel uygulamalara mümkün olan en iyi alternatiftir ve popüler olarak web sitelerinin geleceğini tahmin eder. Bu nedenle, çevrimiçi işletmeler, yerinde müşteri yolculuğunu geliştirerek dönüşüm oranlarından yararlanmanın bir yolunu arıyorsa, ağır ve pahalı yerel uygulamaları bir kenara bırakın ve bunun yerine PWA'ya bakın.

İşletmenizin PWA Geliştirmesine Nereden Başlamalı?

Her şey işinizin nerede olduğu, neye ihtiyacı olduğu ve nerede olmasını istediğinizle başlamalıdır. Mantıklı olmak? Çünkü alakasız bir şey için para ve değerli zaman kaybetmek istemezsiniz, değil mi?

Bir sonraki önemli adım, PWA'nın iş stratejinize uyup uymayacağına karar vermektir. Hemen hemen herkes site trafiğini artırmanın, dönüşüm oranlarını iyileştirmenin veya birim değerinden yararlanmanın yollarını arıyor. Ve bir PWA geliştirme ajansı size tüm bu konularda yardımcı olabilir.

Sitenizdeki düşük performans gösteren alanlarda sorunu tespit etmenize yardımcı olabilirler. En iyi çözümü bulamıyorsanız, bir danışma veya muayene hizmeti için başvurun.

İşte o zaman şu adıma ulaşıyoruz: güvenilir bir PWA geliştirme hizmeti sağlayıcısı seçin. Müşterileri için en iyisini arayan dinamik bir geliştirici ekibini zorlayan, yılların deneyimine sahip bir ada ve elbette son derece işlevsel ve zengin özelliklere sahip bir PWA oluşturmak için gereken mükemmel bilgi ve becerilere ihtiyacınız var.

Tigren, son on yılda binlerce küresel KOBİ'nin güvendiği, dünyanın önde gelen dış kaynak ajansıdır. Biz, sektörlerinde en başarılı kişilerden seçilmiş genç, hevesli ve özverili bireylerden oluşan bir ekibiz.

Özellikle Magento ve PWA geliştirme hizmetleri ile e-ticaret geliştirme konusunda uzmanız. Size başka yerde bulamayacağınız en iyi teklifi sunmak, sonuna kadar size yardımcı olmak ve bize geldiğiniz hedefe ulaşmak istiyoruz.

Aşağıdakiler için etkili ve uygun maliyetli bir çözüme ihtiyacınız varsa bize güvenebilirsiniz:

• Sıfırdan tamamen e-Ticaret PWA geliştirmesi
• Kısmen e-Ticaret PWA geliştirmesi
• Mevcut bir e-Ticaret PWA'sında yerleşik çözümler ve iyileştirmeler
• Premium kullanıma hazır e-Ticaret PWA temaları/eklentileri/uzantıları

Önemli Çıkarımlar

Yeni Twitter PWA, donuk ve tepkisiz mobil web dünyasına yeni bir soluk getiriyor. Twitter ve Google arasındaki güçlü ortaklık, ününü, PWA'nın potansiyeli hakkındaki tüm endişeleri ve şüpheleri ortadan kaldırarak dönüşümsel bir benimsemeyle ödedi. Başarılı bir PWA'yı erken benimseyen biri olun, çevrimiçi kullanıcılarınızı şımartmaya başlayın ve çok geç olmadan bugün Tigren ile yatırım getirisindeki artışınızı teşvik edin.