AMP sitenizi PWA'ya dönüştürme

Aşamalı Web Uygulamaları hizmet çalışanlarının, çeşitli ağ güçlerinde zengin çevrimdışı deneyimler ve tutarlı kullanıcı deneyimleri sağlama gücünden yararlanır. PWA, tarayıcı içindeki kaynakları önbelleğe alarak kullanıcıları etkileşim içinde tutmak ve bilgilendirmek için veriler, varlıklar ve çevrimdışı sayfalar sunabilir.

Bu öğretici, bir AMP sitesini bir Web Sunumu ve AMP Hizmet Çalışanı tarafından desteklenen bir Hizmet Çalışanı ekleyerek çevrimdışı özelliklere sahip, kurulabilir bir PWA'ya nasıl dönüştüreceğinizi öğretecektir.

Başlangıç kodunu indirme ve çalıştırma

Başlangıç kodunu buradan indirin.

Web sitesini önizlemek için yerel bir web sunucusu kullanın.

İPUCU - Hızlı bir web sunucusu için python -m SimpleHTTPServer'ı çalıştırın.

Mobile Music Magic festivali Lyrical Lightning'in açılış sayfasını görüntüleyebilmelisiniz. Ana sayfada programı ve grupların hangi sahnede olduğunu görmek için bir bağlantı vardır.

Sitemizin kullanıcıları, programa erişmek istediklerinde muhtemelen kesintili ağ bağlantısına sahip olacaklar. Bu durum, siteyi kullanıcımızın ana ekranına yüklenebilen bir PWA'ya dönüştürmek için harika bir aday yapar ve çevrimdışıyken bile tüm kritik işlevleri sunar.

Web Uygulama Sunumu Oluşturma

Web uygulama sunumu, tarayıcıya web uygulamanız hakkında veri sunan ve kullanıcının mobil cihazına veya masaüstüne "yüklendiğinde" nasıl davranması gerektiğini söyleyen basit bir JSON dosyasıdır. Birçok tarayıcı Ana Ekrana Ekle istemini göstermek için bir web sunumuna sahip olmayı gerekli kılar.

Aşağıdaki kodla bilgi havuzunuza manifest.json adlı bir dosya ekleyin:

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

AMP Hizmet Çalışanı ekleme

Hizmet çalışanı, tarayıcınızın bir web sayfasından ayrı olarak arka planda çalıştırdığı, performansı iyileştirmek ve çevrimdışı işlevler sağlamak için istekleri önbelleğe alarak tarayıcı özelliklerini genişleten bir betiktir. Sıfırdan bir hizmet çalışanı oluşturmak mümkündür ancak bu, çok zaman alır. Workbox gibi kütüphaneler bunun için yardımcı olur, ancak AMP bir adım ileri giderek AMP Hizmet Çalışanı sunar; AMP bu şekilde AMP Betiklerinin, varlıkların ve belgelerin önbelleğe alınması ve gezinme önyüklemesi gibi ortak en iyi uygulamaların ayarlanması dahil birçok adımı otomatikleştirir.

AMP Hizmet Çalışanı AMP betiklerini ve belgeleri kurulumdan sonra kullanıcı istedikçe otomatik olarak önbelleğe alır. Temel AMP Hizmet Çalışanını ekleyerek işe başlayacağız.

Hizmet çalışanı dosyası oluşturma

sw.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();

Yalnızca iki satır kodla, bu işlem, AMP Hizmet Çalışanını Hizmet Çalışanınıza aktarır ve onu başlatır.

Hizmet çalışanınızı AMP sayfalarınıza otomatik olarak yükleme

AMP web siteleri, kullanıcı içeriğinizin keyfini çıkarırken hizmet çalışanını tarayıcının arka planında yüklemek için <amp-install-serviceworker> bileşenini kullanır.

Gerekli betik etiketini index.html başlığına ve <amp-install-serviceworker> öğesini <body> içine yerleştirin:

…

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

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

Önemli – Sitenizin tüm içeriğini önbelleğe alabilmesi için hizmet çalışanı kök dizinden (/sw.js) sunulmalıdır.

