Aşamalı Web Uygulaması Eğitimi: İlk PWA'nızı Oluşturun

Google'ın kendisi tarafından yapılan ve şu anda Windows 10 gibi popüler platformlara aktarılan PWA, anında iletme bildirimleri, ilgi çekici uygulama arayüzü, çevrimdışı yetenekler, uygulama yüklemeleri gibi özellikler de dahil olmak üzere daha önce yerel uygulamalara özel olan birçok şeyi yapabilir. .

İşte bu yüzden PWA'nın ortaya çıkışı artık anlık olmayacak, çünkü artık bildiğimiz şekliyle Web'i temelden değiştirebilecek tam kapsamlı büyük ölçekli bir hareket. Yeni başlayanlar için, bir PWA oluşturma süreci artık eskisinden çok daha basitleştirildiğinden, sizin gibi ilgili meslekten olmayanlar için uygun olduğundan, bu gelişen teknolojiyi tanımak için çok geç değil.

En iyi öğrenme amaçlarınız için bugün React, Node.js ve Firebase kullanarak tamamen işlevsel bir PWA oluşturacağız.

Önkoşullar

• Node.js sürümü >= 8.10
• npm sürümü >= 5.6

Notlar : Node.js kurulumunuz her zaman npm paket yöneticisinin en son sürümüyle birlikte geldiğinden, npm sürümü gerçekten bir sorun olmamalıdır.

1. Create create-react-app ile bir SPA oluşturun

İlk olarak, üzerinde çalışmak için sağlam bir şeye ihtiyacımız var ve create-react-app bu amaç için mükemmel bir araçtır.

 npx oluştur-tepki-uygulaması my-PWA
cd mypwa
npm başlangıç

Yukarıdaki komutlar, birlikte çalışmanız için öğrenme, React tabanlı bir ortam oluşturmanıza yardımcı olacaktır.

HTTPS üzerinden sunun

HTTPS, web için yeni standarttır ve PWA'nın gelişiyle birlikte yalnızca daha yaygın hale geldi. Normal olarak, hizmet çalışanları onsuz çalışamayacakları için bir PWA HTTPS üzerinden sunulmalıdır ; ancak localhost ortamında çalıştığımız için buna gerek yok.

2. Çevrimdışı çalışmasını sağlayın

Varsayılan olarak, create-react-app hizmet çalışanları, kullanıcının bağlantısı olmadığında veya sonraki ziyaretlerde içeriğin çevrimdışı önbelleğe alınmasını ve yüklenmesini işleyecek şekilde önceden yapılandırılmalıdır.

Servis çalışanı, basitçe, sayfadan ayrı bir iş parçacığı üzerinde çalışan bir JavaScript komut dosyasıdır ve bu nedenle DOM yapısına herhangi bir erişimi yoktur. Bu yeni yaklaşım, hizmet çalışanları artık yalnızca bir PWA'nın tüm tipik özelliklerini (çevrimdışı yetenekler, anında iletme bildirimleri, vb.) ele almakla kalmayıp, aynı zamanda ağır hesaplamaların hafifletilmesinde de büyük bir rol oynadığından, daha ilerici, performans artırıcı özelliklerin ortaya çıkmasına neden oluyor. web sitenizin ayrı bir iş parçacığında.

PWA'nıza servis çalışanları yüklemek için /src/index.js bir göz atmak isteyeceksiniz.

index.js bu satırı arayın

 serviceWorker.unregister()

unregister() öğesini register() olarak değiştirin ve my-pwa üretim modunda çalıştırdığınızda servis çalışanlarınız otomatik olarak kaydedilecektir. PWA'nın yalnızca önbelleğe alınmış varlıkları yüklediği ve en son yerel değişiklikleri içermediği durumlara yol açabileceğinden, hizmet çalışanlarının geliştirme modunda etkinleştirilmesi önerilmez.

my-pwa üretim modunda çalıştırmak için:

 npm çalıştırma derlemesi
npx hizmet oluşturma 

Bundan sonra, Chrome'u açın ve localhost:5000 adresine gidin, inceleyin ve artık Uygulama sekmesinde hizmet çalışanlarının düzgün çalıştığını göreceksiniz.

Ve Önbellek Depolama kategorisinin altında, sitenizin çevrimdışı içeriğinin düzgün bir şekilde önbelleğe alınıp alınmadığını kontrol etmek isteyeceğiniz yerdir.

Notlar : Hizmet çalışanlarınızı üretim dışı modda kaydettirmek için bir geçici çözüm vardır. Bu, process.env.NODE_ENV === 'production' satırının src/serviceWorker.js kaldırılmasıyla elde edilir.

