Membuat Popup Add to Home Screen Wordpress - Ramai Beud

Kali ini kita akan belajar bagaimana caranya membuat pop up add to home screen pada blog atau website, Agar website atau blog kita bisa di download di perangkat android ataupun iPhone. Cara ini untuk sementara baru bisa di lakukan pada blog wordpress ataupun blog php, javascript dan sejenisnya. Jika anda masih menggunakan blog dengan platform blogspot untuk saat ini belum bisa di implementasikan. Baiklah, berikut adalah cara membuat pop up add to home screen yang bisa anda praktekan dengan mudah dan cepat.

Di sini saya tidak akan menjelaskan secara detil apa itu add to home screen dan apa itu PWA atau Progresive Web Aplications. Karena saya tau anda mencari informasi ini berarti anda sudah mengetahui tentang hal ini. Jadi di sini saya hanya memberikan tutorial tentang bagaimana caranya membuat pou up add to home screen pada blog atau website.

Pop up Add to Home Screen

File yang di buat Untuk Membuat Pop Up Add to Home Screen pada Blog atau Website

Untuk membuat pop up add to home screen pada blog atau website kita memerlukan adanya file serviceworker.js,manifest.json dan client.js. Ketiga file ini memiliki fungsi masing masing yang bertugas untuk menciptakan pop up add to home screen jika blog atau web kita di akses oleh seseorang.

Langsung saja ya, biar cepet dan bisa praktek ?

Membuat file client.js

File dengan extensi javascript berikut ini adalah mesin cache yang berfungsi untuk mengumpulkan cache pada web atau blog kita. Agar jika nanti di akses kembali web jadi berjalan sangat cepat nyaris tanpa loading. berikut file client.js tersebut.

(function() {
  var nativeAddAll = Cache.prototype.addAll;
  var userAgent = navigator.userAgent.match(/(Firefox|Chrome)/(d+.)/);

  
  if (userAgent) {
    var agent = userAgent[1];
    var version = parseInt(userAgent[2]);
  }

  if (
    nativeAddAll && (!userAgent ||
      (agent === 'Firefox' && version >= 46) ||
      (agent === 'Chrome'  && version >= 50)
    )
  ) {
    return;
  }

  Cache.prototype.addAll = function addAll(requests) {
    var cache = this;

    
    function NetworkError(message) {
      this.name = 'NetworkError';
      this.code = 19;
      this.message = message;
    }

    NetworkError.prototype = Object.create(Error.prototype);

    return Promise.resolve().then(function() {
      if (arguments.length < 1) throw new TypeError();

      
      var sequence = [];

      requests = requests.map(function(request) {
        if (request instanceof Request) {
          return request;
        }
        else {
          return String(request); 
        }
      });

      return Promise.all(
        requests.map(function(request) {
          if (typeof request === 'string') {
            request = new Request(request);
          }

          var scheme = new URL(request.url).protocol;

          if (scheme !== 'http:' && scheme !== 'https:') {
            throw new NetworkError("Invalid scheme");
          }

          return fetch(request.clone());
        })
      );
    }).then(function(responses) {
      // If some of the responses has not OK-eish status,
      // then whole operation should reject
      if (responses.some(function(response) {
        return !response.ok;
      })) {
        throw new NetworkError('Incorrect response status');
      }

      
      return Promise.all(
        responses.map(function(response, i) {
          return cache.put(requests[i], response);
        })
      );
    }).then(function() {
      return undefined;
    });
  };

  Cache.prototype.add = function add(request) {
    return this.addAll([request]);
  };
}());

Setelah itu kita buat file manifest.json

Membuat file manifest.json

File manifest.json ini fungsinya untuk menjelaskan kepada browser kalau web kita namannya ini dan bisa di install di layar smartphone anda. file ini berisi daftar lengkap nama blog kita, deskripsi, logo dll. Berikut file manifest.json yang saya maksud.

{
  "name": "Ramai Beud",
  "short_name": "RB",
  "start_url": "/",
  "display": "standalone",
  "icons": [{
    "src": "https://lh3.googleusercontent.com/-QDqCCQ10cnQ/WkAULqMa93I/AAAAAAAAADM/ZlLNpF9HWJk89kvBI1hwEQXN7ThP4I2uwCEwYBhgL/w140-h140-p/Ramai%2BBeud%2BLogo.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#009933",
  "theme_color": "#FFFFFF"
}

Jika sudah, lanjut ke file serviceworker.js

Membuat file serviceworker.js

File serviceworker.js ini berfungsi untuk membuat daftar file apa saja yang akan kita cache secara lokal agar loading web tidak membutuhkan waktu lama. Berikut ini adalah file tersebut.

importScripts('/client.js');
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('ramaibeud').then(function(cache) {
return cache.addAll([
'/'
]);
})
);
});
self.addEventListener('fetch', function(event) {
console.log(event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});

sekrang kita buat file untuk mendaftarkan serviceworker.js yang nantinya kita akan letakan di bagian <head>, ini berfungsi untuk mendaftarkan blog kita jika sudah memiliki fasilitas PWA atau Progresive Web Aplications. Berikut potongan codenya :

<script type="text/javascript">
    if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/serviceworker.js')
           .then(function() { console.log("Service Worker Registered"); });
}
  </script>

Baiklah, ketiga file sudah kita buat berikut tambahan file javascript yang akan kita gunakan pada bagian <head> template wordpress anda, sekarang saatnya kita meletakan file file tersebut di tempat yang seharusnya.

Cara memasang Add to Home Screen paada blog atau Website

Dalam uji coba kali ini saya menggunakan blog dengan platform wordpress, tapi jika anda menggunakan platform php seperti codeigniter atau lainnya caranya hampir sama, dan bisa mengembangkannya sendiri nanti.

Pertama, anda harus masuk ke direktori website atau blog wordpress anda melalui ftp atau cpanel, kemudian ikuti langkah langkah di bawah ini :

1. Upload file client.js, manifest.json dan serviceworker.js yang tadi kita buat menggunakan notepad atau apapun itu ke directory blog wordpress anda atau di public_html ataupun sejenisnya
2. Buka folder wp-content/themes/template anda/ header.php dan masukan potongan file yang di atas saya tulis untuk bagian <head> pada template wordpress anda
3. Setelah itu simpan dan coba akses blog atau website wordpress anda menggunakan smartphone dan lihat hasilnya.

Dengan mencoba serta mempraktekan tutorial ini bukan berarti secara otomatis berhasil karena ini merupakan optimasi otodidak, dan telah saya coba pada blog wordpress saya serta berhasil. Jika ingin melihat hailnya seperti apa silahkan cek langsung di sini PWA.

Sekarang silahkan coba anda praktekan untuk blog atau website anda, jika masih mengalami kegagalan silahakan kembali ke artikel ini untuk berdiskusi dengan saya , semoga bisa membantu kesulitan yang anda alami saat akan memasang add to home screen pada blog atau website anda.

Demikianlah artikel atau tutorial tentang bagaimana cara membuat pop up add to home screen pada blog atau website, semoga bermanfaat dan berguna, jangan sungkan untuk membagikan artikel ini jika di rasa bermanfaat untuk para blogger lainnya.