İlk Progresif Web Uygulamanız

Son Güncelleme Tarihi: 30.04.2019

Web uygulaması, Progresif Web Uygulaması nedir?

Progresif Web Uygulamaları masaüstü ve mobil cihazlarda doğrudan web üzerinden derlenen ve sunulan yüklenebilir, uygulama benzeri bir deneyim sunar. Hızlı ve güvenilir web uygulamaları. Daha da önemlisi, bunlar herhangi bir tarayıcıda çalışan web uygulamalarıdır. Bugün bir web uygulaması oluşturuyorsanız Progresif Web Uygulaması oluşturma yolundasınız.

Hızlı ve Güvenilir

Her web deneyimi hızlı olmalıdır. Bu durum özellikle Progresif Web Uygulamaları için geçerlidir. Hızlı, ekranda anlamlı bir içerik sunmak ve etkileşimli bir deneyim sağlamak için geçen süreyi ifade eder.

Ayrıca güvenilir şekilde hızlı olmalıdır. Güvenilir performansın ne kadar daha iyi olduğunu strese katmak zor. Bunu şu şekilde düşünün: Yerel uygulamanın ilk yüklemesi can sıkıcı. Bir uygulama mağazası ve devasa bir indirme boyutuyla yönetilmektedir. Ancak, uygulamanın yüklendiği bir noktaya geldiğinizde, ilk uygulama maliyeti tüm uygulama başlatmalarında amorti edilir ve bu başlangıçların değişken bir gecikmesi olmaz. Her başvuru başlangıcı, hiç değişiklik olmadan hızlıdır. Progresif Web Uygulaması (PWA), kullanıcıların yüklü deneyimlerden beklemesi gereken bu güvenilir performansı sunmalıdır.

Yüklenebilir

Progresif Web Uygulamaları bir tarayıcı sekmesinde çalışabilir ancak yüklenebilir. Bir siteye yer işareti eklemek yalnızca bir kısayol ekler, ancak yüklü Progresif Web Uygulaması (PWA), diğer tüm yüklü uygulamalar gibi görünür ve davranır. Uygulama, diğer uygulamalarla aynı yerden başlatılır. Özelleştirilmiş bir başlangıç ekranı, simgeler ve daha fazlası da dahil olmak üzere lansman deneyimini kontrol edebilirsiniz. Adres çubuğu veya başka bir tarayıcı kullanıcı arayüzü olmadan uygulama penceresinde uygulama olarak çalışır. Diğer tüm yüklü uygulamalar gibi görev değiştiricide de üst düzey bir uygulamadır.

Yüklenebilir PWA'ların hızlı ve güvenilir olduğunu unutmayın. PWA'yı yükleyen kullanıcılar, ne tür bir ağ bağlantısı kullanırlarsa kullansınlar uygulamalarının çalışmasını bekler. Yüklenmiş her uygulama tarafından karşılanması gereken bir temel beklentidir.

Mobil ve Masaüstü

Duyarlı tasarım teknikleri kullanan PWA'lar, platformlar arasında tek bir kod tabanı kullanarak hem mobil hem de masaüstünde çalışır. Yerel uygulama yazmayı düşünüyorsanız PWA'nın sunduğu avantajlara göz atın.

Geliştireceğiniz uygulama

Bu codelab'de, PWA tekniklerini kullanarak bir hava durumu web uygulaması derleyeceksiniz. Uygulamanız şunları yapabilecek:

Masaüstü veya mobil cihazlarda çalıştığından duyarlı tasarım kullanın.
Hızlı olun ve performansı artırmak için uygulama kaynaklarını (HTML, CSS, JavaScript, resimler) önceden önbelleğe almak ve çalışma zamanında hava durumu verilerini önbelleğe almak üzere servis çalışanı kullanın.
Yüklenebilir olmalıdır. Kullanıcıyı yüklenebilir hale getirmek için bir web uygulaması manifest dosyası ve beforeinstallprompt etkinliğini kullanın.

Neler öğreneceksiniz?

Web uygulaması manifest dosyası oluşturma ve ekleme
Basit bir çevrimdışı deneyim sağlama
Eksiksiz bir çevrimdışı deneyim nasıl sağlanır?
Uygulamanızı yüklenebilir hale getirme

Bu codelab, Progresif Web Uygulamalarına odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.

Gerekenler

Chrome'un en son sürümü (74 veya sonraki sürümler). PWA'lar tüm tarayıcılarda çalışır, ancak tarayıcı düzeyinde neler olduğunu daha iyi anlamak ve yükleme deneyimini test etmek için Chrome Geliştirici Araçları'nın birkaç özelliğini kullanacağız.
HTML, CSS, JavaScript ve Chrome Geliştirici Araçları hakkında bilgi sahibi olma.

Koyu Sky API için anahtar alın

Hava durumu verilerimiz Dark Sky API'den alınmaktadır. Kullanmak için bir API anahtarı istemeniz gerekiyor. Kullanımı kolaydır ve ticari olmayan projeler için ücretsizdir.

API Anahtarına kaydolma

API anahtarınızın düzgün şekilde çalıştığını doğrulama

API Anahtarınızın düzgün şekilde çalıştığını test etmek için WesternSky API'ye bir HTTP isteği gönderin. DARKSKY_API_KEY API'sini API anahtarınızla değiştirmek için aşağıdaki URL'yi güncelleyin. Her şey yolundaysa New York'un hava durumuyla ilgili en son tahmini görmeniz gerekir.

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

Kodu alın

Bu proje için ihtiyacınız olan her şeyi bir Git deposuna koyduk. Başlamak için kodu alıp favori geliştirici ortamınızda açmanız gerekir. Bu codelab için Glitch'i kullanmanızı öneririz.

Kesinlikle önerilir: Depoyu içe aktarmak için Glitch'i kullanın

Bu codelab üzerinden çalışmak için önerilen yöntem Glitch'i kullanmaktır.

Yeni bir tarayıcı sekmesi açın ve https://glitch.com adresine gidin.
Hesabınız yoksa kaydolmanız gerekir.
Yeni Proje'yi, ardından Git Repo'dan klonla'yı tıklayın.
https://github.com/googlecodelabs/your-first-pwapp.git anahtarını klonlayıp Tamam'ı tıklayın.
Kod deposu yüklendikten sonra .env dosyasını düzenleyin ve bunudarkSky API anahtarınızla güncelleyin.
PWA'nın işleyiş şeklini görmek için Göster düğmesini tıklayın ve ardından Yeni Pencerede'yi seçin.

Alternatif: Kodu indirin ve yerel olarak çalışın

Kodu indirmek ve yerel olarak çalışmak istiyorsanız Node.js uygulamasının son sürümünü ve bir kod düzenleyicinin ayarlanmış ve kullanıma hazır olması gerekir.

Kaynak kodunu indirin

İndirilen ZIP dosyasını paketten çıkarın.
Sunucuyu çalıştırmak için gereken bağımlıları yüklemek için npm install komutunu çalıştırın.
server.js öğesini düzenleyin vedarkSky API anahtarınızı ayarlayın.
Sunucuyu 8000 numaralı bağlantı noktasında başlatmak için node server.js komutunu çalıştırın.
http://localhost:8000 için bir tarayıcı sekmesi açın

