Progressive Web App Nasıl Yapılır

Feb 2, 2026
Nasıl Yapılır

Mobil şimdi Web'in trafiğinin yarısından fazlasını oluşturuyor ve Web uygulamaları, kullanıcıların yerel uygulamaları rakip olan tarayıcıda bir şeyler yapmalarını sağlar, ancak bir sorun var: Bağlantıların ve cihazların kalitesi tüm dünyada büyük ölçüde değişir.

Her ikisini de Seul'deki yıldırım-hızlı bağlantılardaki kullanıcılara ve eski bir telefonda kırsal Hindistan'daki kullanıcılara ve kullanıcıların en son kullanılabilirlik mücadelesidir ve ilerici web uygulamaları çözümdür.

PWAS Önce en önemli içeriği yüklemek için ilerici geliştirmeyi kullanır, ardından gerektiği gibi sunum ve fonksiyonel ekstralar ekleyin, yani tüm kullanıcılarınızın aynı çekirdek deneyimini mümkün olduğunca çabuk alırlar. Mümkün olan en geniş kitleye ulaşmak istiyorsanız, PWA'lar gitmenin yoludur.

  • Bir ilgi çekici kullanıcı deneyimine 10 adım

Progressive web uygulamaları, web'e çok fazla avantaj ve işlevsellik getirse de, tüm başvurunuzu yeniden yazmayı gerektirmezler. Herhangi bir uygulama, birkaç ekstra katman ekleyerek bir PWA'ya dönüştürülebilir.

En iyi sonuçlar için, başlangıçtan itibaren performansa güçlü bir vurgu yapmak isteyeceksiniz - ama bu herhangi bir web uygulaması için geçerlidir. Burada, uygulamanızı ilerici hale getirmek için adımlarla yürüyeceğiz.

Düzgün bir şekilde çalışan bir site oluşturmak istiyorsanız, emin olun. ağ sağlayıcısı nokta açık ve iyi bir kullanım Web Sitesi Oluşturucu .

01. HTTPS üzerinden servis yapın

Dürüst olalım: Bunu yine de yapmalısın. SSL, web'e ekstra bir güvenlik katmanı ekler, kullanıcılarınızın sitenizi kullanırken güvende hissetmelerine yardımcı olur. Pwas ile HTTPS, servis çalışanlarını kullanmak ve ana ekran kurulumuna izin vermek için esastır. Etki alanı kayıt şirketinizden bir SSL sertifikası satın alabilirsiniz ve ardından barındırma servisinizden sonra yapılandırabilirsiniz.

02. Bir uygulama kabuğu oluşturun

Uygulamanız kabuğunuz yüklenen ilk şeydir - kullanıcının gördüğü ilk şey. Endition HTML belgenizde, mümkün olduğunca hızlı görünmesini sağlamak için, Inline HTML belgenizde bulunmalıdır, mümkün olduğunca hızlı görünmesini sağlamak için kullanıcınız gerektiğinden daha uzun süre beyaz bir ekrana bakmıyor. Uygulama kabuğu, ilerici geliştirme modelinin bir parçasını oluşturur. Uygulamanız, kullanıcı içeriğini en kısa sürede vermeli ve daha sonra daha fazla veri (muhtemelen javascript) yükü olarak kabul etmelidir.

Aşağıdaki örnek bir reakt.js uygulamasından alınmıştır. Kullanıcı, uygulamanın bir ana hatları ve index.html'de bir yükleme göstergesi ile sunulmuştur. Ardından, JavaScript yükledikten sonra boots yukarı çekildiğinde, tam başvuru kabuk içinde oluşturulur. 

 & lt;! - index.html - & gt;
& lt; vücut ve gt;
& lt; div id = "root" & gt;
  & lt; div id = "konteyner" & gt;
  & lt; div sınıf = "iç konteyner" & gt;
  & lt; div id = "başlık" & gt;
  & lt; img src = "/ varlıklar / icon.png" alt = "logo" / & gt;
  Sohbet & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "yükleme konteyneri" & gt;
  & lt; img src = "/ varlıklar / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js
