Giriş YapYazar OL

EDOFHI

EDOFHI Logo EDOFHI Logo

EDOFHI Navigation

  • Ana Sayfa
  • İletişim
Ara
Yazar Hesabı Oluştur

Mobile menu

Close
Bir Başlık Aç
  • Makaleler
  • Başlıklar
  • Kategoriler
  • Site İçi Detaylı Arama
  • Yazarlar
  • Yazar İtibar Puanı Sistemi
Ana Sayfa/ Başlıklar/Başlık 1124
İletiye Açık
Neşe PalamuduKatılımcı Yazar
Başlık Tarihi: Kasım 22, 20202020-11-22T23:10:40+03:00 2020-11-22T23:10:40+03:00Kategori: Wordpress

Web Site Ana Ekrana Ekle Nasıl Yapılır?

Bazı internet sitelerinde görüyorum. Siteye cep telefonundan girince “… Uygulamasını Ana Ekrana Ekle” diye popup açılıyor. Tıkladığımda telefonuma web sitesinin ikonu ekleniyor. Tıkladığımda site uygulama gibi açılıyor. Bunu kendi siteme nasıl uygulayabilirim? Sitem wordpress bu arada.

  • 0
  • 1 1 İleti
  • 0 Takipçi
  • 0
  • Paylaş
    Paylaş
    • Paylaş Facebook
    • Paylaş Twitter
    • Paylaş LinkedIn
    • Paylaş WhatsApp

