Gelişen mobil sistemler ile web siteler mobil sistemlerde yer kaybetmemesi için geliştirici firmalar yeni sistemler ile bu kaybı engelliyor.
Web site geliştiricileri mobil uygulama geliştirmeden mobil uyumlu sitelerini bir uygulama gibi davranabilmesini sağlayabiliyor. Bu sistem ise Web App Manifest olarak geçiyor.
Web App Manifest belirlenen parametreler ile web sitenizi güvenli bir şekilde mobil kullanıcılara mobil uygulama deneyimi sağlıyor.
Peki, Web App Manifest’i Sitenize Nasıl Uygularsınız?
JSON sistemi ile tarayıcıların ve mobil işletim sistemlerinin sitenizin mobil uygulama gibi davranmasını sağlayabilirsiniz.
JSON Kodlar:
{
"display": "standalone",
"name": "Paylaşım Park",
"short_name": "P.Park",
"start_url": "https://www.paylasimpark.com",
"description": "Bilgiler Paylaştıkça Anlam Kazanır!",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favx512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fe4641",
"background_color": "#000000"
}Yukarıdaki kodları anlatarak başlayalım. Name, sitenizin ismidir. Sort_name ise sitenizin kısa ismidir en fazla 12 karakter barındırmalı.
display, uygulamanın arayüz şeklidir. standalone, fullsize, browser gibi parametreler alır. browser dışındaki hepsi tıpkı bir uygulama gibi açılmasını sağlar.
start_url, uygulamanın başlangıç sayfasını belirtir.
description, uygulama hakkında bilgi barındırır.
icons ise uygulamanızın simgesini belirtir en az 192×192 boyutunda olmalıdır.
theme_color, uygulamanın rengi belirlemek için kullanılır.
background_color ise uygulamanın splash ekranındaki arka plan rengini belirler.
Düzenlemeyi kendinize göre yaptıktan sonra, manifest.json dosyayı olarak kaydedin ve sitenin ana dizinine ekleyin.
Sonrasında ise site kodlamanızın <head> etikleri arasına aşağıdaki kodu ekleyin.
<link rel="manifest" href="manifest.json" />
Sistemi şu bağlantı ile doğrulayabilirsiniz.
Bu adımları tamamladığımız zaman kullanıcılar sitenizi bir uygulama gibi davranacak. Fakat bunu Tarayıcıdan Ana Sayfa’ya ekle seçeneğine tıkladığı zaman kullanacaklar.
Bu işlemi kullanıcılara hatırlatmanız gerekir.
Bunun içinde bir JavaScript dosyası ile kullanıcılara bildirebilirsiniz.
HTTPS‘de hizmet veriyorsanız ve bir bildirim artı bir Hizmet Çalışanı varsa, tarayıcılar bir katılımı seviyesi tespit edildikten sonra bu istemi gösterecektir.
ServiceWorker sistemi, Web sitenizi çevrimdışı olarak önbelleğe almanıza yardımcı olur.
if ('serviceWorker' in navigator) {
// sw.js can literally be empty, but must exist
navigator.serviceWorker.register('/sw.js');
} Bu kodu sitenizin ana dizinine sw.js olarak kaydedin. Daha sonra ise head etiketleri arasına js dosyasını çağırın. Aşağıdaki kod ile bunu yapabilirsiniz.
<script type='text/javascript' src='/sw.js'> </script>
ServiceWorker işleminin çok geniş kapsamı vardır. Fakat bu konumuzda sadece üzerinden geçtik. Daha sonra daha detaylı olarak anlatacağız.
Bu Google bağlantısı üzerinden daha kapsamlı olarak inceleyebilirsiniz.
