Ana Ekrana Ekle'yi PWA'nıza Nasıl Entegre Edebilirsiniz?

Ana ekrana ekle (kısaca A2HS), uygulamaların kullanıcının ana ekranından başlatılmasını da içeren tam bir yerel uygulama deneyimine izin verdiğinden, Aşamalı Web Uygulamaları deneyimi için esastır.

 Önerilen okuma: PWA vs Yerli: Hangisi Size Daha Çok Yakışıyor?

PWA'nız için bu kadar hayati bir özellik olduğundan, kesinlikle entegre edemezsiniz , bu yüzden bugün SimiCart PWA eğitiminde, A2HS'nin neden gerekli olduğunu, nasıl kullanıldığını ve PWA'nın nasıl yapıldığını gözden geçireceğiz. Hem mobilde hem de masaüstünde A2HS'ye hazır.

Destekleyen tarayıcılar

A2HS, tarayıcılar arasında evrensel bir özellik olmaya çok yakındır. Şu anda Mobile Chrome/Android Webview (sürüm 31'den itibaren), Android için Opera (sürüm 32'den itibaren) ve Android için Firefox (sürüm 58'den itibaren) tarafından desteklenmektedir. Daha ayrıntılı bir görünüm için CanIUse web sitesine bakın.

PWA Ana Ekrana Ekleme iş başında

PWA Ana Ekrana Ekle özelliğinin etkin olduğu (A2HS-Etkin) bir siteyle karşılaştığınızda, sitenin Ana ekranınıza eklenebileceğini bildiren bir başlık kullanıcı arayüzünün alt kısmında görülebilir:

Bu, belirli yüklenebilir kriterler karşılandığında gerçekleşen, tarayıcı tarafından sağlanan varsayılan yükleme promosyonudur . Bildirimin kendisi, bir kullanıcı web sitenizi ilk ziyaret ettiğinde ve ardından yaklaşık 90 gün sonra tekrar gösterilir.

Web uygulamanızı mobil cihazlarda A2HS etkin hale getirme

Kurulabilir kriterler

Web uygulamanızın yüklenebilir olması için:

• zaten yüklü değil
• bir kullanıcı etkileşimi buluşsal yöntemini karşılar (kullanıcı en az 30 saniye boyunca sayfayla etkileşime girmelidir)
• güvenli (HTTPS) bir bağlantıdan sunulabilir
• kayıtlı bir servis çalışanına sahip olmak
• düzgün yapılandırılmış bir bildirim dosyasına sahip olmak
• Ve en önemlisi, kullanılan tarayıcı beforeinstallprompt olayını desteklemelidir. beforeinstallprompt olayını destekleyen tarayıcıların tam listesi için CanIUse'a bakın.

Başlarken

Gösteri amacıyla, bu makalede, kurulabilir bir PWA oluşturmak için temel olarak create-react-app projesini kullanacağız. create-react-app, tek sayfalık bir uygulama oluşturmak için basit bir React komutudur.

Not : create-react-app için en az >= 10.16 ve npm >= 5.6 düğümü gerekir

Node.js Komut İsteminizi açın, aşağıdaki komutları çalıştırın:

 npx oluştur-tepki-uygulaması pwa-a2hs
cd pwa-a2hs
iplik başlangıcı 

Bir bildirim dosyası oluşturun

Genellikle bir web uygulamasının kök klasörünün derinliklerinde bulunan web bildiriminiz, web sitenizin tüm gerekli bilgilerini (uygulamanızın başlığı, farklı simgelere giden yollar, arka plan rengi vb.) JSON biçiminde içeren bir dosyadır. Bir web bildirim dosyası, web uygulamanızın kullanıcı deneyiminin çeşitli aşamalarında düzgün bir şekilde sunulmasına izin verdiği için işlevsel bir web uygulaması için çok önemlidir.

Dosyayı otomatik olarak oluşturmak için uygulamanız için boyut açısından optimize edilmiş simgelerle birlikte bir Manifest Oluşturucu kullanmanızı öneririz.

Bildirim oluşturucuyu kullanarak, aşağıdaki gibi içeriğe sahip bir manifest.zip dosyasına sahip olabilirsiniz:

Ve manifest.webmanifest şöyle görünmelidir:

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "ekran": "bağımsız",
    "dürbün": "/",
    "start_url": ".",
    "ad": "PWA-A2HS",
    "short_name": "PWA",
    "description": "A2HS özelliği için Demo PWA",
    "simgeler": [
        {
            "src": "/icon-192x192.png",
            "boyutlar": "192x192",
            "type": "resim/png"
        },
        {
            "src": "/icon-256x256.png",
            "boyutlar": "256x256",
            "type": "resim/png"
        },
        {
            "src": "/icon-384x384.png",
            "boyutlar": "384x384",
            "type": "resim/png"
        },
        {
            "src": "/icon-512x512.png",
            "boyutlar": "512x512",
            "type": "resim/png"
        }
    ]
}

