Progressive Web App Nasıl Yapılır

Sep 13, 2025

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ı

Progressive Web App Nasıl Yapılır

01. HTTPS üzerinden servis yapın

02. Bir uygulama kabuğu oluşturun

03. Bir servis işçisini kaydedin

04. Push bildirimleri ekleyin

05. Bir Web Uygulaması Manifest Ekleyin

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

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

08. Deniz feneri ile uygulamanızı denetleyin

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

Photoshop'ta kırışıklıkları nasıl kaldırılır

Artrage ile başlayın

Animasyonlu CSS Sanatı oluşturun

Bir kişiyi nasıl çizilir

AI motorlu bir chatbot oluşturun

Terminator hattı nedir?

Bir olay için nasıl gösterilir

Hayali bir marka için bir promosyon nasıl tasarlanır

Kategoriler