Bunu daha da derinleştirmek ve React'in önceden yapılandırılmış konfigürasyonlarına güvenmeden sıfırdan kendi servis çalışanlarınızı oluşturmak istiyorsanız, bizde varız. Bu öğreticide, basit bir web uygulamasından önce çevrimdışı olan bir Aşamalı Web Uygulamasının nasıl oluşturulacağını gösteriyoruz.

3. Ana ekrana eklemeyi ayarlayın

Şimdiye kadar her şey düzgün yapıldıysa, my-pwa üretim yapısını başlatırken küçük bir kurulum simgesi (+) görmelisiniz.

Her şey sizin için otomatik olarak yapıldığından, muhtemelen tüm bunların nasıl mümkün olduğunu merak ediyorsunuzdur. Endişelenme, bu yüzden buradayız.

PWA A2HS'nizi (Ana Ekrana Ekle) hazır hale getirmek için bir manifest.json dosyasına ihtiyacımız var. create-react-app birlikte gelen manifest.json , uygulamanızın simgelerinin kullanıcıya nasıl görüneceğini belirleyen ve açılış ekranı görünümünü tanımlayan çok temel bir JSON dosyasıdır. Bunları özelleştirmek için /public/manifest.json adresindeki mevcut dosyayı değiştirin.

 {
  "short_name": "İlk PWA'm",
  "name": "Basit bir PWA oluştur",
  "simgeler": [
    {
      "src": "favicon.ico",
      "boyutlar": "64x64 32x32 24x24 16x16",
      "type": "image/x simgesi"
    },
    {
      "src": "logo192.png",
      "tür": "resim/png",
      "boyutlar": "192x192"
    },
    {
      "src": "logo512.png",
      "tür": "resim/png",
      "boyutlar": "512x512"
    }
  ],
  "start_url": ".",
  "ekran": "bağımsız",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Buradaki şeylerin çoğu oldukça açıklayıcıdır, ancak kendinizi manifest.json ve bir PWA kurulumuna yol açan olaylara daha fazla girmek istediğinizi düşünüyorsanız, bu konuda bir yazı yazdık. Kontrol etmeyi unutmayın.

Notlar : manifest.json çalışması için onu index.html içine eklemeniz gerekir. Varsayılan olarak, create-react-app bunu sizin için zaten yapmış olmalıdır.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

PWA'nızı hizmet çalışanlarına ve uygun bir manifest.json kaydettirdiğinizde, kullanıcı uygulamanızı başlattığında, beforeinstallpromt kullanıcının ana ekranına yüklemek için izinlerini isteyen bir Beforeinstallpromt başlatılır.

Bununla birlikte, A2HS (Ana Ekrana Ekle) işleminin yalnızca yüzeyini çizdiğimizi ve öğrenecek daha çok şey olduğunu unutmamalısınız. Her şeyi öğrenmenin en iyi yolunun onu sıfırdan inşa etmek olduğunu düşünüyoruz, bu yüzden sizin için PWA'nın bu özel özelliği hakkında kısa bir rehber hazırladık. Kılavuz, bir PWA'nın yükleme etkinliklerindeki birkaç önemli bölümde size yol gösterecektir.

Alternatif olarak, kendinizi tembel ve motivasyonsuz hissediyorsanız, size yardımcı olmak için buradayız. Manifest Jeneratörümüz sizin için tüm bu süreci otomatikleştirmek için yapılmıştır.

4. Anında iletme bildirimlerini ayarlayın

Tarayıcılar, push bildirimlerini desteklemekte uzun bir yol kat etti. Yakın zamanda Chrome, bildirimlerin uçak modunda gösterilmesini sağlamak için Bildirim Tetikleyicilerini bile tanıttı. Bu, push bildirimleri için ileriye doğru atılmış büyük bir adım.

Ve şimdiye kadar, bu eğitimde Firebase'i kullanan bölümün nerede olduğunu merak ediyor olmalısınız. İşte bu. Bu bölümde, Push Bildirimlerini Firebase kullanarak bir PWA'ya entegre etme sürecini, özellikle de HTTPS isteklerini kullanarak mesajların gönderilmesini sağlayan Bulut Mesajlaşma özelliğini öğreneceksiniz.

Ancak tüm süreç biraz uzun olduğundan ve ayrıca her şeyi daha iyi takip etmenize yardımcı olmak için, sizin için kendi push bildirim entegrasyon eğitimimizi hazırladık. Bu öğreticiyle, bir kullanıcı belirtecine veya bir grup kullanıcıya anında iletme bildirimleri göndermeye çalışırken kendinizi herhangi bir sorunla karşı karşıya bulmamalısınız.

Çözüm

Ve tam bir PWA için bu kadar. Eğitimin herhangi bir bölümünde takılıp kalırsanız, sorularınızı çekinmeden bize iletin, biz de yanıtlamak için elimizden gelenin en iyisini yapacağız!

Devamını oku:
Magento 2'de PWA Nasıl Entegre Edilir