AMP sayfalarınızdan PWA'nızı önceden yükleme

Important: this documentation is not applicable to your currently selected format stories!

Web sitenize giriş noktasını bir AMP sayfası yapmak, daha sonra PWA'yı arka planda hazırlamak ve yolculuğun devamında ona geçmek iyi bir stratejidir:

Tüm içerik "yaprak" sayfaları (özet sayfalar değil, belirli bir içerik içerenler), neredeyse anında yükleme deneyimi için AMP sayfaları olarak yayınlanır.
Bu AMP'ler, kullanıcı içerikle etkileşime girerken önbelleği ve PWA kabuğunu hazırlamak için AMP'nin amp-install-serviceworker özel öğesini kullanır.
Kullanıcı web sitenizdeki başka bir bağlantıya tıkladığında (örneğin, daha çok uygulama tarzı bir deneyim için alttaki eylem çağrısı), hizmet çalışanı isteğe müdahale eder, sayfanın sorumluluğunu üstlenir ve bunun yerine PWA kabuğunu yükler.

Bu geliştirici örüntüsünü neden ve nasıl kullanacağınızı öğrenmek için okumaya devam edin.

PWA'ya bağlanırken kullanıcı yolculuğunu geliştirme

İlk kullanıcı edinimi için AMP

AMP, kullanıcılarınızın bir arama motoru, bir arkadaşın gönderdiği paylaşılan bağlantı veya başka bir sitedeki bağlantı yoluyla organik olarak bulduğu yaprak sayfalar adı verilen sayfalar için ideal bir çözümdür. AMP'nin özel önceden oluşturması sayesinde AMP sayfaları oldukça hızlı yüklenir, bu daha az oturumu terk etme anlamına gelir (yakın zamanlı DoubleClick çalışması, 3 saniyeden sonra kullanıcıların %53'ünden fazlasının oturumu terk edeceğini gösteriyor).

Zengin interaktiflik ve etkileşim

Aşamalı Web Uygulamaları, diğer yandan, daha fazla interaktifliğe ve etkileşime izin verir ancak bir AMP sayfasının anında ilk yüklenme özelliklerine sahip değildir. Merkezlerinde Hizmet Çalışanı adı verilen ve sayfanız için tüm varlık türlerini önbelleğe almaya izin veren bir istemci tarafı proxy teknolojisi vardır ancak bahsi geçen Hizmet Çalışanı, yalnızca ilk yüklemeden sonra etkinleşir.

The pros and cons of AMP vs. PWA.

`amp-install-serviceworker` ile PWA'nızı hazırlama

AMP, Aşamalı Web Uygulamanızın Hizmet Çalışanını bir AMP sayfasından yükleyebilir - evet, bu AMP sayfası bir AMP Önbelleğinden sunulsa bile bunu yapabilir! Doğru şekilde yapılırsa, AMP sayfasına ilk sıçramaya benzer şekilde, PWA'nıza (AMP sayfalarınızdan birinden) giden bir bağlantı neredeyse anında olmuş gibi hissedilecektir.

İPUCU – Henüz Hizmet Çalışanına aşina değilseniz, Jake Archibald’ın Udacity kursunu almanızı kesinlikle tavsiye ediyorum.

Öncelikle, sayfanızın <head> bölümündeki betik yoluyla bileşeni ekleyerek amp-install-serviceworker kullanarak tüm AMP Sayfanızda hizmet çalışanını yükleyin.

<script async custom-element="amp-install-serviceworker"
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

Daha sonra aşağıdaki kodu <body> öğenizin içinde bir yere ekleyin (gerçek Hizmet Çalışanınıza yönlendirmek için değiştirin):

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

Son olarak, hizmet çalışanının kurulum adımında PWA'nın ihtiyaç duyacağı kaynakları önbelleğe alın:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];

self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});

İPUCU – Hizmet Çalışanını kullanmanın daha kolay yolları vardır. Hizmet Çalışanı yardımcı kütüphanelerine bir göz atın.

AMP Sayfasındaki tüm bağlantıların PWA'ya gitmesini sağlama

Muhtemelen AMP sayfalarınızdaki çoğu bağlantı, daha fazla içerik sayfasına yönlendirme yapar. Sonraki bağlantı tıklamalarının Aşamalı Web Uygulamasında bir "yükseltmeye" neden olmasını sağlamak için AMP'yi kullanma biçiminize bağlı olmak üzere iki strateji vardır:

1. Standart sayfalarınızı AMP sayfalarıyla eşlerseniz

Bu durumda standart bir web siteniz (AMP olmayan) vardır ve bu standart sayfalara bağlı AMP sayfaları oluşturursunuz. Bu, şu anda AMP'nin en yaygın kullanım şeklidir ve AMP sayfalarınızdaki bağlantıların büyük olasılıkla sitenizin standart sürümüne bağlanacağı anlamına gelir. İyi haber: Standart siteniz PWA'nızsa, hazırsınız demektir.

2. Standart siteniz AMP ise

Bu durumda standart sayfalarınız sizin AMP sayfalarınızdır: Tüm web sitenizi AMP ile oluşturuyorsunuz ve AMP'yi bir kütüphane olarak kullanıyorsunuz (eğlenceli bilgi: bunu okuduğunuz site bu şekilde oluşturulmuştur). Bu senaryoda, AMP sayfalarınızdaki çoğu bağlantı diğer AMP sayfalarına yönlendirir.

Artık PWA'nızı your-domain.com/pwa gibi ayrı bir veri yoluna koyabilir ve bir kullanıcı AMP Sayfasındaki bir bağlantıya tıkladığında tarayıcı gezinmesine müdahale etmek için çalışan Hizmet Çalışanını kullanabilirsiniz:

self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate') {
event.respondWith(fetch('/pwa'));

      // Immediately start downloading the actual resource.
      fetch(event.request.url);
    }

});

Bu teknikle ilgili özellikle ilginç olan şey, artık AMP'den PWA'ya gitmek için aşamalı iyileştirme kullanmanızdır. Ancak, bu durum, henüz hizmet çalışanlarını desteklemeyen tarayıcıların PWA'ya asla gitmeden AMP'den AMP'ye sıçrayacakları anlamına da gelir.

AMP bunu kabuk URL yeniden yazımı adlı bir şeyle çözer. amp-install-serviceworker etiketine yedek bir URL örüntüsü ekleyerek, AMP'ye, hiçbir hizmet çalışanı desteği tespit edilmezse, başka bir eski kabuk bağlantısına gitmek için verili bir sayfadaki tüm bağlantıları yeniden yazma talimatı verirsiniz.

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay"
      data-no-service-worker-fallback-url-match=".*"
      data-no-service-worker-fallback-shell-url="https://www.your-domain.com/pwa">
</amp-install-serviceworker>

Bu öznitelikler eklendiğinde, AMP'deki sonraki tüm tıklamalar herhangi bir hizmet çalışanına bakılmaksızın PWA'nıza gidecektir.

OKUMAYA DEVAM EDİN – Şimdiden epey ilerlediniz. Var olan AMP sayfalarınızı yeniden kullanarak kendi PWA'nızı yapmaya ne dersiniz? Şu şekilde yapabilirsiniz.

Written by @pbakaus