Başlangıç noktamız ne?

Başlangıç noktamız, bu codelab için tasarlanmış temel bir hava durumu uygulamasıdır. Kod, bu codelab'deki kavramları gösterecek şekilde basitleştirilmiştir ve çok az hata tutar. Bu kodlardan herhangi birini üretim uygulamasında yeniden kullanmayı seçerseniz hataları giderdiğinizden ve tüm kodu tam olarak test ettiğinizden emin olun.

Deneyebileceğiniz bazı şeyler...

Sağ alt köşedeki mavi + düğmesine sahip yeni bir şehir ekleyin.
Sağ üst köşedeki yenileme düğmesiyle verileri yenileyin.
Her şehir kartının sağ üst kısmındaki x işaretini kullanarak şehri silin.
Chrome Geliştirici Araçları'ndaki cihaz açma/kapatma düğmesini kullanarak bu aracın masaüstü ve mobil cihazlarda nasıl çalıştığını görün.
Chrome Geliştirici Araçları'ndaki Ağ panelini kullanarak internete bağlandığınızda ne olacağını görebilirsiniz.
Chrome Geliştirici Araçları'ndaki Ağ panelini kullanarak, ağ Yavaş 3G'ye kadar kısıtlandığında ne olacağını görün.
server.js içinde FORECAST_DELAY değerini değiştirerek tahmin sunucusuna gecikme ekleyin

Lighthouse ile denetleme

Lighthouse, sitelerinizin ve sayfalarınızın kalitesini iyileştirmeye yardımcı olan, kullanımı kolay bir araçtır. Lighthouse performans, erişilebilirlik, progresif web uygulamaları ve daha fazlası için denetimler yürütür. Her denetimde, denetimin neden önemli olduğunu ve sorunların nasıl düzeltileceğini açıklayan bir referans dokümanı bulunur.

Hava durumu uygulamamızı denetlemek ve yaptığımız değişiklikleri doğrulamak için Lighthouse'u kullanacağız.

Lighthouse'u çalıştıralım

Projenizi yeni bir sekmede açın.
Chrome Geliştirici Araçları'nı açın ve Denetimler paneline geçin. Tüm denetim türlerini etkin bırakın.
Denetimleri çalıştır'ı tıklayın. Bir süre sonra Lighthouse size sayfada bir rapor sunar.

Progresif Web Uygulaması Denetimi

Progresif Web Uygulaması denetiminin sonuçlarına odaklanacağız.

Bir de çok sayıda kırmızı işaret var:

❗INVALID: Geçerli sayfa, çevrimdışı olduğunda 200 ile yanıt vermiyor.
❗SUCCESS: start_url internete bağlı değilken 200 ile yanıt vermez.
❗FAILED: Sayfayı ve start_url. içeriğini kontrol eden bir hizmet çalışanı kaydetmiyor
❗SUCCESS: Web uygulaması manifest dosyası yüklenebilir olma gerekliliklerini karşılamıyor.
❗SUCCESS: Özel bir başlangıç ekranı için yapılandırılmadı.
❗SUCCESS: Adres çubuğu tema rengi ayarlamaz.

Şimdi bu sorunlardan bazılarını düzeltmeye başlayalım.

Bu bölümün sonunda, hava durumu uygulamamızda aşağıdaki denetimlerden geçilecektir:

Web uygulaması manifest dosyası, yüklenebilir olma gerekliliklerini karşılamıyor.
Özel başlangıç ekranı için yapılandırılmamış.
Adres çubuğu tema rengi ayarlamaz.

Web uygulaması manifest dosyasını oluşturma

Web uygulaması manifest dosyası, geliştiriciye uygulamanızın kullanıcıya nasıl görüneceğini kontrol edebilmenizi sağlayan basit bir JSON dosyasıdır.

Web uygulaması manifest dosyasını kullanarak web uygulamanız:

Tarayıcıya, uygulamanızın bağımsız bir pencerede (display) açılmasını istediğinizi bildirin.
Uygulama ilk açıldığında hangi sayfanın açılacağını tanımlayın (start_url).
Uygulamanın yuvada veya uygulama başlatıcıda nasıl görüneceğini tanımlayın (short_name, icons).
Bir tanıtım ekranı oluşturun (name, icons, colors).
Tarayıcıya, pencereyi yatay veya dikey modda (orientation) açmasını söyleyin.
Ve çok daha fazlası.

Projenizde public/manifest.json adlı bir dosya oluşturun. Aşağıdaki içerikleri kopyalayıp yapıştırın:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Manifest, farklı ekran boyutlarına yönelik bir dizi simgeyi destekler. Bu codelab'de, iOS entegrasyonu için birkaç metin daha ekledik.

Web uygulaması manifest dosyasına bağlantı ekleme

Ardından, uygulamamızdaki her sayfaya <link rel="manifest"... ekleyerek tarayıcıya manifest'i bildirmemiz gerekir. index.html dosyanızdaki <head> öğesine aşağıdaki satırı ekleyin.

public/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

Geliştirici Araçları Talifi

Geliştirici Araçları, manifest.json dosyanızı hızlı ve kolay bir şekilde kontrol etmenizi sağlar. Uygulama panelinde Manifest bölmesini açın. Manifest bilgilerini doğru şekilde eklediyseniz bu bölmede bilgilerin ayrıştırılıp insan dostu bir biçimde görüntülendiğini görebilirsiniz.

iOS meta etiketleri &amp simgesi ekleme

iOS'te Safari web uygulaması manifestini (henüz) desteklemez. Bu nedenle index.html dosyanızın <head> bölümüne geleneksel meta etiketleri eklemeniz gerekir:

public/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

Bonus: Kolay Lighthouse düzeltmeleri

Lighthouse denetimimiz, düzeltilmesi kolay olan birkaç nokta daha ortaya koydu. Biz buradayken bunların giderilmesine yardımcı olalım.

Meta açıklamayı ayarlama

SEO denetlemesi sırasında Lighthouse, "Dokümanın bir meta tanımı olmadığını" belirtiyor. Açıklamalar Google Arama sonuçlarında görüntülenebilir. Yüksek kaliteli ve benzersiz açıklamalar, arama kullanıcıları için sonuçlarınızı daha alakalı hale getirebilir ve arama trafiğinizi artırabilir.

Açıklama eklemek için dokümanınızın <head> bölümüne aşağıdaki meta etiketini ekleyin:

public/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

Adres çubuğu tema rengini ayarlama

PWA denetiminde Lighthouse, "Adres çubuğu tema rengi belirlemedi" notunu verdi. Tarayıcının adres çubuğunun, markanızın renkleriyle uyumlu olmasını sağlamak, daha sürükleyici bir kullanıcı deneyimi sağlar.

Mobil cihazda tema rengini ayarlamak için dokümanınızın <head> öğesine aşağıdaki meta etiketini ekleyin:

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Lighthouse ile değişiklikleri doğrulama

Lighthouse'u tekrar çalıştırın (Denetimler bölmesinin sol üst köşesindeki + işaretini tıklayarak) ve değişikliklerinizi doğrulayın.

SEO Denetimi

✘ KARARLI: Belgenin bir meta açıklaması vardır.

Progresif Web Uygulaması Denetimi

