PWA Nedir? Teknisyen Olmayanlar İçin Kolay Bir Açıklama

Bu yazının bir pazarlamacının bakış açısıyla yazıldığını önceden bilmelisiniz. (Biraz HTML ve CSS okuyup yazabilirim, Javascript'i bir dereceye kadar anlayabilirim, ancak bu beni bir teknisyen yapmaz).

PWA nedir?

PWA (Aşamalı Web Uygulamaları ), bir web tarayıcısının yerel bir mobil uygulamanın (yani, iOS ve Android Mağazalarından indirilen uygulamalar) görünümüne ve hissine sahip olmasını sağlar. Bu yerel uygulamalar, web push bildirimleri gibi bazı benzersiz işlevlere sahipken sorunsuz bir mobil deneyim için optimize edilmiştir. PWA teknolojisi, yerel bir uygulamaya yakın olması için Chrome ve Safari gibi tarayıcılarda web'de gezinme deneyiminden yararlanır. Sonuç olarak bu, web trafiğini ve etkileşimi artırır.

Terim ilk olarak 2015 yılında Google tarafından tanıtıldı. Pete LePage – Google Developer Advocate'e göre “ilerici” kısım, “ kullanıcı zamanla uygulama ile aşamalı olarak bir ilişki kurdukça, giderek daha güçlü hale geliyor ” şeklinde açıklanabilir. ”.

PWA bir web sitesiyle aynı mıdır?

Evet, Aşamalı Web Uygulamaları web siteleridir.

Ancak, modern web teknolojisi sayesinde, sadece bir uygulama gibi görünürler ve hissedilirler. Bu, kullanıcıların tıpkı herhangi bir web sitesinde olduğu gibi bir URL ile tarayıcılarında Aşamalı Web Uygulamalarına göz atacakları, ancak PWA'ya girdikten hemen sonra, doğrudan tarayıcılarında bir "uygulama" kullanma deneyimine sahip oldukları anlamına gelir. indirin ve kurun.

Bir "uygulama" olması, PWA'nın mobil cihazlarla sınırlı olduğu anlamına gelmez. Masaüstünde de uygulanabilirler. Aslında, daha önce farkında bile olmadan PWA'yı sık sık ziyaret etmişsinizdir. Dizüstü bilgisayarınızda Instagram, Pinterest veya Tinder'a göz attıysanız, tebrikler! Web'de PWA'yı en başarılı benimseyenlerden bazılarıyla karşılaştınız.

PWA'yı çok daha kolay anlamanıza yardımcı olabileceğinden, bir PWA web sitesi örneğine bakalım.

Bir PWA örneği

G-SP e-Ticaret web sitesi bir PWA'dır. Web sitesini mobil cihazlarda ziyaret ettiğinizde, web sitesi URL'sini telefonunuzun ana ekranına gerçekten ekleyebilirsiniz.

Ardından, web sitesini tekrar ziyaret etmek istediğinizde, tıpkı Facebook veya Linkedin gibi diğer uygulamalarda olduğu gibi ana ekranınızda bir simgeyle tam oradadır.

G-SP web uygulamasını ana ekranınızdan açtığınızda, web sitesinin artık tarayıcının arama çubuğu olmadan tam ekran olduğunu görebilirsiniz. Ayrıca, alt kısmında uygulama benzeri bir gezinme menüsü vardır. Dahası, kaydırıp dokunduğunuzda, daha önce sahip olabileceğiniz bazı web'de gezinme deneyimlerinden farklı olarak tereyağı kadar yumuşak bir his verir.

 Önerilen Kaynaklar:
- G-SP PWA örnek olay incelemesi: birinci sınıf mobil deneyim için bir dönüşüm
- PWA'nın ilk 3 kullanım durumu

Bir web sitesinin PWA olup olmadığını anlamak için ipuçları

Bir geliştirici değilseniz ve sitenin kaynak kodunu incelemedikçe, bir web sitesinin PWA teknolojisi üzerine kurulu olup olmadığını tam olarak anlamanın kesin bir yolu yoktur.

Bununla birlikte, kesin bir sonucu garanti etmese de, size belirli bir web sitesinin bir PWA olduğuna dair bazı işaretler verebilecek birkaç püf noktası vardır.

Tek sayfalık web sitesi

Bu , bir web sitesinin PWA olup olmadığını anlamanın en basit yoludur. PWA'nın doğasına dayanmaktadır: Aşamalı Web Uygulamaları teknik olarak tek sayfalık bir web sitesidir. Bu, PWA üzerine kurulu bir web sitesinin yalnızca tek bir sayfası olduğu anlamına gelmez. Bu, bir kullanıcı web sitesini ilk kez yüklediğinde, sayfa görüntüleme olayının yalnızca bir kez gerçekleştiği anlamına gelir. Daha sonra tüm sayfa yüklemeleri Javascript tarafından gerçekleştirilir. Bu, her sayfa değişikliğinin tüm HTML kaynağıyla birlikte bir sayfanın yeniden yüklenmesine neden olduğu normal web sitelerinden farklıdır.

Peki bu nasıl çalışıyor? Çok basit: Tarayıcınızdaki aktif sekmeye bir göz atın. Site bir PWA ise, sayfaları değiştirdiğinizde site yeniden yüklenmez, yani tarayıcı sekmesinde "yükleme" animasyonu yoktur.

The New York Times web sitesinin bir PWA olmadığını söyleyebiliriz:

Örnek olarak SimiCart web sitemize bir göz atalım:

Neyi kastettiğimi anla? Sayfaları değiştirdiğinizde site yeniden yüklenmez! Teknik olarak tüm zaman boyunca sadece bir “sayfada” kalıyorsunuz. Bu nedenle PWA sayfaları çok hızlı ve sorunsuz yüklenir. Siteyi ilk ziyaret ettiğinizde tüm sayfalar önceden yüklenir ve daha sonra size teslim edilir. Ağ hızınıza bağlı değiller ve hatta çevrimdışı çalışabilirler!

Servis Çalışanları

Hayır, bu insan işçiler değil. Service Workers, çevrimdışı yeteneğini, anında iletme bildirimlerini ve kaynak önbelleğe almayı destekleyen Progressive Web App'in arkasındaki teknolojinin adıdır. Google'a göre, Hizmet Çalışanları PWA tekniklerinin merkezinde yer alır. Dolayısıyla, bir web sitesinin Service Workers teknolojisini kullanıp kullanmadığını anlayabilirsek, sitenin bir PWA olup olmadığını anlayabiliriz.

Chrome tabanlı tarayıcılar kullanıyorsanız Inspector Tool'u kullanarak bunu kolayca kontrol edebilirsiniz. Kontrol etmek istediğiniz web sitesine sağ tıklayın, Öğeyi İncele'ye tıklayın. Ardından Uygulama sekmesi > Hizmet Çalışanları'na gidin. O sitede herhangi bir Servis Görevlisi olup olmadığını kolayca görebilirsiniz.

Yine, bu numara size yalnızca belirli bir web sitesinin PWA olma olasılığı hakkında bir ipucu verir. Service Workers, PWA'nın temel bir parçası olmasına rağmen, PWA'ya özel değildir. PWA olmayan web siteleri, işlevlerini geliştirmek için Hizmet Çalışanlarından da yararlanabilir.

PWA Service Worker hakkında daha fazla bilgi edinmek istiyorsanız, bu harika teknoloji hakkında her şeyi öğrenmeniz için özel makalemiz var.

HTTPS güvenli kaynağı

Yine de, URL'sine bakarak bir web sitesinin PWA olup olmadığını tam olarak anlayabilirsiniz. Bir web sitesinin URL'si https: // yerine http:// ile başlıyorsa, bu bir PWA değildir. Bunun nedeni, PWA'nın yalnızca HTTPS olan güvenli bir etki alanında çalışan web sitelerinde çalışabilmesidir.

PWA ne kadar popüler?

Google'ın önerdiği gibi, PWA "mobil uygulamanın geleceği"dir, PWA önce büyük oyuncular, ardından daha küçük işletmeler ve kuruluşlar arasında popülerlik kazanmaktadır.

Windows platformundan Google Play Store gibi büyük uygulama pazarlarına kadar neredeyse her yerde rekabeti teşvik ediyor.

Birçok büyük ismin web sitelerinin Telegram, AliExpress, FlipBoard gibi PWA ve hatta 2048 veya Web Flap gibi tanıdık PWA oyunlarının PWA sürümleri olduğunu görebilirsiniz.

PWA avantajları: Aşamalı Web Uygulamaları ne yapabilir?

Bu makalenin yazıldığı noktada, PWA daha önce yerel uygulamalara özel olan şeylerin çoğunu zaten yapabilir. Buna kamera ve mikrofon, GPS, çevrimdışı mod, dosya erişimi ve çok daha fazlası gibi cihaz düzeyinde işlevlere erişim dahildir. PWA'nın neler yapabileceğine dair genel bir bakış için https://whatpwacando.today/ adresine göz atabilirsiniz .

Bu nedenle, web uygulaması, bir mobil uygulamaya yatırım yapmadan markalarının mobil deneyimini çevrimiçi olarak geliştirmek isteyenler için mükemmel bir seçimdir.

Normal mobil uygulama ve duyarlı web sitelerine göre PWA'nın avantajlarına biraz daha derine inelim:

PWA ve duyarlı web sitesi

Diyelim ki bir web sitesi ile karşılaştırıldığında, bir PWA aşağıdaki nedenlerden dolayı üstündür:

• Hız: Aynı içerik verildiğinde PWA, Service Workers teknolojisi sayesinde normal web sitelerinden daha hızlı yüklenir. Tüm içerikleri önceden önbelleğe aldığı ve gerektiğinde teslim ettiği için ilk yüklemede hızlıdır ve ikinci yüklemelerde daha da hızlıdır.
• Çevrimdışı mod : Çevrimdışı kullanılabilirlik Service Workers teknolojisiyle de mümkün hale getirilmiştir. Servis çalışanları düzgün bir şekilde entegre edildiğinde, tüm içerikler PWA'yı ilk ziyaret ettiğinizde önceden yüklenir ve daha sonra Javascript kullanılarak teslim edilir, bu da PWA'yı kesintisiz deneyimin şart olduğu web siteleri için yeni tercih edilen yaklaşım haline getirir. İhtiyaç duymanız durumunda PWA'nızı çevrimdışı çalıştırma hakkında bir kılavuzumuz var.
• Web push bildirimi: Yerel bir mobil uygulama gibi, PWA doğrudan mobil web tarayıcılarından kullanıcıların ana ekranına push bildirimleri gönderebilir. Bu, e-Ticaret mağazalarının müşterilerine kişiselleştirilmiş fırsatlar ve teklifler göndermeleri için özellikle yararlıdır. PWA Android için Web push özelliği uzun süredir etkinleştirildi ve neyse ki çok yakında PWA iOS'a gelecek.
• Ana ekrana ekle : Bu işlev, mobil kullanıcılardan PWA'yı “yüklemelerini” ister. Kullanıcı istemi kabul ettikten sonra, PWA mobil ana ekranına eklenecek ve diğer yüklü uygulamalar gibi çalışacaktır. İşte PWA Ana Ekrana Ekleme kılavuzumuz. kaçırmayın!

Chrome'daki eski "Ana ekrana ekle" istemi şuna benzer:

 >> Önerilen okuma: PWA ve Duyarlı Web Sitesi tam karşılaştırması

PWA ve Yerel Uygulama

PWA yalnızca web sitelerinden daha iyi değil, aynı zamanda PWA'ların getirdiği aşağıdaki avantajlar nedeniyle markalar artık yerel uygulamalar yerine PWA'ları seçiyor:

• Çapraz platform : PWA oluşturulduktan sonra, PWA işletim sistemi tabanlı değil tarayıcı tabanlı olduğundan, Android, iOS veya Windows gibi herhangi bir mobil platform üzerinden erişilebilir.
• Güncel : PWA'da yapılan değişiklikler, kullanıcılar sayfayı yenilediği anda hemen yürürlüğe girecektir.
• Endekslenebilirlik : PWA teknik olarak hala bir web sitesi olduğundan, içeriği Google gibi arama motorlarında dizine eklenebilir ve keşfedilebilir. Bu, PWA'nın yerel uygulamaya kıyasla daha geniş bir kullanıcı tabanına ulaşmasını sağlayan SEO (Arama Motoru Optimizasyonu) uygulamaları için fırsatlar yaratır.
• Yayınlamaya gerek yok : Yerel uygulamalarla, uygulama mağazaları yayınlama süreci bazen gerçek bir acı olabilir. Uygulamanızı uygulama mağazalarına gönderdiğinizi, 5 gün boyunca heyecanla beklediğinizi ve 10 kez tekrar okumanıza neden olan ve hala neden bahsettiğini bilmediğiniz bir ret cevabı aldığınızı düşünün. Ve bazı durumlarda uygulamanız asla kabul edilmeyebilir. (Seks dükkanları veya vape ürünleri, kimse var mı?). PWA ile uygulama gönderimi yoktur. Ne büyük bir rahatlama! PWA'larınızı Apple Appstore, Google Play ve Microsoft Store'da yayınlamak istiyorsanız, işte nasıl yapacağınız!
• Düşük geliştirme maliyeti : PWA bir kez geliştirilip daha sonra onu destekleyen tüm mobil platformlar ve tarayıcılar tarafından kullanılabilir olduğundan, PWA'nın geliştirme maliyeti yerel uygulamalara kıyasla nispeten düşüktür. Diğer bir neden ise PWA'nın daha yaygın olarak anlaşılan ve çok daha geniş bir geliştirici tabanına sahip programlama dilleri ve teknolojileri kullanmasıdır.

 Önerilen Kaynaklar:
- Aşamalı Web Uygulaması ve Yerel Uygulama: Hangisi size daha uygun?
- e-Ticaret için PWA'nın Faydaları

PWA dezavantajı

Açıkçası, tüm bunlar gerçek olamayacak kadar iyi geliyor; ve bir şey gerçek olamayacak kadar iyi göründüğünde, insanlar genellikle "Tamam, sorun ne?" diye sorarlar.

PWA, endüstriyi tanımlayan özelliklerine rağmen hala dezavantajlarına sahiptir:

• Erişilebilirlik

Teknoloji hala yeni ve her şey olduğu için, PWA'lar için mevcut bir uygulama pazarı yok ve bu da daha geniş bir kitleye ulaşma yeteneğini bir şekilde azaltıyor. Bununla birlikte, Microsoft gibi bilinen şirketlerden, PWA'ları Microsoft Store'a dahil ederek, Windows 10'da PWA'nın her şeyin geleceğini oluşturan hareketler var.

• Diğer yüklü uygulamalarla iletişim :

PWA hala temelde ve temelde uygulama benzeri bir web sayfası olduğundan, birçok yönden sınırlandırılabilir. En büyük sınırlama, bunun geliştiriciler için bir sorun teşkil edebilecek çapraz uygulama iletilebilirliği sınırlı olması olabilir.

SSS

PWA ne için kullanılır?

Hızlı, güvenilir ve kullanımı keyifli bir web uygulaması birçok amaca hizmet edebilir. Örneğin, Tik Tok, Aliexpress'in PWA'ları, insanların sitelere aşina olmasını sağlar ve böylece onlardan kendi yerel uygulamalarını indirmelerini ister. Spotify, web sitelerinin performansını ve yanıt verme hızını daha da optimize etmek için PWA'yı kullanır, böylece kullanıcılarına uygulamalarını indirmenin yanı sıra başka bir seçenek sunar. pacman veya 2048 gibi oyunlar da daha fazla web kullanıcısına ulaşmak için PWA'yı kullanır.

PWA ile normal bir uygulama arasındaki fark nedir?

Teknik açıdan, web tarayıcısı aracılığıyla PWA'ya erişirken yerel bir uygulamanın uygulama mağazasından indirilmesi gerekir. İş açısından bakıldığında, PWA daha SEO dostu, daha ucuz ve geliştirmesi daha hızlı olabilir. Bu arada, yerel bir uygulama karmaşık mobil projeler için hala en iyisidir, ayrıca daha güçlü bir marka güvenilirliği yaratabilir.

PWA yalnızca mobil cihazlarda mı çalışır?

Hayır, PWA hem masaüstünde, hem mobilde hem de tablette çalışır.

PWA'nın programlama dili nedir?

PWA, HTML, CSS, Javascript ve WebAssembly gibi popüler programlama dili ve web teknolojileri ile oluşturulmuştur.

Çözüm

“PWA, yerel uygulamaların yerini alacak mı?”

olmadığını düşünüyoruz.

Henüz.

2019'un dördüncü çeyreği itibarıyla Google Play'de yaklaşık 3 milyon, Apple App Store'da ise 2 milyonun üzerinde uygulama bulunuyor (Statista, 2019). Bu sayı hala artıyor ve tüm bu uygulamalar yakın zamanda değiştirilecek gibi görünmüyor. Kullanıcı alışkanlığı bir şeydir ve değiştirilmesi kolay değildir.

Bununla birlikte, Aşamalı Web Uygulamalarının büyük bir potansiyeli var. SimiCart'ta geleceğin Aşamalı Web Uygulamaları olduğuna inanıyoruz. Hızı, yerleşim esnekliği ve özellik yeteneği ile PWA, masaüstü sitenin, mobil sitenin, yerel mobil uygulamaların ve hatta yerel pencere uygulamalarının yerini almaya yöneliktir. Evet doğru duydunuz windows uygulamaları . Yalnızca e-Ticaret dünyasında, Progressive Web App şu anda çevrimiçi alışveriş yapanlar için hafif, duyarlı ve ilgi çekici bir deneyim isteyen mağaza sahipleri için tercih edilen yaklaşımdır.

Aslında istatistikler, PWA uygulamasında 1 aylık bir gecikmenin 1,4 milyon dolar gelir kaybına ve markalar altı ay ertelemeye karar verirse 6,8 milyon dolar daha fazla kayıpla sonuçlanabileceğini gösteriyor.

Her yönüyle mükemmel bir Magento PWA çözümü arayan e-Ticaret mağazası sahipleri için SimiCart'ta size ve mağazanız için eksiksiz bir paket sunuyoruz.