Reaktdom.render (
& lt; app / & gt;
belge.getElementbyid ('root')
);

03. Bir servis işçisini kaydedin

PWA Goodies'in tam spektrumuna dokunmak (push bildirimleri, önbelleğe alma, yükleme istemi) bir servis işçisine ihtiyacınız olacaktır.

Neyse ki, kurulması oldukça kolay. Aşağıda, kullanıcının tarayıcısının servis çalışanlarını destekleyip desteklemediğini kontrol ediyoruz. Öyleyse, öyleyse, burada servis çalışanı dosyasını kaydetme ile devam edebiliriz, servis-işçi.js . Bu noktada bu dosyada özel bir şeye ihtiyacınız olmadığını unutmayın - boş olabilir.

Bununla birlikte, aşağıdaki örnekte, üç ana servis işçisi yaşam döngüsü olayına nasıl dokunacağını gösteriyoruz. Bunlar, kullanıcı ilk önce sayfanızı ziyaret ettiğinde 'kurulum'. Kayıt tamamlanmadan hemen önce 'Etkinleştir'; ve uygulama bir ağ isteği yaptığında, 'Alma'. Sonuncusu önbellekleme ve çevrimdışı yetenek için ilgilidir. 

& lt; script & gt;
  if ('Navigator' in 'ServiceWorker' {
  window.addeventlistener ('yük', işlev () {
  navigator.serviceworker.register ('servis-işçi.js'). Sonra (işlev (kayıt) {
  // Kayıt işlemi başarıyla tamamlandı
  console.log ('Kayıtlı!');
  }, işlev (err) {
  // kayıt başarısız :(
  console.log ('Servis İşleme Kayıt Başarısız:', err);
  }). Yakala (işlev (err) {
  console.log (err);
  });
  });
  } Başka {
  console.log ('servis işçisi desteklenmiyor');
  }
  & lt; / script & gt;
// servis-işçi.js
self.addeventlistener ('install', fonksiyon () {
  konsol.log ('yükleme!');
});
self.addeventlistener ("etkinleştir", olay = & gt; {
  console.log ('Etkinleştir!');
});
self.addeventlistener ('fetch', işlevi (olay) {
  console.log ('getir!', event.request);
});

04. Push bildirimleri ekleyin

Servis çalışanları, kullanıcılarınızın Web itme API üzerinden push bildirimleri almalarını sağlar. Erişmek için, içine girebilirsiniz self.Registration.PushManager servis çalışanı dosyanızdan. Push bildirimlerinin gönderilmesi, arka uç kurulumunuza yoğun bir şekilde dayandığından, burada dalmayacağız.

Sıfırdan bir uygulamaya başlıyorsanız, Google'ın Firebase hizmeti, nispeten ağrısız push bildirimleri için FireBase Cloud Messaging ile birlikte gelir (Unutmayın: Tasarım dosyalarınızı güvende tuttuğunuzdan emin olun Bulut depolama) . Aşağıdaki kod, Push API üzerinden push bildirimleri için nasıl kaydedileceğini göstermektedir. 

 navigator.serviceworker.ready.then (fonksiyon (kayıt) {
  if (! Kayıt.pushmanager) {
    Uyarı ('Push Bildirimleri Desteği yok.');
    yanlış döndür;
  }
  // Push Manager'dan 'Push Bildiriminin "abone olmak için
  Kayıt .Pushmanager.Subscribe ({
  UservisBibleonly: true // Alındığında her zaman bildirimi göster
  })
  .THEN (fonksiyon (abonelik) {
  console.log ('abone oldu.');
  })
  .catch (işlev (hata) {
  konsol.log ('abonelik hatası:', hata);
  });
})

05. Bir Web Uygulaması Manifest Ekleyin

Uygulamanızı yükleyebilir hale getirmek için bir tane eklemeniz gerekir. manifest.json Uygulamanın kök dizininde. Bunu, uygulamanızın bir açıklaması olarak, uygulama mağazasına gönderebileceğiniz şeye benzer şekilde düşünebilirsiniz. Simgeleri, açılış ekranı, bir isim ve bir açıklama içerir.

Uygulamanızın kullanıcının ana ekranından başlatıldığında nasıl göründüğünde göründüğü için bazı yapılandırma da vardır: adres çubuğunu tarayıcıda göstermek ister misiniz? Durum çubuğunun ne renk olmasını istiyorsunuz? Ve bunun gibi. Uygun olduğunu unutmayın manifest.json Çeşitli cihazlar için tam bir simge boyutu spektrumunu içermelidir. Aşağıdaki kod, tezahürünüzün bazı özelliklerinin bir önizlemesidir. 

 {
  "Short_Name": "Sohbet",
  "İsim": "Sohbet",
  "Simgeler": [
  {
  "SRC": "/ varlıklar / icon.png",
  "Boyutlar": "192x192",
  "Tipi": "Image / PNG"
  }
  ]
  "Start_url": "/? Utm_Source = Ana Sayfa",
  "Background_Color": "# E05A47",
  "Theme_color": "# E05A47",
  "Ekran": "Bağımsız"
}

06. Yükleme istemini yapılandırın

Bir kullanıcı bir servis işçisi ile bir PWA'yı ziyaret ettiğinde, Chrome otomatik olarak onları ana ekranlarına yüklemelerini isteyecektir.

Buradaki fikir, kullanıcının başvurunuza ilgi gösterene kadar beklemektir ve sonra bunları cihazlarının bir fikstürünü yapmalarını isteyin (bu, bu yatırımın öne çıkmasını isteyen yerel uygulama yaklaşımının keskin bir kontrastı).

Ancak, yükleme istemi, kullanıcının belirli bir yararlı eylemi aldıktan sonra olduğu gibi farklı durumlarda göstermek istediğiniz durumlar olabilir. Bunu yapmak için, Öncedenstallprompt Etkinlik ve daha sonra tasarruf edin, ardından uyumu gördüğümüzde istemi dağıtın. 

 window.addeventlistener ('Önceki KallamPrompt', E = ve GT; {
  console.log ('Öncedenstallprompt Olay Ateşi' ');
  e.preventDefault ();
  // Etkinliği durdurun, böylece daha sonra tetiklenebilir.
  this.deferredprompt = e;
  yanlış döndür;
  });
// İstemi tetiklemek istediğinizde:
this.deferredprompt.prompt ();
  this.deferredprompt.userchoice.then (seçim = ve gt; {
  console.log (seçim);
  });
this.deferredprompt = null;

07. Uygulamanızın performansını analiz edin

Performans, PWA'ların kalbi ve ruhudur. Uygulamanız tüm ağ koşullarında kullanıcılar için hızlı olmalıdır. Önbellekleme ve çevrimdışı kapasite çok yardımcı olur, ancak günün sonunda, kullanıcının servis çalışanı teknolojisini desteklemek için tarayıcıya sahip olsa bile, uygulamanız hızlı olmalıdır. Bu, ilerici geliştirmenin tanımıdır - cihaz modernitesi veya ağ koşullarından bağımsız olarak herkes için harika bir deneyim sunar.

Bunu yapmak için, yararlı bir metrik kümesi demiryolu sistemidir. Rail, Google'ın bir 'kullanıcı merkezli performans modeli' olarak adlandırdığı şeydir - uygulamamızın performansını ölçmek için bir dizi yönergeler.

Kısaltma, Cevap anlamına gelir (uygulamanızın kullanıcı eylemlerine yanıt vermesi için ne kadar sürer), animasyon (60fps'de animasyon hızını tutma), boşta (uygulamanızın ek varlıkları yüklemek ve önbelleği başka bir şey yapmadığında zaman kullanarak) ve Yükleme (uygulamanızı bir saniye veya daha az yüklemek).

İşte Meggin Kearney, Tech Writer tarafından sağlanan uygulama yüklemesi için anlamlı bir kriter tablosudur. Google Web Temelleri .

delay and user reaction

Görüntüyü büyütmek için üstündeki simgeyi tıklayın

08. Deniz feneri ile uygulamanızı denetleyin

Google, ilerici web uygulamalarını ağın geleceği olarak iterek en büyük şampiyon. Bu nedenle, PWA gelişiminizi yönlendirmek için yararlı bir araç sunmuştur.

Eski adıyla deniz feneri olarak adlandırılan ve krom uzantısı olarak, Chrome 60'tan itibaren Krom DevTools'un bir parçasıdır, 'Denetimler' sekmesi altında. Deniz feneri ne yapıyor, uygulamanızı farklı koşullar altında çalıştırın ve PWA kurallarına göre yanıtını ve başarısını ölçün. Daha sonra size 100'ten bir puan verir. Ayrıca uygulamanızı web en iyi uygulamalarında aynı anda puan alabilir.

Aşağıdaki metin, ölçülen Deniz fenerinin bir listesidir. Kullanımda ayrıca açıklamaları gösterir.

  • Bir servis işçisini kaydeder
  • Çevrimdışı olduğunda 200 ile cevap verir
  • JavaScript mevcut olmadığında bazı içerikler içerir
  • Https kullanır
  • HTTP Trafiğini HTTPS'ye yönlendirir
  • Sayfa yükü 3G'de yeterince hızlı
  • Web uygulamasını yüklemeniz istenebilir
  • Özel bir sıçrama ekranı için yapılandırılmış
  • Adres çubuğu maçlar maçlar
  • Bir & lt; meta adı = "viewport" & gt; etiketlemek Genişlik veya ilk ölçek
  • Viewport için içerik doğru şekilde boyutlandırılır

Bu makale başlangıçta web tasarımcısında ortaya çıktı; abone olun .

İlgili Makaleler:

  • PWAS: Mobil Devrime Hoşgeldiniz
  • Mobil Uygulamalarda Animasyon Nasıl Kullanılır?
  • 9 Şaşırtıcı PWA Sırları

Nasıl Yapılır - En Popüler Makaleler

Bir WebGL 3D açılış sayfası oluşturun

Nasıl Yapılır Feb 2, 2026

(Görüntü Kredi: Gelecek) WebGL 3D açılış sayfası oluşturmak, izleyicilerinizle ilk izlenim bırakmanın bir ..

Hız Zbrush'ta bir yaratığı şekillendirdi

Nasıl Yapılır Feb 2, 2026

Zbrush'ta yaratıkları kavramlarken, fikrinizi bir GREYSCALE, UNSISSED parça olarak sunmak 3d sanat Bir izleyici..

VR'de 2B karakter nasıl getirilir

Nasıl Yapılır Feb 2, 2026

Eğilimleri takip ederseniz, VR'nin başka bir canlanma geçeceğini özlemek zor. Daha önce oldu, ama bu sefer biraz farklı ç..

Bir burun nasıl çizilir

Nasıl Yapılır Feb 2, 2026

Bir burun nasıl çizileceğini ustalaşmak, bir yüz çizmenin en kötü parçalarından biridir. Belki de her gün gördüğüm..

Yaş Age

Nasıl Yapılır Feb 2, 2026

Photoshop'ta bir fotoğrafın yaşlanması, bir ho-hum, tam renkli görüntüyü çarpıcı bir şeye bile dönüştürebilecek k..

Master Kullanıcı Deneyimi Stratejisi

Nasıl Yapılır Feb 2, 2026

Ux stratejisi Dijital bir ürünün tasarım veya geliştirilmesinden önce başlatılması gereken bir süreçtir. A..

Natürmort boyama becerilerinizi geliştirin

Nasıl Yapılır Feb 2, 2026

Çevrenizdeki dünyayı boyamadan daha iyi sevdiğim bir şey yok, ama ilk önce Guaş kullanmaya başladığımda kesinlikle benim için bir mücadeledi. Yabancı bir boya ortamı ile çalı..

10 En İyi Houdini Öğreticileri

Nasıl Yapılır Feb 2, 2026

Houdini, birçok Hollywood filminde kullanılan VFX oluşturma araçları olan güçlü bir canavardır. Ancak ilk öğrenme eğrisi diktir, bu yüzden bu ders listesini, Sıvı etkilerinden ..

Kategoriler