❗INVALID: Geçerli sayfa, çevrimdışı olduğunda 200 ile yanıt vermiyor.
❗SUCCESS: start_url internete bağlı değilken 200 ile yanıt vermez.
❗FAILED: Sayfayı ve start_url. içeriğini kontrol eden bir hizmet çalışanı kaydetmiyor
✘ KARARLI: Web uygulaması manifest dosyası, yüklenebilir olma gerekliliklerini karşılar.
✘ KARARLI: Özel başlangıç ekranı için yapılandırılır.
✘ KARARLI: Adres çubuğu tema rengini ayarlar.

Kullanıcılardan, internete bağlı olmayan uygulamalarda her zaman bir temel deneyim yaşayacağına dair bir beklenti var. Bu nedenle, yüklenebilir web uygulamalarının Chrome'un çevrimdışı dinozor oyununu hiçbir zaman göstermemesi büyük önem taşır. Çevrimdışı deneyim basit bir çevrimdışı sayfadan, önceden önbelleğe alınmış verilerle salt okunur bir deneyime ve ağ bağlantısı geri yüklendiğinde otomatik olarak senkronize edilen tamamen işlevsel bir çevrimdışı deneyime kadar değişiklik gösterebilir.

Bu bölümde hava durumu uygulamamıza basit bir çevrimdışı sayfa ekleyeceğiz. Kullanıcı, uygulamayı çevrimdışıyken yüklemeye çalışırsa tarayıcının gösterdiği tipik çevrimdışı sayfa yerine özel sayfamızı gösterecektir. Bu bölümün sonunda, hava durumu uygulamamızda aşağıdaki denetimlerden geçilecektir:

Geçerli sayfa, çevrimdışıyken 200 mesajıyla yanıt vermiyor.
start_url, çevrimdışıyken 200 hatasıyla yanıt vermiyor.
Şu sayfayı kontrol eden bir hizmet çalışanı kaydettirmez: start_url.

Sonraki bölümde, özel çevrimdışı sayfamızı tam anlamıyla çevrimdışı bir deneyimle değiştireceğiz. Bu, çevrimdışı deneyimi iyileştirir ancak daha da önemlisi, öğelerimizin çoğu (HTML, CSS ve JavaScript) yerel olarak depolanıp yayınlandığından ağın olası bir darboğazı ortadan kaldırması nedeniyle performansı önemli ölçüde artırır.

Kurtaran hizmet çalışanları

Hizmet çalışanlarına aşina değilseniz Hizmet Çalışanlarına Giriş başlıklı makaleyi okuyarak neler yapabilecekleri, yaşam döngülerinin işleyiş şekli ve daha fazlası hakkında temel bilgiler edinebilirsiniz.

Hizmet çalışanları tarafından sağlanan özellikler kademeli bir geliştirme olarak kabul edilmeli ve yalnızca tarayıcı tarafından destekleniyorsa eklenmelidir. Örneğin, hizmet çalışanları sayesinde, uygulamanızın uygulama kabuğunu ve verilerini önbelleğe alabilirsiniz. Böylece, ağ olmadığında bile uygulama kullanılabilir hale gelir. Hizmet çalışanları desteklenmediğinde çevrimdışı kod çağrılmaz ve kullanıcı temel deneyimden yararlanır. Kademeli geliştirme sağlamak için özellik algılamayı kullanmak ek yükü azaltır ve bu özelliği desteklemeyen eski tarayıcılarda çalışmanızı engeller.

Hizmet çalışanı kaydedin

İlk adım, hizmet çalışanı kaydettirmektir. index.html dosyanıza aşağıdaki kodu ekleyin:

public/index.html

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

Bu kod, hizmet çalışanı API'sinin kullanılabilir olup olmadığını ve kullanılabilirse /service-worker.js hizmeti yüklendikten sonra hizmet çalışanı kaydedilip kaydedilmediğini kontrol eder.

Hizmet çalışanı, bir /scripts/ dizininden değil, kök dizininden sunulduğunu unutmayın. Bu, hizmet çalışanınızın scope değerini ayarlamanın en kolay yoludur. Hizmet çalışanının scope dosyası, hizmet çalışanının hangi dosyaları kontrol ettiğini, başka bir deyişle, hizmet çalışanının isteklere hangi yoldan müdahale edeceğini belirler. Varsayılan scope, hizmet çalışanı dosyasının konumudur ve aşağıdaki tüm dizinleri kapsar. Dolayısıyla, kök dizinde service-worker.js bulunuyorsa hizmet çalışanı bu alandaki tüm web sayfalarından gelen istekleri kontrol eder.

Çevrimdışı önbellek sayfasını önbelleğe al

Öncelikle hizmet çalışanına neleri önbelleğe alacağını bildirmemiz gerekir. Zaten ağ bağlantısı yokken görüntüleyeceğimiz basit bir çevrimdışı sayfa (public/offline.html) oluşturduk.

service-worker.js içinde, '/offline.html', dizisine FILES_TO_CACHE dizisini ekleyin. Nihai sonuç şu şekilde görünmelidir:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

Ardından, hizmet çalışanına çevrimdışı sayfayı önceden önbelleğe almasını bildirmek için install etkinliğine aşağıdaki kodu eklememiz gerekir:

public/service-worker.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

install etkinliğimiz artık caches.open() ile önbelleği açıyor ve bir önbellek adı sağlıyor. Önbellek adı sağlamak, dosyaları sürümlendirmemize veya verileri önbelleğe alınan kaynaklardan ayırmamıza olanak tanır. Böylece, birini kolayca güncelleyebilir ancak diğerini etkilemeziz.

Önbellek açıldıktan sonra, cache.addAll() URL'sini çağırabiliriz. Bu liste URL'lerin listesini alır, sunucudan getirir ve yanıtı önbelleğe ekler. İsteklerden herhangi biri başarısız olursa cache.addAll() öğesinin başarısız olacağını unutmayın. Yani, yükleme adımı başarılı olursa önbelleğin tutarlı bir durumda olacağı garanti edilir. Ancak bir nedenle başarısız olursa servis çalışanı bir sonraki başlatıldığında otomatik olarak tekrar dener.

Geliştirici Araçları Talifi

Hizmet çalışanlarını anlamak ve hata ayıklamak için Geliştirici Araçları'nı nasıl kullanabileceğinize göz atalım. Sayfanızı yeniden yüklemeden önce Geliştirici Araçları'nı açın ve Uygulama panelinde Hizmet Çalışanları bölmesine gidin. Aşağıdaki gibi görünmelidir:

Böyle bir boş sayfa görmeniz, o anda açık olan sayfanın kayıtlı hizmet çalışanı olmadığı anlamına gelir.

Şimdi sayfanızı yeniden yükleyin. Hizmet Çalışanları bölmesi artık aşağıdaki gibi görünecektir:

Buna benzer bilgiler görmeniz, sayfanın çalışan bir hizmet çalışanı olduğu anlamına gelir.

Durum etiketinin yanında bir sayı bulunur (bu örnekte 34251). Hizmet çalışanlarıyla çalışırken bu sayıya dikkat edin. Bu, servis çalışanının güncellenip güncellenmediğini anlamanın kolay bir yoludur.

Eski çevrimdışı sayfaları temizleme