Şimdi oluşturduğunuz manifest dosyalarının içeriğini /public/ klasörüne kopyalayın, bu klasördeki varsayılan manifest.json dosyasını silin ve bir sonraki adıma geçin.

HTML'yi bildirime bağlayın

Bildirim dosyanızı yapılandırmayı tamamladığınızda, daha sonra göreli bir yolla, yani /manifest.webmanifest ile çağrılabilmesi için web sitenizin kök dizinine kaydedin. ( \pwa-a2hs\public\index.html ), şöyle:

 <kafa>
    <meta karakter kümesi="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      isim = "açıklama"
      content="Create-react-app kullanılarak oluşturulan web sitesi"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

Kurulum akışını ayarlayın

Web uygulamanızı yüklenebilir hale getirmek için gereken tek şey bir web uygulaması bildirimi değildir. Web uygulamanızı yüklenebilir hale getirmek ve böylece onu bir PWA'ya bir adım daha yakın hale getirmek için yapmanız gereken bazı ek yapılandırmalar vardır.

Servis çalışanı oluşturun

Servis çalışanı, ağ isteklerinize müdahale eder ve PWA'nın ünlü olduğu çeşitli uygulama benzeri özellikleri etkinleştirir. pwa-a2hs\public içinde bir service-worker.js dosyası oluşturun ve onu aşağıdaki içerikle doldurun:

 self.addEventListener('getir', function(event) {
  event.respondWith(
      caches.match(event.request).then(function(yanıt) {
          dönüş yanıtı || getir(event.request);
      })
  );
});

Burada, ana ekrana ekleme deneyiminiz için çok önemli olduğu için fetch olayını dinlememiz gerekecek, bu olmadan React uygulamanız yüklenebilirlik gereksinimlerini karşılayamaz.

Servis çalışanlarınızı kaydedin

Ve service-worker.js çalışması için, index.html 'nin <body> kodunun sonuna bu kodu ekleyerek onu kaydetmemiz gerekecek:

 //index.html
<script>
    if (navigatörde 'serviceWorker') {
      // Kökünde barındırılan bir hizmet çalışanını kaydedin
      // varsayılan kapsamı kullanan site.
      navigator.serviceWorker.register('/service-worker.js').then(function(kayıt) {
        konsol.log('Hizmet çalışanı kaydı başarılı:', kayıt);
      }, /*catch*/ fonksiyon(hata) {
        konsol.log('Hizmet çalışanı kaydı başarısız:', hata);
      });
    } başka {
      konsol.log('Hizmet çalışanları desteklenmiyor.');
    }
  </script>

Test etme zamanı!

PWA'nız şimdi yüklenebilir olmalıdır. Ön ucunuzu yenileyin ve görev çubuğunuzda (masaüstü) bir yükleme düğmesi veya küçük bir bildirim başlığı (mobil) görmelisiniz.

Yükle'ye tıklamak, masaüstünüzde/ana ekranınızda olduğu gibi bir PWA kısayoluyla sonuçlanacaktır:

A2HS deneyiminde daha fazlası var

Yukarıdakiler, tarayıcı tarafından sağlanan yükleme promosyonunu kullanan ana ekran deneyimine yalnızca temel bir eklemedir. Bir çentik almak için, PWA kurulumunu teşvik etmek için çeşitli desenlerle kurulum akışını manuel olarak tetiklemek için Beforeinstallprompt olayını da kaydedebilirsiniz .

Özel bir yükleme düğmesiyle, bir uygulama yüklemesinden yararlanacak belirli kullanıcıları hedefleyerek kullanıcının yolculuğunun kesintiye uğramasını önleyebilirsiniz. Promosyon kullanıcı arayüzünü nereye ve nereye yerleştireceğiniz konusunda düşünerek, PWA'nız muhtemelen rakiplerinizden daha iyi performans gösterecek ve bunun sonucunda çok daha iyi uygulama dönüşüm oranları elde edecektir.