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

GoogleMaps: Casus aracı mı?

sundance

Her yeni hareketi ile bizleri şaşırtmaya devam eden Google, bu sefer de GoogleMaps ile inanılmaz bir iş başarmış.

Benzerlerinden çok daha hızlı sonuç üreten ve Ajax Teknolojileri sayesinde interaktif çalışan haritalar üzerinde, özellikle Amerika başta olmak üzere bir çok bilgi edinebiliyor, en yakın tren istasyonunu , ya da belli bir adresten belli bir adrese araba ile nasıl gidilir gibi bilgilere kolayca ulaşabiliyor.

Bu güzel servisin kullanımına en iyi örneklerden biri ise Craiglist.org'un (Emlak listeleri sitesi) GoogleMaps'le birleştirilmiş hali.

Ama daha yaratıcı bir kullanım alanı ise askeri havaalanlarındaki stealth bombardıman uçaklarını 1 2 3 4 ve hatta Ufoları tespit etmek. ;)

Google'dan güvenli iletişim için yeni bir adım: Anahtar Şeffaflığı Sistemi

tongucyumruk

Tam da WhatsApp'ın kullanıcıların şifreleme anahtarlarını değiştirmesinin bir güvenlik açığı oluşturup oluşturmadığının tartışıldığı şu günlerde Google sanki önceden durumun kokusunu almış gibi kullanıcıların anahtarlarını ve anahtar geçmişlerini doğrulamayı sağlayacak Anahtar Şeffaflığı (Key Transparency) aracını duyurdu.

Anahtar Şeffaflığı sunucu/istemci modeli ile çalışan bir anahtar...

Google Mobil Cihaz Görsel Aramalarına Hızlı Filtre Ekliyor

MuharremTuran

Google, görsel aramasının mobil sürümüne yeni bir filtre seçeneği ekledi. Arama yaptıktan sonra, arama kutusunun hemen altında, en son eklenen görseller, gif, küçük resim ve renkler filtrelemesi için hızlı filtreleme alanı sunuyor. Örneğin “kırmızı” yazıp arattığınızda, arama sonuçlarının en üstünde filtreleme menüsü görünüyor, daha fazla renk filtreleme seçeneği göstermek için çubuğu sola...

Piwik – Açık Kaynak Kodlu Web Analytics Platformu

MuharremTuran

Piwik, 150 ülkede, 1.000.000'den fazla web sitesinin kullandığı, 50’den fazla dil desteği olan PHP / MySQL ile yazılmış, ücretsiz ve açık kaynak kodlu web analytics platformudur. Ziyaretçilerin sitenizi nasıl kullandığı, sitenize nasıl ulaştığı ve sitenizi tekrar ziyaret etmelerini nasıl sağlayabileceğiniz hakkında yol haritası çizmenize yardımcı olur. Web sitelerinize yapılan çevrimiçi...

Google Android İşletim Sistemi Kullanan Telefon Prototipleri Çıktı

anonim

Google Android işletim sistemini kullanan yeni nesil cep telefonlarının ilk prototipleri kullanıcıların beğenisine sunuldu. IPhone ve Windows CE'ye ciddi rakip geliyor.

Google's Android Is Here -- iPhone Better Watch Its Back