Önbelleğimizdeki eski verileri temizlemek için activate etkinliğini kullanacağız. Bu kod, herhangi bir uygulama kabuğu dosyası değiştiğinde hizmet çalışanınızın önbelleğini güncellemesini sağlar. Bunun işe yaraması için hizmet çalışanı dosyanızın üst kısmındaki CACHE_NAME değişkenini artırmanız gerekir.

activate kodunuza aşağıdaki kodu ekleyin:

public/service-worker.js

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
);

Geliştirici Araçları Talifi

Hizmet Çalışanları bölmesi açıkken sayfayı yenileyin. Yeni hizmet çalışanı yüklü olduğunu ve durum numarasının artırıldığını görürsünüz.

install etkinliği self.skipWaiting() ile, activate etkinliği self.clients.claim() ile bittiği için güncellenen hizmet çalışanı hemen kontrolü kontrol eder. Bunlar olmadan, eski hizmet çalışanı sayfaya açık bir sekme olduğu sürece sayfayı kontrol etmeye devam eder.

Başarısız ağ isteklerini işleme

Son olarak, fetch etkinliklerini ele almamız gerekir. Ağa yedeklenen ağ stratejisini kullanacağız. Hizmet çalışanı önce kaynağı ağdan almayı dener. Bu yöntem işe yaramazsa hizmet çalışanı çevrimdışı sayfayı önbellekten döndürür.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

fetch işleyicinin yalnızca sayfada gezinmeyi işlemesi gerekir. Böylece diğer istekler işleyiciden çıkarılabilir ve tarayıcı tarafından normalde ele alınabilir. Ancak .mode isteği navigate ise öğeyi ağdan almayı denemek için fetch kullanın. Başarısız olursa catch işleyici, önbelleği caches.open(CACHE_NAME) ile açar ve önceden önbelleğe alınmış çevrimdışı sayfayı almak için cache.match('offline.html') kullanır. Sonuç, evt.respondWith() kullanılarak tarayıcıya geri gönderilir.

Geliştirici Araçları Talifi

Her şeyin beklendiği gibi çalıştığından emin olalım. Hizmet Çalışanları bölmesi açıkken sayfayı yenileyin. Yeni hizmet çalışanı yüklü olduğunu ve durum numarasının artırıldığını görürsünüz.

Önbelleğe alınan öğeleri de kontrol edebiliriz. Geliştirici Araçları'nın Uygulama panelinde Önbellek Depolama Alanı bölmesine gidin. Önbellek Depolama Alanı'nı sağ tıklayın, Önbellekleri Yenile'yi seçin ve bölümü genişletin. Sol tarafta, statik önbelleğin adını görürsünüz. Önbelleğe alınan tüm dosyaları görmek için önbellek adını tıklayın.

Şimdi çevrimdışı modu test edelim. Geliştirici Araçları'nın Uygulama panelinde Hizmet Çalışanları bölmesine geri dönün ve Çevrimdışı onay kutusunu işaretleyin. Kontrol ettikten sonra Ağ panel sekmesinin yanında küçük bir sarı uyarı simgesi görürsünüz. Bu simge, çevrimdışı olduğunuzu gösterir.

Sayfanızı yeniden yükleyin, çalışır. Chrome’un çevrimdışı dinozoru yerine çevrimdışı panda'mızı aldık.

Hizmet çalışanlarını test etmeyle ilgili ipuçları

Hizmet çalışanlarının hatalarını ayıklamak zor olabilir. Önbelleğe alınmasının beklendiği durumlarda önbellek güncellenmezse işler daha da kabus haline gelebilir. Tipik bir hizmet çalışanı yaşam döngüsü ile kodunuzdaki bir hata arasında kısa süre içinde canınız sıkılabilir. Ancak bu durumda.

Geliştirici Araçları'nı kullanma

Uygulama panelinin Hizmet Çalışanları bölmesinde, hayatınızı çok daha kolay hale getirecek birkaç onay kutusu vardır.

Çevrimdışı: İşaretlendiğinde çevrimdışı bir deneyimi simüle eder ve isteklerin ağa gitmesini engeller.
Yeniden yüklemede güncelle - İşaretlendiğinde en son hizmet çalışanını alır, yükler ve hemen etkinleştirir.
Ağı atla: İşaretlendiğinde, istekler hizmet çalışanı atlar ve doğrudan ağa gönderilir.

Yeni bir başlangıç yapın

Bazı durumlarda, önbelleğe alınan verileri yüklediğinizi veya verilerin beklediğiniz gibi güncellenmediğini görebilirsiniz. Kayıtlı tüm verileri (localStorage, dizine eklenen veriler, önbelleğe alınan dosyalar) temizlemek ve hizmet çalışanlarını kaldırmak için Uygulama panelindeki Depolama alanını temizle bölmesini kullanın. Dilerseniz gizli pencerede de çalışabilirsiniz.

Ek ipuçları:

Bir hizmet çalışanının kaydı iptal edildikten sonra, kapsayıcı tarayıcı penceresi kapatılana kadar listede listelenmeye devam edebilir.
Uygulamanız için birden fazla pencere açıksa yeni bir hizmet çalışanı, tüm pencereler yeniden yüklenene ve en son hizmet çalışanı olarak güncellenene kadar geçerli olmaz.
Bir hizmet çalışanı kaydının silinmesi, önbelleği temizlemez!
Bir hizmet çalışanı varsa ve yeni bir hizmet çalışanı kayıtlıysa hemen kontrol sağlamadığınız sürece, yeni hizmet çalışanı sayfa yeniden yüklenene kadar kontrolü devralmaz.

Lighthouse ile değişiklikleri doğrulama

Lighthouse'u tekrar çalıştırın ve değişikliklerinizi doğrulayın. Değişikliklerinizi doğrulamadan önce Çevrimdışı onay kutusunun işaretini kaldırmayı unutmayın.

SEO Denetimi

✘ KARARLI: Belgenin bir meta açıklaması vardır.

Progresif Web Uygulaması Denetimi

✨ BAŞARILI OLDU: Geçerli sayfa, 200 çevrimdışı olduğunda yanıt verir.
✨ KARTI: start_url internete bağlı değilken 200 yanıtı verir.
✨ KARTI: Sayfayı ve start_url. içeriğini kontrol eden bir hizmet çalışanı kaydeder
✘ KARARLI: Web uygulaması manifest dosyası, yüklenebilir olma gerekliliklerini karşılar.
✘ KARARLI: Özel başlangıç ekranı için yapılandırılır.
✘ KARARLI: Adres çubuğu tema rengini ayarlar.

Bir dakikanızı ayırıp telefonunuzu uçak moduna alın ve sevdiğiniz uygulamalardan bazılarını çalıştırmayı deneyin. Neredeyse her durumda, oldukça güçlü bir çevrimdışı deneyim sağlarlar. Kullanıcılar uygulamalarından güçlü bir deneyim bekler. Web de farklı olmamalıdır. Progresif Web Uygulamaları temel senaryo olarak çevrimdışı tasarlanmalıdır.

Hizmet çalışanı yaşam döngüsü

Hizmet çalışanının yaşam döngüsü en karmaşık kısımdır. Ne yapmaya çalıştığını ve avantajlarını bilmiyorsanız dövüştüğünü hissedebilir. Ancak, sürecin nasıl işlediğini öğrendikten sonra, web'in ve yerel kalıpların en iyi özelliklerini bir arada kullanarak kullanıcılara sorunsuz ve sade güncellemeler sunabilirsiniz.