1 İleti

  • En Eski
  • En Yeni
  • Beğeniye Göre
  1. Gürcan İNAN Katılımcı Yazar
    2020-11-23T15:02:38+03:00İleti Girdi Tarihi: Kasım 23, 2020 Saat: 15:02
    Bu ileti düzenlenmiştir.

    Bahsettiğiniz uygulama PWA, yani prograssive web app olarak geçiyor. PWA, web siteniz için özel bir uygulama yazmadan, mobil cihazlarda sanki bir uygulamaymış gibi çalışmasını – görüntülenmesini sağlar.

    Web sitenize pwa uyguladığınız zaman bir kullanıcı mobil cihazından Chrome veya Edge tarayıcı ile sitenize girdiğinde, “SİTEİSMİ” Uygulamasını Ana Ekrana Ekle popup penceresiyle karşılaşır. Kullanıcı kabul ederse mobil cihaz ekranına sitenizin ikonu eklenir. Bir nevi sitenizin mobil uygulaması kullanıcının cihazına kurulur.

    Kullanıcı bu ikona bastığında siteniz bir mobil uygulamaymış gibi tam ekran olarak, tarayıcıdan bağımsız olarak açılır.

    Şuradan PWA ile ilgili daha detaylı bilgilere ulaşabilirsiniz.

    Peki tavsiye eder miyim?

    Ederim. Şöyle ki PWA uygulamasının alternatifi web siteniz için webview uygulaması yazdırmak. Fakat bu uygulamalar gereğinden fazla boyutta oluyor ve mobil cihazlarda yer kaplıyorlar. Kullanıcı Google Play Store’a gidip uygulamanızı yüklemesi gerekiyor.

    Fakat PWA uygulaması Sevice Worker üzerinden çalıştığı için hem yer kaplamıyor, hem de kurulum için kullanıcıyı Google Play Store’a yönlendirmiyor.

    PWA ile web siteniz tarayıcı üzerinden görüntülemeye veya webview uygulamanıza göre daha yüksek hızda açılıyor.

    Ayrıca webview uygulaması yazdırmak PWA’ya göre daha masraflı. WordPress altyapılı bir siteniz varsa eklentilerle bu işi daha ucuza halledebilirsiniz. Ya da birazdan anlatacağım kod uygulamaları ile tamamen ücretsiz fakat sınırlı özelliklerle web sitenize PWA uygulayabilirsiniz.

    Yazının devamında eklentisiz olarak sitenize nasıl PWA uygulayacağınızı anlatacağım fakat önce WordPress altyapılı siteler için iki eklenti tanıtmak istiyorum.

    WordPress PWA Eklentileri

    # İlk eklentinin adı Instantify. Şuradan eklentiyi detaylıca inceleyebilirsiniz.

    Instantify, size üç özellik sunuyor. Birincisi web sitenizin gelişmiş özelliklere sahip bir PWA uygulamasına sahip olmasını sağlıyor.

    İkincisi, sitenize otomatik olarak Hızlandırılmış Mobil Sayfalar (Google AMP) işlevselliği ekliyor.

    Son olarak Facebook’ta paylaştığınız site içeriğinizi Facebook uygulaması üzerinden anında açılmasını ve Facebook üzerinden para kazanmanızı sağlayan Facebook Instant Articles özelliği de eklentiyle birlikte geliyor.

    Konumuz gereği bizim için önemli olan PWA desteği. Eklentinin PWA için sunduğu özellikler şöyle:

    • Ana ekrana ekle popup gösterimi
    • Siteyi, kullanıcının internet bağlantısı olmadan da gösterebilme (offline mod)
    • PWA sürümüne özel gezinti çubuğu
    • PWA sürümüne özel sosyal medya paylaşım butonları
    • Ekranın alt kısmında mesaj kutusu gösterebilme
    • Kullanıcıya bildirim göderebilme (Push Notifications)

    Çoğu projemde bu eklentiyi kullanıyorum. Tavsiyemdir.

    # Diğer eklentimiz ise PWA for WordPress. Eklentiyi şuradan inceleyebilirsiniz.

    Bu eklenti sadece PWA üzerine yoğunlaşmış. Artı olarak WooCommerce altyapılı E-Ticaret sitelerini de destekliyor.

    Eklenti, önbellek ile offline modda çalışma, PWA için arka plan renklerini değiştirme, push bildirimleri gibi özellikler sunuyor. Detaylı kullanıcı kılavuzu ile eklentiyi çok kolay bir şekilde sitenize uygulayabiliyorsunuz.

    # Bir de SuperPWA eklentisi var. Kullanmadığım için nedir ne değildir tam bilmiyorum. Şuradan inceleyebilirsiniz.

    Ana ekrana ekle kodu, diğer bir değişle PWA uygulamasını eklentisiz, manuel olarak yapmak isterseniz, birkaç dosya ve kod uygulamasıyla kısa sürede sitenizin PWA uygulamasını yapabilirsiniz.

    Eklentisiz PWA Uygulama ile Ana Ekrana Ekle Popup Kodu

    Anlatacağım işlem sadece WordPress altyapılı siteler için değil tüm sitelerde sorunsuzca çalışacaktır. Tabi web sitenizin mutlaka responsive yani mobil uyumlu olması ve SSL sertifikasına (https) sahip olması gerekir.

    Ayrıca bu işlem ile sadece ana ekrana ekle popup çalıştırabilir, sitenizin uygulama gibi mobil cihazlara kurulmasını sağlayabilir ve mobil cihazlarda uygulama gibi açılmasını sağlayabilirsiniz. Offline mod, push bildirimleri gibi özellikler bu anlatacağım yöntemde mevcut değil. Tabi kod bilginiz varsa bu özellikleri de ekleyebilirsiniz.

    1- Eklentisiz PWA uygulamasına sahip olmak için öncelikle buraya  tıklayarak gerekli dosyaları indirin.

    2- İndirdiğiniz rar dosyasını arşivden çıkarın.

    Dosya içerisinde “launcher-icon” ile başlayan png uzantılı 6 dosya göreceksiniz. Bu dosyalar sitenizin ikonları. Yani kullanıcı ana ekrana ekle popup penceresinden sitenizi mobil cihazına kurduğunda bu simgelerden biri gösterilecek.

    Bu ikonların birden çok olmasının sebebi kullanıcının mobil cihazındaki çözünürlüğe göre farklı boyutlarda otomatik olarak seçilmesidir.

    İndirdiğiniz dosya içerisindeki bu dosyaların boyutlarının ne olacağını içlerine yazdım. Siz de kendi sitenizin simgesini bu boyutlara göre herhangi bir resim işleme programıyla oluşturun. Oluşturduğunuz simgelerin isimleri verdiğim görsel dosya isimleriyle aynı olmalıdır.

    3- Dosya içerisindeki “manifest.json” dosyasını herhangi bir editör ile açın. Ben düzenleme için Notepad++ programını kullanıyorum.

    Dosyanın en başında bulunan

    "name": "Siteİsmi",
    "short_name": "Siteİsmi",

    kısmındaki “Siteİsmi” yazan yerleri kendi sitenizin ismi ile değiştirin. Daha sonra aşağıda bulunan

    "start_url": "https://siteadresi.com/?utm_source=webapp",

    kısmındaki “siteadresi.com” yerini kendi site adresiniz ile değiştirin. Dosyayı kaydedin.

    Bu koddaki “?utm_source=webapp” kısmı nedir diye aklınıza takılabilir. Bu uzantı kaç kişinin sitenize PWA ile eriştiğini Google Analytics üzerinden görmenizi sağlıyor.  Google Analytics hesabınızdan “Edinme > Tüm Trafik > Kaynak/Aracı” yolunu izleyerek bu bilgiye erişebilirsiniz.

    4- Düzenleme işlemleri bittikten sonra indirdiğiniz tüm dosyaları (6 tane ikon dosyası, maifest.json, server,js, sw.js) sitenizin ana dizinine ftp ya da dosya yöneticisi aracılığı ile yükleyin.

    5- Siteniz WordPress ise temanızın header.php dosyasını açın. Aşağıdaki kodu <head> ve </head> etiketleri arasında herhangi bir yere yapıştırın.

    <!-- Web App Manifest -->
    <link rel="manifest" href="/manifest.json">

    Daha sonra <body> etiketinden sonra aşağıdaki kodu yapıştırın ve dosyayı kaydedin.

    <script>
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js?v3', {
    scope: '.' // THIS IS REQUIRED FOR RUNNING A PROGRESSIVE WEB APP FROM A NON_ROOT PATH
    }).then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
    });
    }
    </script>

    6- Her şey tamamsa sitemizin PWA uygulaması çalışıyor mu çalışmıyor mu test edelim. Öncelikle cache eklentisi kullanıyorsanız cache temizliği yapın.

    Sitenize mobilden giriş yapın. Ekran altında “xxxxx uygulamasını Ana ekrana ekle” popup kutusunu göreceksiniz.

    Bir de sitenize masaüstü bilgisayarınızın Chrome veya Edge tarayıcısından girin. Adres çubuğunun sağ kısmında daire içerisinde artı işaretiyle birlikte “Yükle” yazısını göreceksiniz.

    Bunları göremiyorsanız adımları uygularken yanlış bir şeyler yapmış olabilirsiniz. Kontrol edip tekrar deneyin.

    İşlem bu kadar.

    “Ben bunlarla uğraşamam, benim için hallediver.” derseniz de gurcaninan@gmail.com adresinden bana ulaşın, ücreti mukabilinde hallederiz 🙂 Yine de tavsiyem denemekten ve hata yapmaktan korkmayın 😉

    Eklenti kullanmadan PWA uygulaması edinme işleminde kullanılan kodları şuradan aldım. Şuradaki sayfada da biraz daha değişik bir anlatım mevcut.

    Şuradan da PWA için yabancı bir kaynağa ulaşabilirsiniz.

    Ekleme:

    Site açılınca ilk anda popup çıkmaz. Ekranı aşağı doğru kaydırınca çıkar, üste doğru kaydırınca popup yine kaybolur. Kullanıcı eğer “x”e tıkladıysa, çerezleri temizleyene kadar popup yine çıkmaz. Popup penceresine istenildiği gibi müdahale edilebilinmesi için ya kod bilmek gerek ya da ücretli eklentilerden edinmek gerekiyor.

    • 1
    • Paylaş
      Paylaş
      • Paylaş Facebook
      • Paylaş Twitter
      • Paylaş LinkedIn
      • Paylaş WhatsApp
    • 1 Yorum
    • Neşe Palamudu Katılımcı Yazar
      2020-11-23T17:11:59+03:00Yorum İletisi Girdi Tarihi: Kasım 23, 2020 Saat: 17:11

      Detaylı anlatım için çok teşekkürler hemen deniyorum.

      • 0
      • Paylaş
        Paylaş
        • Paylaş Facebook
        • Paylaş Twitter
        • Paylaş LinkedIn
        • Paylaş WhatsApp

