Fm pwa 1

Progressive Web App Dünyasına Giriş: Manifest

3
butch

Progressive Web App (PWA), Google'ın günümüz web uygulamalarının iyi birer mobil uygulamaya dönüşebilmesi için önerdiği özellikler çerçevesinde ortaya çıkan bir kavram. Tarihsel olarak Responsive Web'den sonra ortaya çıkan gelişme olarak anılacak ve görünen o ki web dünyasında bir büyük değişime daha tanıklık etmemize sebep olacak.

Bir PWA'nın temelde sahip olması gereken özellikler bu adreste listelenmiş. Altyapınızın ihtiyaçları ne kadar karşıladığını öğrenmek için Chrome Lighthouse eklentisini kullanabilirsiniz.

Sitenizin https üzerinde sunulduğu ve mobil uyumlu olduğu varsayımıyla PWA'a ilk adımı manifest tanımlayarak atalım. Bunu yapıp, web sitenizi web tarayıcısından "Ana Ekrana Ekle" dediğinizde olacaklar sitenizin native bir uygulama gibi görünmesini sağlayacak.

Haydi başlayalım.

Manifest

Tek yapmanız gereken sitenizinin altından ulaşabileceğiniz bir manifest.json dosyası oluşturmak ve bunu bir link tag'i ile ulaşılabilir kılmak.

https://fazlamesai.net/manifest.json adresinden ulaşabileceğiniz örnekte de görebileceğiniz gibi bir dosyayı oluşturup,

<link rel="manifest" href="/manifest.json">

gibi bir link tag'i ile adreslemek.

Manifest İçerik

{
  "name": "Fazlamesai.net",
  "short_name": "FM",
  "icons": [{
        "src": "fm_144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, {
        "src": "fm_192.png",
        "type": "image/png",
        "sizes": "192x192"
      }],
  "start_url": "/",
  "display": "browser",
  "background_color": "#ffffff",
  "theme_color": "#e65100"
}
  • name: Uygulamanın adı. Splash(ön yükleme) ekranında görünecek.
  • short_name: Uygulamamanın kısa adı.
  • icons: Uygulama ikonları (Splash ekranında da görünecek). Yukarıdaki örnekler temel Android ve iOS ihtiyaçlarına yönelik.
  • start_url: Uygulamanın ilk açacağı url.
  • display: standalone ve browser seçenekleri bulunuyor. standalone senaryosunda bir adres çubuğunuz olmuyor.
  • background_color: Splash ekranı arka plan rengi. Uygulama açılana kadar görüntülenecek.
  • theme_color: Tema rengi. Araç çubuğu rengini belirliyor.

PWA'ya basit bir giriş yapmış olduk. Bir sonraki aşama Service Workers. Bu teknoloji ile uygulamanızın offline durumdaki davranışını ele alan bir yazı için beklemede kalın.

Görüşler

0
tongucyumruk

Progressive Web Apps Google basta olmak uzere pek cok sirketin son dönemde en cok yayginlastirmaya calistigi teknoloji. Tabi ki hedef belli: Dunyanin kolay ulasilamayan bölgelerinde yasayan, internet baglantisi kesintili/yavas milyarlarca kullanicinin web ekosistemine dahil edilmesi. Bunun icin anahtar kelimelerden biri: Offline first.

Tabi ki ne Google ne de diger sirketler bunu hayrina veya insanligin iyiligi icin istemiyorlar. Hedef yeni ve cok genis bir markete ulasmak, ama bunu yaparken insanlarin hayati kolaylastiran pek cok servise de ulasmasini saglayarak hayat kalitesini artirmis oluyorlar1.


  1. Tabi ki Google, Facebook gibi sirketlerin hayat kalitemizi nasil etkiledigi, hayatimizi guzel mi yoksa karmasik mi kildigi baska bir tartisma konusu 

1
butch

Bu yazının devamını getiremedim henüz ama Safari'ye 11.1 sürümü ile service workers desteği geldiği bilgisini paylaşayım.

Görüş belirtmek için giriş yapın...

İlgili Yazılar

Google Code

Soulblighter

Google, Google ile ilgili yazılım geliştirmek isteyen geliştiriciler için yeni bir portalı devreye soktu: Google Code. Google'ın bu yeni portalında Google uygulamalarının API'lerini ve yeni geliştirilmiş açık kaynak kodlu yazılımları bulabilirsiniz.

Let's Encrypt: Haydi Şifreleyelim

butch

Malumunuz, Let's Encrypt'in hayatımıza girmesiyle birlikte, güvenli site kurma maliyetlerinde, daha da önemlisi sertifika yönetme süreçlerinde ciddi bir rahatlama yaşadık. Aşağıdaki notlar GNU/Linux üzerinde Nginx ile rekor bir sürede SSL sertifikası almaya yöneliktir. Digital Ocean topluluğu tarafından hazırlanmış daha detaylı bir belgeyi bu adreste bulabilirsiniz.

SSL sertifikası...

Google OS olabilir mi?

TiberiusKirk

osnews.com'da yer alan makaleye göre, Google ve Microsoft arasında başlayan arama motoru rekabeti dramatik biçimde vites büyütüyor...

Acaba Google OS diye bir şey olabilir mi? Google hedef büyütüp insanlara çok daha geniş ve güçlü bir kullanım şekli sunabilir mi? Halihazırda elinde en güçlü arama mekanizmalarından biri mevcut, haber servisleri, her yerden erişilebilir ve çok kolay kullanılabilir bir e-posta... Her kullanıcısına 1 GB alan yerine 10 GB alan verdiğini, dosya izin ve paylaşım mekanizmasını kurduğunu, hızlı bir Internet bağlantınız olduğunu düşünün. Nereye giderseniz gidin, hangi bilgisayarı kullanırsanız veriniz erişilebilir durumda. Yeni bir işletim sistemi ya da yeni bir uygulama süiti ya da belki yepyeni kavramlar...

Google Gmail ile Chat'i Birleştirdi

Skeleton

Google, Gmail kullanıcalarının ayrı bir chat programı gerektirmeden diğerleri ile metin mesajları gönderip/alabileceği bir servis olan Gmail Chat'i duyurdu. Bu yeni özellik ile Gmail içerisinde nerede olursanız olun, kontak listenizdekilerin durumunu görebilecek ve onlarla konuşabileceksiniz. Bunun yanında yaptığınız görüşmeleri Gmail hesabınıza kaydetme özelliği de mevcut.

Google Translate artık Türkçe

tongucyumruk

Google'ın çeviri servisi Google Translate artık Türkçe'yi de destekliyor. Sistemi kanlı canlı görmek için tıklayın. Yazıların üzerine gelince çıkan baloncukları kullanarak çeviri sisteminin gelişmesine katkıda bulunabileceğinizi de arada hatırlatmış olalım.