`install` etkinlik

Bir hizmet çalışanının aldığı ilk etkinlik install. Çalışan yürütülür bitmez tetiklenir ve hizmet çalışanı başına yalnızca bir kez çağrılır. Hizmet çalışanı komut dosyanızı değiştirirseniz tarayıcı bunu farklı bir hizmet çalışanı olarak kabul eder ve tarayıcı kendi install etkinliğini alır.

install etkinliği genellikle, uygulamanızın çalışması için gereken her şeyi önbelleğe almak üzere kullanılır.

`activate` etkinlik

Hizmet çalışanı her başladığında bir activate etkinliği alır. activate etkinliğinin ana amacı, hizmet çalışanı davranışını yapılandırmak, önceki çalıştırmalardan kalan kaynakları (ör.eski önbellekler) temizlemek ve hizmet çalışanını ağ isteklerini işlemeye hazır hale getirmektir (ör. aşağıda açıklanan fetch etkinliği).

`fetch` etkinlik

Getirme etkinliği, hizmet çalışanının tüm ağ isteklerine müdahale etmesine ve istekleri işlemesine olanak tanır. Kaynağı almak için ağa gidebilir, kendi önbelleğinden alabilir, özel bir yanıt oluşturabilir veya farklı sayıda seçenek sunabilir. Kullanabileceğiniz farklı stratejiler için Çevrimdışı Yemek Kitabı'na göz atın.

Hizmet çalışanını güncelleme

Tarayıcı, her sayfa yüklemesinde hizmet çalışanınızın yeni bir sürümü olup olmadığını kontrol eder. Yeni bir sürüm bulursa yeni sürüm indirilir ve arka planda yüklenir ancak etkinleştirilmez. Hizmet çalışanının yeni sürümü, eski hizmet çalışanı kullanan hiçbir sayfa açılana kadar bekleme durumunda kalır. Eski hizmet çalışanı kullanan tüm pencereler kapatıldığında yeni hizmet çalışanı etkinleşir ve kontrolü elinde tutabilir. Daha fazla ayrıntı için Hizmet Çalışanı Yaşam Döngüsü dokümanının Hizmet çalışanı güncelleme bölümüne bakın.

Doğru önbelleğe alma stratejisini seçme

Doğru önbelleğe alma stratejisini seçmek, önbelleğe almaya çalıştığınız kaynağın türüne ve daha sonra nasıl erişmeniz gerekebileceğine bağlıdır. Hava durumu uygulamamız için, önbelleğe almamız gereken kaynakları iki kategoriye ayıracağız: Önceden önbelleğe almak istediğimiz kaynaklar ve çalışma zamanında önbelleğe alacağımız veriler.

Statik kaynakları önbelleğe alma

Kaynaklarınızı önceliklendirme, kullanıcı bir masaüstü veya mobil uygulama yüklediğinde olana benzer bir kavramdır. Uygulamanın çalışması için gereken önemli kaynaklar, daha sonra bir ağ bağlantısı olsun veya olmasın cihaza yüklenebilir ya da önbelleğe alınır.

Hizmetimiz kurulduğunda uygulamamız çalışırken ihtiyacımız olan her şeyin kullanıcının cihazında depolanması için statik kaynaklarımızın tümünü önceden önbelleğe alırız. Uygulamamızın ışık hızında yüklenmesini sağlamak için önbellek öncelikli stratejisini kullanırız. Kaynakları almak için ağa gitmek yerine yerel önbellekten alırlar; yalnızca kullanılabilir değilse ağı ağdan almayı deneriz.

Yerel önbellekten veri almak, ağ değişkenliğini ortadan kaldırır. Kullanıcının bulunduğu ağ türü (Kablosuz, 5G, 3G, hatta 2G) ne olursa olsun çalıştırmamız gereken temel kaynaklar neredeyse anında kullanıma sunuluyor.

Uygulama verilerini önbelleğe alma

Eskiden yeniden doğrula stratejisi, belirli veri türleri için idealdir ve uygulamamız için iyi bir şekilde çalışır. Veriler mümkün olan en kısa sürede ekranda gösterilir, ardından ağ en son verileri döndürdüğünde güncellenir. Yeniden doğrulama, bir kez önbellek ve diğer ağ için olmak üzere iki eşzamansız isteği başlatmamız gerektiği anlamına gelir.

Normal koşullarda, önbelleğe alınan veriler, uygulamaya kullanabileceği en son verileri sağlamak üzere neredeyse anında döndürülür. Ağ isteği döndüğünde uygulama, ağdaki en son veriler kullanılarak güncellenir.

Uygulamamızda bu işlem, ağdan daha iyi bir deneyim sağlar ve kullanıcının ekranda bir şey görmek için ağ isteğinin zaman aşımına uğramasını beklemek zorunda kalmadığından önbellek stratejisine geçer. Başlangıçta eski verileri görebilirler, ancak ağ isteği geri döndüğünde uygulama en son verilerle güncellenir.

Uygulama mantığını güncelleme

Daha önce de belirtildiği gibi, uygulamanın önbelleği ve ağa yönelik iki eşzamansız isteği başlatması gerekiyor. Uygulama, önbelleğe erişmek ve en son verileri almak için window içinde bulunan caches nesnesini kullanır. Bu, kademeli bir geliştirme örneğidir. Çünkü caches nesnesi tüm tarayıcılarda kullanılamayabilir. Bu çözüm sunulmuyorsa ağ isteği çalışmaya devam edecektir.

caches nesnesinin global window nesnesinde kullanılabilir olup olmadığını kontrol etmek için getForecastFromCache() işlevini güncelleyin. Bu işlev kullanılabilir durumdaysa verileri önbellekten isteyin.

public/scripts/app.js

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
  return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });

Ardından, updateData() değerini değiştirerek iki çağrı yapmasını sağlıyoruz. Bu değişikliklerden biri, tahmini ağdan almak için getForecastFromNetwork(), diğeri de önbelleğe alınmış en son tahmini almak için getForecastFromCache() şeklindedir.

public/scripts/app.js

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
    .then((forecast) => {
      renderForecast(card, forecast);
    });

Hava durumu uygulamamız şu anda biri önbellekten, diğeri fetch üzerinden olmak üzere iki eşzamansız veri isteğinde bulunuyor. Önbellekte veriler varsa bunlar çok hızlı bir şekilde döndürülür ve onlarca milisaniye içinde oluşturulur. Daha sonra, fetch yanıt verdiğinde kart doğrudan hava durumu API'sinden en yeni verilerle güncellenir.

Hem önbellek isteğinin hem de fetch isteğinin, tahmin kartını güncellemek için bir çağrıyla nasıl sonlandırıldığına dikkat edin. Uygulama, en son verilerin gösterilip gösterilmediğini nasıl biliyor? Bu işlem, renderForecast() tarafından sağlanan kodda ele alınır:

public/scripts/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

Uygulama, bir kart her güncellendiğinde verinin zaman damgasını karttaki gizli bir özellikte saklar. Uygulama, sadece kartta zaten bulunan zaman damgası, işleve iletilen verilerden daha yeniyse doğru olmaz.

