Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Android Cihazlarda 'Ana Ekrana Ekle' Popup Kodu xf 2

XF 2.0 Android Cihazlarda 'Ana Ekrana Ekle' Popup Kodu xf 2 2019-02-17

Bu eklenti, add-ons XenForo 2.0.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
  1. 2.2.X
  2. 2.0.X
  3. 2.1.X
  4. 2.3.X
Ana ekrana ekle (veya kısaca A2HS), akıllı telefon tarayıcılarında bulunan geliştiricilerin, favori web uygulamalarını (ya da siteyi) temsil eden ana ekranlarına bir kısayolu daha kolay ve rahat bir şekilde eklemelerine olanak tanıyan bir özelliktir. Bu kılavuz, A2HS’nin nasıl kullanıldığını ve kullanıcılarınızın bundan faydalanmasını sağlamak için bir geliştirici olarak yapmanız gerekenleri açıklamaktadır.

Bu kodun çalışabilmesi için sitenizin HTTPS’li olması gerekir.

İçindekiler
Logo Düzenleme
manifest.json Dosyasını Düzenleme
manifest.json ve sw.js Dosyasını Çağırma
server.js Adlı Dosya Oluşturun
sw.js Adlı Dosya Oluşturun
Test ve Önizleme Videosu
Dosyalar

1. Adım Logo Düzenleme

İndirmiş olduğunuz klasör içinde yer alan ve aşağıda listelemiş olduğum logoları kendi logonuzla değiştirin.

launcher-icon-0-75x.png
launcher-icon-1x.png
launcher-icon-1-5x.png
launcher-icon-2x.png
launcher-icon-3x.png
launcher-icon-4x.png

2. Adım manifest.json Dosyasını Düzenleme
name
, short_name, start_url, theme_color ve background_color içeriklerini düzenleyin.



Kod:
{
  "name": "Örnek Popup Uygulaması",
  "short_name": "Örnek Popup",
  "icons": [
    {
      "src": "launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "https://siteismi.com/?utm_source=webapp",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait"
}

3. Adım manifest.json ve sw.js Dosyasını Çağırma
BAK BURA ONEMLİ İYİ OKU ..

şimdi ilk olarak bu kodları eklemek için PAGE_CONTAINER şablonunu acıyosun artık hangı temayı vs kulanıyosan oraya dedıgım etıketlerın arasına yapısıtıryorsun . :)
Web sayfanızda yer alan <head> etiketleri arasına aşağıdaki kodu yapıştırın. <body>etiketleri arasına <script> kodlarını kopyalayın.
Kod:
<!DOCTYPE html>
<html>
<head>

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

</head>
<body>

<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>
</body>
</html>


4. Adım server.js Adlı Dosya Oluşturun


server.js
adında bir dosya oluşturun ve aşağıdaki kodları kopyalayın. Eğer manifest.json ve sw.js dosyalarını farklı dizinlerde oluştursanız, aşağıdaki kodlarda düzenleme yapmanız gerekir.


Kod:
APP.get('/manifest.json', function(req, res) {
    res.append('Content-Type', 'text/javascript');
    res.sendFile(path.join(root, "manifest.json"));
});

APP.get('/sw.js', function(req, res) {
    res.append('Content-Type', 'text/javascript');
    res.sendFile(path.join(root, "sw.js"));
});


5. Adım sw.js Adlı Dosya Oluşturun


sw.js
adında bir dosya oluşturun ve aşağıdaki kodları kopyalayın.

Kod:
console.log("sw loaded")
self.addEventListener('fetch', function(event) {
  // Perform some task
});

6. Adım Test

Yukarıdaki adımları tamamladıkta sonra dosyaları sunucunuza yükleyin. Daha sonra mobil cihazınında Chrome uygulamasını açın, web sitenizi ziyaret ederek test işlemini yapabilirsiniz. Eğer hatalı bir işlem yaptığınızda tarayıcınızda geçmişi temizleyerek tekrar test edin.

Önizleme şuan da yok mlsf
Yazar
fearles1453
İndirilme
21
Görüntüleme
2,672
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 1 değerlendirme

fearles1453 ait diğer kaynakar

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.