PWA'nızın Çevrimdışı Çalışmasını Nasıl Sağlarsınız?

Muhtemelen Progressive Web App'in (sektörü değiştiren özellikleriyle birlikte) zaten ne olduğunu biliyorsunuzdur, ancak yineleme adına, web deneyiminde potansiyel olarak devrim yaratabilecek şaşırtıcı, benzersiz PWA özelliklerini bir kez daha tekrarlayalım, bu da onun çevrimdışı yeteneğidir . .

 Önerilen okuma: PWA nedir?

İçeriği yalnızca bir bağlantıyla görüntülenebilen normal web'den farklı olarak, Aşamalı Web Uygulaması, PWA'nın aşamalı özelliklerinin çoğundan sorumlu yerleşik bir mekanizma olan hizmet çalışanları gerekli dosyaları yükledikten sonra çevrimdışı görüntüleme mümkün olacak ve kullanıcılar çevrimdışıyken bile uygulamayla etkileşime girebilecek.

Aşamalı Web Uygulamaları ve Çevrimdışı Kullanılabilirlik

PWA'larla ilgili tüm bu yaygaranın ne hakkında olduğunu bilmek için - özellikle de çevrimdışı yeteneği, belki de tanımları gereği bir PWA olan ana web sitemizin ilk elden çevrimdışı olarak görüntülenmesini deneyimlemenizin zamanı geldi.

Progressive Web Apps ile tüm çevrimdışı deneyim, tipik bir bağlantı deneyiminizden farklı değildir ve bunun güzelliği de budur. Bu, bağlantı olmadığında bile kesintisiz bir tarama deneyimine ihtiyaç duyan e-ticaret mağazaları için özellikle yararlı bir özelliktir.

Notlar : Her PWA sitesi, çevrimdışı görüntülemenin kullanıcıya sunulmasından önce temel kaynakların önbelleğe alınmasına ihtiyaç duyar.

PWA'nızı Çevrimdışı Çalıştırma

Tamamen işlevsel, çevrimdışı özellikli bir Aşamalı Web Uygulaması oluşturmanın tüm ayrıntılarına girmek karmaşık olacaktır, bu nedenle bugün ilk olarak temel bilgilerle başlayacağız. Amacımız çevrimdışı çalışan bir barebone Progressive Web App yapmaktır .

Önkoşullar

• Sade bir web sitesi/web uygulaması. Bir index.html , bir index.js ve bir style.css içeren herhangi bir şey yapacaktır.

Tüm ön koşullara sahip olduğunuzda, barebone PWA'nızı çevrimdışı çalıştırmanın zamanı geldi!

Temel bir hizmet çalışanı oluşturma

Öncelikle, işlevsel bir hizmet çalışanı için gerekli tüm kodu içeren sw.js oluşturmanız gerekir.

 // sw.js
self.addEventListener("getir", event => {
    console.log("Getirdiniz" + event.url);
});

Service Worker'ınızı oluşturduktan sonra, tarayıcınızın bunu destekleyip desteklemediğini kontrol edelim ve index.js dosyanızda buna referans verelim:

 // index.js
if (navigatörde "serviceWorker") {
    navigator.serviceÇalışan
        .register("sw.js")
        .then(() => console.log("kayıtlı servis çalışanı!"));
}
// sayfanızın kodunun geri kalanı...

Yukarıdaki kod yeterince basit olmalıdır. Tarayıcınızın servis çalışanlarını destekleyip desteklemediğini kontrol eder ve eğer öyleyse, bir “ kayıtlı servis çalışanı! ”. Servis çalışanlarını kaydettirerek, esasen tarayıcıya sw.js servis çalışanlarınız için talimatlar olarak kullanmasını söylüyorsunuz ve karşılığında yeni servis çalışanlarını sitenizle ilişkilendiriyorsunuz.

Şimdi sw.js geri dönün, aşağıdaki kodu ekleyin:

 // sw.js
self.addEventListener("getir", event => {
    console.log("Getirdiniz" + event.url);
});

Kod, daha sonraki işlemlerimiz için hayati önem taşıyan bir EventListener ekler. Aslında, Chrome dahil birçok tarayıcı, kayıtlı bir fetch dinleyicisi olmadıkça PWA'nızın yüklenmesine izin vermez.

Yukarıdaki koddaki addEventListener iki argümanı vardır: dinlenecek olay(lar) ve bir olay nesnesi alan bir geri arama. Bu olay gerçekleştiğinde, servis çalışanınız artık web sitenizin HTML, CSS, JS, ses, resimler ve API'lere/diğer web sitelerine yönelik diğer istekleri içeren fetch olaylarını dinlemeye başlayacaktır.

Kaynaklarınızı önbelleğe alma

PWA'nızın çevrimdışı özellikli olması için, hizmet çalışanları içeriğin sunulmasında bir pay öder, ancak sayfanızın kaynaklarını da önbelleğe almanız gerekir.

Sayfanızın kaynaklarını önbelleğe almak için öncelikle Önbellek Depolamanızın boyutunu planlamanız gerekir, çünkü bunun bir sınırı vardır.