Uygulama kaynaklarımızı önceden önbelleğe alma

Uygulama verilerimizi uygulama kabuğundan ayırt edebilmemiz için hizmet çalışanı olarak bir DATA_CACHE_NAME ekleyelim. Uygulama kabuğu güncellenip eski önbellekler tamamen silindiğinde veriler el değmeden, hızlı yüklenmeye hazır halde kalır. Gelecekte veri biçiminiz değişirse bu durumu gidermek ve uygulama kabuğunun ve içeriğin senkronize kalmasını sağlamak için bir yönteme ihtiyacınız olacağını unutmayın.

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

CACHE_NAME öğesini güncellemeyi de unutmayın. Tüm statik kaynaklarımızı da değiştireceğiz.

Uygulamamızın çevrimdışı çalışabilmesi için ihtiyaç duyduğu tüm kaynakları önceden önbelleğe almamız gerekiyor. Bu yöntem de performansımıza yardımcı olacaktır. Uygulama, tüm kaynakları ağdan almak zorunda kalmadan, tüm bağlantıları yerel önbellekten yükleyerek ağ kararsızlığını ortadan kaldırabilir.

FILES_TO_CACHE dizisini dosya listesiyle güncelleyin:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/scripts/install.js',
  '/scripts/luxon-1.11.4.js',
  '/styles/inline.css',
  '/images/add.svg',
  '/images/clear-day.svg',
  '/images/clear-night.svg',
  '/images/cloudy.svg',
  '/images/fog.svg',
  '/images/hail.svg',
  '/images/install.svg',
  '/images/partly-cloudy-day.svg',
  '/images/partly-cloudy-night.svg',
  '/images/rain.svg',
  '/images/refresh.svg',
  '/images/sleet.svg',
  '/images/snow.svg',
  '/images/thunderstorm.svg',
  '/images/tornado.svg',
  '/images/wind.svg',
];

Önbelleğe alınacak dosyaların listesini manuel olarak oluşturduğumuzdan, bir dosyayı her güncellediğimizde CACHE_NAME güncellememiz gerekiyor. offline.html uygulaması artık çevrimdışı çalışmak için gereken tüm kaynaklara sahip olduğu ve çevrimdışı sayfayı bir daha göstermediği için önbelleğe alınmış dosyalar listemizden kaldırabildik.

Dikkat: Bu örnekte, kendi hizmet çalışanımızı manuel olarak kullanıma sunduk. Statik kaynakların herhangi birini her güncellediğimizde, hizmet çalışanını yeniden döndürmemiz ve önbelleği güncellememiz gerekir, aksi takdirde eski içerik sunulur. Ayrıca, bir dosya değiştiğinde önbelleğin tamamı geçersiz olur ve dosyanın yeniden indirilmesi gerekir. Bu, basit bir tek karakter yazım hatasının düzeltilmesinin önbelleği geçersiz kılacağı ve her şeyin tam olarak verimli bir şekilde indirilmemesi gerektiğini anlamına gelir. Workbox bunu sorunsuz bir şekilde yapar ve derleme sürecinize entegre ederek yalnızca değiştirilen dosyalar güncellenir. Böylece kullanıcılar için bant genişliğinden tasarruf edilir ve bakımı daha kolay hale getirilir.

Etkinlik etkinleştirme işleyicisini güncelleme

activate etkinliğimizin verilerimizi yanlışlıkla silmemesini sağlamak için service-worker.js etkinliğinin activate etkinliğinde if (key !== CACHE_NAME) { yerine şu değeri girin:

public/service-worker.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

Getirme etkinliği işleyiciyi güncelleme

Daha sonra kolayca erişebilmek için hizmet çalışanını, hava durumu API'sine müdahaleye müdahale edecek şekilde değiştirmemiz ve yanıtlarını önbellekte depolamamız gerekiyor. Eskiden yeniden doğrulama stratejisinde, ağ yanıtının "gerçeğin kaynağı" olmasını bekliyoruz. Bize her zaman en güncel bilgileri sağlayın. Ağımız başarısız olursa sorun yaşanabilir ve uygulamamızda önbelleğe alınmış en son verileri zaten almış oluruz.

Data API'ye yapılan istekleri diğer isteklerden ayrı olarak işlemek için fetch etkinlik işleyiciyi güncelleyin.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
  console.log('[Service Worker] Fetch (data)', evt.request.url);
  evt.respondWith(
      caches.open(DATA_CACHE_NAME).then((cache) => {
        return fetch(evt.request)
            .then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      }));
  return;
}
evt.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request)
          .then((response) => {
            return response || fetch(evt.request);
          });
    })
);

Kod, isteğe müdahale ederek hava durumu tahmini olup olmadığını kontrol eder. Bu istek varsa fetch özelliğini kullanarak istekte bulunun. Yanıt döndürüldükten sonra önbelleği açın, yanıtı klonlayın, önbellekte depolayın ve yanıtı orijinal istekte bulunan kişiye geri gönderin.

Hizmet çalışanlarımızın sadece gezinme işlemlerini değil, tüm istekleri (resimler, komut dosyaları, CSS dosyaları vb.) işlemesini istediğimiz için evt.request.mode !== 'navigate' kontrolünü kaldırmamız gerekiyor. Bu check-in'i bırakırsak servis çalışanı önbelleğinden yalnızca HTML sunulur. Ağdan başka her şey istenir.

Deneyin

Uygulama şu anda tamamen çalışır durumda olmalıdır. En son hizmet çalışanı yüklü olduğundan emin olmak için sayfayı yenileyin. Sonra birkaç şehir kaydedin ve güncel hava durumu verilerini almak için uygulamadaki yenileme düğmesine basın.

Ardından Geliştirici Araçları'nın Uygulama panelinde Önbellek Depolama Alanı bölmesine gidin. Bölümü genişlettiğinizde statik önbelleğin ve veri önbelleğinin adını sol tarafta görürsünüz. Veri önbelleğini açtığınızda her şehir için depolanan veriler gösterilir.

Hizmet Çalışanları bölmesine geçin ve Çevrimdışı onay kutusunu işaretleyin. Sayfayı yeniden yüklemeyi deneyin, ardından çevrimdışı olup sayfayı yeniden yükleyin.

Hızlı bir ağdaysanız ve hava durumu tahmini verilerinin yavaş bir bağlantıda nasıl güncellendiğini görmek istiyorsanız server.js içindeki FORECAST_DELAY özelliğini 5000 olarak ayarlayın. Prediction API'ye yapılan tüm istekler 5.000 ms gecikmelidir.

Lighthouse ile değişiklikleri doğrulama

Lighthouse'u tekrar çalıştırmak da iyi bir fikirdir.

SEO Denetimi

✘ KARARLI: Belgenin bir meta açıklaması vardır.

Progresif Web Uygulaması Denetimi

✨ BAŞARILI OLDU: Geçerli sayfa, 200 çevrimdışı olduğunda yanıt verir.
✨ KARTI: start_url internete bağlı değilken 200 yanıtı verir.
✨ KARTI: Sayfayı ve start_url. içeriğini kontrol eden bir hizmet çalışanı kaydeder
✘ KARARLI: Web uygulaması manifest dosyası, yüklenebilir olma gerekliliklerini karşılar.
✘ KARARLI: Özel başlangıç ekranı için yapılandırılır.
✘ KARARLI: Adres çubuğu tema rengini ayarlar.