Başlığa ileti girmek için yazar girişi yapmanız gerekmektedir.

Buraya şunu yazınız → ( ankara )

Şifremi Unuttum?

Yazar Mı Olmak İstiyorsunuz? Yazar Hesabı Oluştur

Sidebar

Edofhi’de bilgi ve tecrübe paylaşımı odaklı istediğiniz her konuda başlık açabilirsiniz.

Yazar Hesabı Oluştur
Bir Makale Yayımla

Edofhi İstatistikleri

  • Başlık 47
  • İleti 78
  • Makale 6
  • Yazar 36

Explore

  • Makaleler
  • Başlıklar
  • Kategoriler
  • Site İçi Detaylı Arama
  • Yazarlar
  • Yazar İtibar Puanı Sistemi

© 2020 Edofhi.com Tüm Hakları Saklıdır & All Rights Reserved | Edofhii.com'da yer alan tüm içerikler 5846 Sayılı Fikir ve Sanat Eserlerini Koruma Kanunu'na istinaden koruma altındadır. Edofhi.com'da yer alan tüm içerikler edofhi.com yazarları ve site yönetimi tarafından tamamen özgün bir şekilde oluşturulmaktadır. Edofhi.com'da yer alan hiçbir içerik (yazı, fotoğraf, video vb.) site kullanım şartlarında da belirtildiği üzere izinsiz olarak kopyalanamaz, alıntı yapılamaz, başka yerde yayınlanamaz. Bu durumu ihlal edenler hakkında suç duyurusunda bulunulup, yasal işlem başlatılacaktır.
KVKK | Gizlilik ve Çerez Politikaları | Üyelik ve Kullanım Sözleşmesi | Site ve Yazarlık Kuralları