Önbellek Depolama sınırı

Her tarayıcının önbellek depolamayı işlemenin farklı bir yolu vardır. Bununla birlikte, hemen hemen hepsinin Önbellek Depolama boyutu için bir sınırı vardır - bu sınır genellikle Amazon gibi büyük ve obez sitelerin hizmet çalışanlarını kullanarak tüm mağazalarını önbelleğe aldığını görmemenizin nedenidir.

Şimdi bu sınır, son kullanıcının cihazına bağlı olduğu için değişiyor; ancak normalde, kullanıcınızın maksimum disk alanının yaklaşık %20'si kadar olmalıdır. Daha fazla bilgi için aşağıdaki çizelgemize veya Google'ın Aşamalı Web Uygulamaları için Çevrimdışı Depolama ile ilgili resmi kılavuzuna başvurabilirsiniz.

Artık bu Önbellek Depolama sınırını ortadan kaldırdığımıza göre , kaynaklarınızı gerçekten önbelleğe almaya geçelim.

Sayfanızın kaynaklarını önbelleğe almak için depolamak istediğimiz tüm varlıkları içeren global bir diziye ihtiyacımız var:

 /* 
  Önbelleğe kaydetmek istediğimiz her şey bu.
  Uygulamanın çevrimdışı çalışabilmesi/yüklenebilir olması için,
  sadece görüntüleri değil, HTML, JS ve CSS'mizi de kaydetmeliyiz
  ayrıca - çevrimdışıyken kullanmak istediğimiz her şey.
*/
const VARLIKLAR = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/style.css",
    "/index.html",
    "/çevrimdışı.html",
    "/"
];

Çevrimdışı kullanmak istediğiniz her şeyin depolandığı yer burasıdır. Yukarıdaki örnekte, ilk birkaç görüntü, çeşitli SimiCart logosunun depolandığı Imgur'a giden yoldur.

Bu adımla çevrimdışı kullanımlar için gerekli kaynaklar listemiz artık hazır. Servis çalışanlarını kullanarak onları önbelleğe alalım.

Bunu sw.js'nizin en üstüne ekleyin:

 // sw.js

let cache_name = "SimiCart"; // Önbelleğimizi tanımlamak için kullanılan dize

self.addEventListener("kurulum", event => {
    konsol.log("kurulum...");
    event.waitUntil(
        önbellekler
            .open(önbellek_adı)
            .then(önbellek => {
                önbellek.addAll(varlıklar);
            })
            .catch(err => console.log(err))
    );
});

Esasen, bu kod tarayıcıya önbelleğe alma işlemimiz için beklemesini ( waitUntil() çağrısını kullanarak) bildirir.

Önbellek API'sini, özellikle addAll() 'ı kullanarak, varlık dizimiz, hizmet çalışanları tarafından sunulmaya hazır olarak, önbelleğe zahmetsizce eklenebilir. Şey, bir kez daha düşündüm, o kadar da hazır değil. Yine de fetch olay işleyicimizi biraz değiştirmemiz gerekecek.

Şimdi şöyle görünecek:

 self.addEventListener("getir", event => {
    if (event.request.url === "https://www.simicart.com/") {
        // veya uygulamanızın URL'si ne ise
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } başka {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(yanıt => yanıt)
            )
        );
    }
});

Uygulama çevrimdışıyken bile kaynakları önbelleğe almaya çalıştığımız yukarıdaki kodda açıkça görülmelidir. Mantık aşağıdaki gibidir:

• İlk olarak, uygulama kaynakları çevrimiçi hale getirmeye ve bu getirme başarısız olursa ( respondWith() kullanarak) önbelleğe alınan kaynaklarla yanıt vermeye çalışır.
• respondWith() içinde, ağdan kaynakları almaya çalışmak için fetch(event.request) ve getirme Promise tabanlı olduğundan, Promise ağa bağlanamazsa reddeder ve sırayla catch() beyanı.
• catch() deyiminde, önbelleğe alınmış kaynaklarınızı aramak istediğiniz yerdir.

Ve bu kadar. PWA'nız artık çevrimdışı çalışabilmelidir! Oldukça kolay, değil mi?

Çözüm

Teknolojik dünyada işler oldukça hızlı ilerliyor ve PWA'ya dönüştürmek veya çevrimdışı yetenekler gibi hayati bir işlevi PWA'nıza entegre etmek için ne kadar beklerseniz, sizin ve işiniz için o kadar fazla fırsat maliyeti olur.

Yine de, her ihtiyacınızı karşılayabilecek SimiCart gibi her zaman hazır çözüm sağlayıcılar vardır. Şans eseri çevrimiçi bir tüccarsanız ve her yönüyle mükemmel bir Magento PWA çözümü arıyorsanız, doğru yerdesiniz. PWA'larda ve Yerel Uygulamalarda 5 yılı aşkın uzmanlığımızla Magento e-Ticaret web siteleri için bilinen bir çözüm sağlayıcıyız.