<amp-install-serviceworker> , bir iframe oluşturarak ve data-iframe-src dosyasını çalıştırarak hizmet çalışanını yükler. install-sw.html dosyasını oluşturun ve aşağıdaki kodu ekleyin:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

iframe, AMP Hizmet Çalışanı dosyasını tarayıcıya kaydeder.

Önbelleğe alınanları özelleştirme

AMP Hizmet Çalışanı, uygulamanızın ihtiyaçlarına göre optimize etmek için yapılandırabileceğiniz isteğe bağlı alanlara izin verirken kurulu avantajlarla birlikte gelir.

Müzik festivali uygulamamız görüntü varlıklarımızı önbelleğe alacak, sanatçı sıralaması bağlantısını önceden getirecek ve bir çevrimdışı sayfa belirleyecektir.

Önbellek Varlıkları

AMP Hizmet Çalışanını görüntüler, videolar ve yazı tipleri gibi varlıkları önbelleğe alacak şekilde yapılandırabilirsiniz. Biz onu arka plan resmimizi ve AMP logomuzu önbelleğe almak için kullanacağız. sw.js dosyasını açın ve aşağıdaki koda güncelleyin:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

Önbelleğe alma stratejisinin önbellek öncelikli olmasını istedik. Bu, uygulamanın ağdan herhangi bir şey istemeden önce önbellekten resim sunmaya çalışacağı anlamına gelir. Bu özellikle arka plan resmimizi veya AMP logomuzu güncellemeyeceğimizden bu uygulama için kullanışlıdır.

Bağlantıları Önceden Getirme

AMP Hizmet Çalışanı,data-rel=prefetch özniteliğine sahip bağlantıları önceden getirir. Bu işlem, kullanıcıların sayfaları henüz ziyaret etmemiş olsalar bile çevrimdışı görüntülemelerini sağlar. Özniteliği, lineup.html için bağlantı etiketimize ekleyeceğiz.

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

Çevrimdışı bir sayfa gösterme

Beklenmedik durumlarla veya önceden getirmediğimiz sayfaların bağlantılarına yapılan tıklamalarla başa çıkmak için, genel tarayıcı çevrimdışı sayfasını göstermek yerine "markaya uygun" tutarlı bir kullanıcı deneyimi sunmak için bir çevrimdışı sayfa ekleyeceğiz. offline.html sayfasını buradan indirin ve sw.js kodunu aşağıdaki kodla güncelleyin:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

PWA'nızı test edin

AMP Hizmet Çalışanınızın gerekli varlıkları önbelleğe aldığını ve Chrome DevTools aracılığıyla ideal bir çevrimdışı çözüm sağladığını test edebilirsiniz.

Windows'da Ctrl + Shift + I veya Mac'te Cmd + Opt + I tuşlarına basıp DevTools panelini açarak Lyrical Lyghtning'i test edeceğiz. Ayrıca sayfada sağ tıklayıp menüden incele seçeneğini de seçebilirsiniz. Ardından, hizmet çalışanı kaydınızı görüntülemek için Uygulama seçeneğini seçin.

Çevrimdışı moda geçmek için çevrimdışı kutusunu tıklayın. Düzgün bir şekilde önbelleğe alınıp alınmadıklarını kontrol etmek için tüm sanatçı listesini göster bağlantısını tıklayın ve offline.html sayfasına gidin.

İpucu – Aşamalı Web Uygulamaları özelliklerinin kapsamlı bir analizi için Google'ın Lighthouse aracını çalıştırın ve bir rapor oluşturun.

Tebrikler!

AMP ile başarıyla bir PWA oluşturdunuz! Bu öğreticide şunları öğrendiniz:

Web Uygulama Sunumu Oluşturma
amp-install-serviceworker kullanarak AMP'de bir Hizmet Çalışanı yükleme
AMP Hizmet Çalışanını özelleştirme
Prefetch links
Çevrimdışı bir sayfa oluşturma

Hizmet Çalışanları ve çevrimdışı kullanıcı deneyimi konuları hakkında daha fazla bilgi edinin. Analizlerle etkileşimi takip etmeyi öğrenin ve AMP sayfalarınız için temel analizi nasıl yapılandıracağınızla ilgili öğreticiyi izleyin.

Written by @crystalonscript