Bir Progresif Web Uygulaması yüklendiğinde, diğer tüm yüklü uygulamalar gibi görünür ve davranır. Uygulama, diğer uygulamaların açıldığı yerden kullanıma sunuluyor. Adres çubuğu veya başka bir tarayıcı kullanıcı arayüzü olmadan bir uygulamada çalışır. Diğer tüm yüklü uygulamalarda olduğu gibi bu da görev değiştiricide üst düzey bir uygulamadır.

Chrome'da bir Progresif Web Uygulaması (üç nokta içerik menüsü üzerinden) yüklenebilir veya kullanıcıya uygulamanızı yüklemesini isteyen bir düğme ya da başka bir kullanıcı arayüzü bileşeni sağlayabilirsiniz.

Lighthouse ile denetim

Kullanıcıların Progresif Web Uygulamanızı yükleyebilmesi için uygulamanın belirli ölçütleri karşılaması gerekir. Kontrol etmenin en kolay yolu Lighthouse'u kullanmak ve yüklenebilir ölçütleri karşıladığından emin olmaktır.

Bu codelab'i kullandıysanız PWA'nız zaten bu ölçütleri karşılamalıdır.

index.html'ye install.js'yi ekleme

Önce install.js dosyasını index.html dosyamıza ekleyelim.

public/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

`beforeinstallprompt` etkinliğini dinleyin

Ana ekrana ekle ölçütleri karşılanırsa Chrome, uygulamanızın 'yüklenebilir olduğunu belirtmek için kullanabileceğiniz bir beforeinstallprompt etkinliği tetikler ve ardından kullanıcıdan uygulamayı yüklemesini ister. beforeinstallprompt etkinliğini dinlemek için aşağıdaki kodu ekleyin:

public/scripts/install.js

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Etkinliği kaydet ve yükleme düğmesini göster

saveBeforeInstallPromptEvent işlevimizde, beforeinstallprompt etkinliğine bir referans kaydedebiliriz. Böylece, daha sonra etkinlikte prompt() çağırabilir ve kullanıcı arayüzümizi yükleme düğmesini gösterecek şekilde güncelleyebiliriz.

public/scripts/install.js

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

İstemi göster ve düğmeyi gizle

Kullanıcı, yükleme düğmesini tıkladığında kayıtlı beforeinstallprompt etkinliğinde .prompt() işlevini çağırmamız gerekir. Kaydedilen her etkinlikte .prompt() yalnızca bir kez çağrılabileceğinden yükleme düğmesini de gizlememiz gerekiyor.

public/scripts/install.js

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

.prompt() numarasını aradığınızda, kullanıcıya kalıcı bir iletişim kutusu göstererek uygulamanızı ana ekranına eklemesi istenir.

Sonuçları günlüğe kaydedin

Kayıtlı beforeinstallprompt etkinliğinin userChoice özelliği tarafından döndürülen sözü dinleyerek kullanıcının yükleme iletişim kutusuna nasıl yanıt verdiğini görebilirsiniz. Söz, istem gösterildikten ve kullanıcı buna yanıt verdikten sonra outcome özelliğine sahip bir nesne döndürür.

public/scripts/install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

userChoice hakkında bir yorum: Beklediğiniz özellik, mülkü bir özellik olarak tanımlar, beklediğiniz bir işlev değildir.

Tüm yükleme etkinliklerini günlüğe kaydet

Uygulamanızı yüklemek için eklediğiniz herhangi bir kullanıcı arayüzüne ek olarak, kullanıcılar PWA'nızı başka yöntemler kullanarak da yükleyebilir (örneğin, Chrome'un üç nokta menüsü). Bu etkinlikleri izlemek için uygulama tarafından yüklenen etkinliği dinleyin.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

Ardından, logAppInstalled işlevini güncellememiz gerekecek. Bu codelab için yalnızca console.log kodunu kullanacağız ancak bir üretim uygulamasında büyük olasılıkla bunu analiz yazılımınızla birlikte etkinlik olarak günlüğe kaydetmek istersiniz.

public/scripts/install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

Hizmet çalışanını güncelleme

Önbelleğe alınmış dosyalarda değişiklik yaptığınız için service-worker.js dosyanızdaki CACHE_NAME dosyasını güncellemeyi unutmayın. Geliştirici Araçları'ndaki Uygulama panelinin Hizmet Çalışanları bölmesinde Ağ için atlama onay kutusunun etkinleştirilmesi geliştirme sırasında çalışır, ancak gerçek dünyada yardımcı olmaz.

Deneyin

Yükleme adımımızın nasıl ilerlediğini görelim. Güvenliği sağlamak için Geliştirici Araçları'nın Uygulama panelindeki Site verilerini temizle düğmesini kullanarak her şeyi temizleyin ve sıfırdan başladığımızdan emin olun. Uygulamayı daha önce yüklediyseniz yüklemeyi kaldırdığınızdan yükleme simgesi tekrar görünmez.

Yükle düğmesinin görünür olduğunu doğrulama

Öncelikle yükleme simgemizin düzgün şekilde göründüğünü doğrulayın. Bunu hem masaüstü hem de mobil cihazlarda denediğinizden emin olun.

URL'yi yeni bir Chrome sekmesinde açın.
Chrome'un üç nokta menüsünü (adres çubuğunun yanında) açın.
▢ Menüde "Hava Durumunu Yükle..." seçeneğini gördüğünüzü doğrulayın.
Sağ üst köşedeki yenileme düğmesini kullanarak kullanıcı etkileşimi bulgularını karşıladığımızdan emin olmak için hava durumu verilerini yenileyin.
▢ Uygulama başlığının yükleme simgesinin görünür durumda olduğunu doğrulayın.

Yükleme düğmesinin çalıştığını doğrulama

Şimdi her şeyin düzgün şekilde yüklendiğinden ve etkinliklerimizin düzgün bir şekilde tetiklendiğinden emin olalım. Bunu masaüstünden veya mobil cihazdan yapabilirsiniz. Bunu mobil cihazda test etmek istiyorsanız konsolda nelerin günlüğe kaydedildiğini görebilmek için uzaktan hata ayıklama kullandığınızdan emin olun.

Chrome'u açın ve yeni bir tarayıcı sekmesinde Hava Durumu PWA'nıza gidin.
Geliştirici Araçları'nı açın ve Konsol paneline geçin.
Sağ üst köşedeki yükle düğmesini tıklayın.
▢ Yükleme düğmesinin kaybolduğunu doğrulayın
▢ Yükleme iletişim kutusunun gösterildiğini doğrulayın.
İptal'i tıklayın.
▢ &&tt;Kullanıcı A2HS istemini kapattı" konsolun çıkışında gösterilsin.
▢ Yükleme düğmesinin yeniden göründüğünü doğrulayın.
Yükle düğmesini tekrar tıklayın, ardından kalıcı iletişim kutusunda yükle düğmesini tıklayın.
▢ "Çıkışta A2HS istemini kabul etti&#22 ifadesini konsol çıkışında gösterin.
▢ "Hava Durumu Uygulaması yüklendi&#25sini "konsol"da göster.
▢ Hava durumu uygulamasının genellikle uygulamaları bulduğunuz yere eklendiğini doğrulayın.
Hava Durumu PWA'sını başlatın.
▢ Uygulamanın, masaüstündeki bir uygulama penceresinde veya mobil cihazdaki tam ekranda bağımsız bir uygulama olarak açıldığını doğrulayın.

iOS yüklemenin düzgün şekilde çalıştığını doğrulama

iOS'teki davranışları da kontrol edelim. iOS cihazınız varsa onu kullanabilirsiniz. Mac kullanıyorsanız Xcode ile kullanılabilen iOS Simülatörü'nü de deneyebilirsiniz.

Safari'yi açın ve yeni bir tarayıcı sekmesinde Hava Durumu PWA'nıza gidin.
Paylaş düğmesini tıklayın.
Sağa kaydırıp Ana Ekrana Ekle düğmesini tıklayın.
▢ başlığın, URL'nin ve simgenin doğru olduğundan emin olun.
Ekle'yi tıklayın.
▢ Uygulama simgesinin ana ekrana eklendiğini doğrulayın.
Hava durumu PWA'yı ana ekrandan başlatın.
▢ Uygulamanın tam ekranı başlattığını doğrulayın.

Bonus: Uygulamanızın ana ekrandan başlatılıp başlatılmadığını algılama

display-mode medya sorgusu, uygulamanın nasıl başlatıldığına bağlı olarak stilleri uygulamayı veya JavaScript ile nasıl başlatıldığını belirlemeyi mümkün kılar.

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Bağımsız olarak çalışıp çalışmadığını görmek için JavaScript'te display-mode medya sorgusunu da kontrol edebilirsiniz.

Bonus: PWA'nızı kaldırma

Uygulama zaten yüklüyse beforeinstallevent tetiklenmediğini unutmayın. Bu nedenle, geliştirme sırasında her şeyin beklendiği gibi çalıştığından emin olmak için uygulamanızı birkaç kez yükleyip kaldırmayı düşünebilirsiniz.

Android

Android'de PWA'lar, diğer yüklü uygulamalarla aynı şekilde kaldırılır.

Uygulama çekmecesini açın.
Hava durumu simgesini bulmak için aşağı kaydırın.
Uygulama simgesini ekranın üst kısmına sürükleyin.
Kaldır'ı seçin.

ChromeOS

ChromeOS'te PWA'lar başlatıcının arama kutusundan kolayca kaldırılır.

Başlatıcıyı açın.
Arama kutusuna "Hava Durumu" yazın. Hava Durumu PWA'nız sonuçlarda görünecektir.
Hava Durumu PWA'sını sağ tıklayın (alt tıklama).
Chrome'dan kaldır... seçeneğini tıklayın.

macOS ve Windows

Mac ve Windows'da PWA'lar Chrome üzerinden kaldırılabilir:

Yeni bir tarayıcı sekmesinde chrome://apps sayfasını açın.
Hava Durumu PWA'sını sağ tıklayın (alt tıklama).
Chrome'dan kaldır... seçeneğini tıklayın.

Ayrıca, yüklenen PWA'yı açıp sağ üst köşedeki üç nokta içerik menüsünü tıklayıp "Hava Durumu PWA'sını Kaldır..." öğesini seçebilirsiniz.

Tebrikler, ilk Progresif Web Uygulamanızı başarıyla oluşturdunuz.

Yüklenmesi için bir web uygulaması manifest dosyası eklediniz ve PWA'nızın her zaman hızlı ve güvenilir olması için bir hizmet çalışanı eklediniz. Bir uygulamayı denetlemek için Geliştirici Araçları'nı nasıl kullanacağınızı ve bu uygulamanın kullanıcı deneyiminizi iyileştirmenize nasıl yardımcı olabileceğini öğrendiniz.

Artık herhangi bir web uygulamasını Progresif Web Uygulaması'na dönüştürmek için gereken önemli adımları biliyorsunuz.

Sırada ne var?

Bu codelab'lerden bazılarına göz atın...

İlk Progresif Web Uygulamanız Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Web uygulaması, Progresif Web Uygulaması nedir?

Hızlı ve Güvenilir

Yüklenebilir

Mobil ve Masaüstü

Geliştireceğiniz uygulama

Neler öğreneceksiniz?

Gerekenler

Koyu Sky API için anahtar alın

API anahtarınızın düzgün şekilde çalıştığını doğrulama

Kodu alın

Kesinlikle önerilir: Depoyu içe aktarmak için Glitch'i kullanın

Alternatif: Kodu indirin ve yerel olarak çalışın

Başlangıç noktamız ne?

Lighthouse ile denetleme

Lighthouse'u çalıştıralım

Progresif Web Uygulaması Denetimi

Web uygulaması manifest dosyasını oluşturma

Web uygulaması manifest dosyasına bağlantı ekleme

Geliştirici Araçları Talifi

iOS meta etiketleri &amp simgesi ekleme

Bonus: Kolay Lighthouse düzeltmeleri

Meta açıklamayı ayarlama

Adres çubuğu tema rengini ayarlama

Lighthouse ile değişiklikleri doğrulama

Kurtaran hizmet çalışanları

Hizmet çalışanı kaydedin

Çevrimdışı önbellek sayfasını önbelleğe al

Geliştirici Araçları Talifi

Eski çevrimdışı sayfaları temizleme

Geliştirici Araçları Talifi

Başarısız ağ isteklerini işleme

Geliştirici Araçları Talifi

Hizmet çalışanlarını test etmeyle ilgili ipuçları

Geliştirici Araçları'nı kullanma

Yeni bir başlangıç yapın

Lighthouse ile değişiklikleri doğrulama

Hizmet çalışanı yaşam döngüsü

install etkinlik

activate etkinlik

fetch etkinlik

Hizmet çalışanını güncelleme

Doğru önbelleğe alma stratejisini seçme

Statik kaynakları önbelleğe alma

Uygulama verilerini önbelleğe alma

Uygulama mantığını güncelleme

Uygulama kaynaklarımızı önceden önbelleğe alma

Etkinlik etkinleştirme işleyicisini güncelleme

public/service-worker.js

Getirme etkinliği işleyiciyi güncelleme

Deneyin

Lighthouse ile değişiklikleri doğrulama

Lighthouse ile denetim

index.html'ye install.js'yi ekleme

beforeinstallprompt etkinliğini dinleyin

Etkinliği kaydet ve yükleme düğmesini göster

İstemi göster ve düğmeyi gizle

Sonuçları günlüğe kaydedin

Tüm yükleme etkinliklerini günlüğe kaydet

Hizmet çalışanını güncelleme

Deneyin

Yükle düğmesinin görünür olduğunu doğrulama

Yükleme düğmesinin çalıştığını doğrulama

iOS yüklemenin düzgün şekilde çalıştığını doğrulama

Bonus: Uygulamanızın ana ekrandan başlatılıp başlatılmadığını algılama

Bonus: PWA'nızı kaldırma

Android

ChromeOS

macOS ve Windows

Sırada ne var?

Daha fazla bilgi

Referans dokümanlar

İlk Progresif Web Uygulamanız

`install` etkinlik

`activate` etkinlik

`fetch` etkinlik

`beforeinstallprompt` etkinliğini dinleyin