[Part 2] Memasang Web Push Notif OneSignal di AMP Blogger
Tutorial OneSignal di AMP Blogger Template
Warning! This Tutorial is for AMP Page Only, Don't implement this on Non-AMP Page, it's will do nothing.Go to: [Part 1] Setup OneSignal Push Notif in AMP Blogger
Web Push Notification adalah sebuah layanan web di mana website menyediakan cara yang sederhana dan efektif untuk terhubung-kembali dengan pengguna.
Push Notification ini sangatlah efektif agar para pengunjung anda menerima pemberitahuan terhadap update terbaru dari website anda. Pengguna bisa menekan tombol subscribe notification gara dapat berlangganan mengenai update terbaru.
Push Notification ini sangatlah efektif agar para pengunjung anda menerima pemberitahuan terhadap update terbaru dari website anda. Pengguna bisa menekan tombol subscribe notification gara dapat berlangganan mengenai update terbaru.
Saat ini sudah banyak aplikasi pihak ketiga yang menawarkan layanan ini, baik gratis maupun berbayar. Diantaranya, ada OneSignal, SendPulse, UrbanAirship, dan lain-lain. Mereka mendistribusikan pesan atau update terbaru dari web anda, dengan konfigurasi yang sangat mudah dan support dengan baik di http:// maupun https://.
Konfigurasi Button Subscribe --OneSignal AMP Web Push Notification Pada AMP Blogger
Tidak seperti di halaman Non-AMP, yang cukup memasukan javascript kode yang diberikan OneSignal, maka tombol subscribe akan muncul dengan sendirinya. Di AMP Page, anda membutuhkan button subscribe, yang nantinya bisa diklik oleh visitor website anda.
Berikut ini tutorial setup Button Subscribe amp-web-push notification pada AMP Blogger.
Copy komponen amp-web-push berikut ini, copy sebelum kode </head> :
Copy kode berikut ini, paste sebelum </body>. Harap ganti tanda berwarna kuning dengan APP ID OneSignal anda. Dan ubah LABEL.os.tc anda dengan alamat label OneSignal anda, contoh amp-blogger.os.tc . Untuk cara membuatnya, sudah saya jelaskan di artikel PART 1.
Kemudian kita akan memasang button-nya, saya implementasikan tombol tersebut dalam body artikel, tepatnya di akhir artikel. Cari <data:post.body/>, paste kode berikut ini di bawahnya:
Agar tampilan lebih menarik, copy code CSS ini, dan tempelkan dibawah <style amp-custom='amp-custom'> :
Silahkan SAVE perubahan pada Template anda. maka hasilnya akan seperti ini:
Silahkan coba test halaman, apakah tombol subscribe sudah muncul atau tidak. Jika belum muncul, harap pastikan anda sudah benar mengganti APP ID dan Label.os.tc anda.
Jika ada pertanyaan, silahkan diskusikan di kolom komentar.
Berikut ini tutorial setup Button Subscribe amp-web-push notification pada AMP Blogger.
Copy komponen amp-web-push berikut ini, copy sebelum kode </head> :
<script async='async' custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
Copy kode berikut ini, paste sebelum </body>. Harap ganti tanda berwarna kuning dengan APP ID OneSignal anda. Dan ubah LABEL.os.tc anda dengan alamat label OneSignal anda, contoh amp-blogger.os.tc . Untuk cara membuatnya, sudah saya jelaskan di artikel PART 1.
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https:LABEL.os.tc/helper_frame?appId=YOUR-APP-ID"
permission-dialog-url="LABEL.os.tc/amp/permission_dialog?appId=YOUR-APP-ID"
service-worker-url="https://LABEL.os.tc/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
></amp-web-push>
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="subscribe-icon"
width="24"
height="24"
layout="fixed"
src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
</amp-img>
Subscribe to updates
</button>
</amp-web-push-widget>
Agar tampilan lebih menarik, copy code CSS ini, dan tempelkan dibawah <style amp-custom='amp-custom'> :
amp-web-push-widget button.subscribe{display:inline-flex;align-items:center;border-radius:2px;border:0;box-sizing:border-box;margin:0;padding:10px 15px;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:#4A90E2;color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,0.5);-webkit-tap-highlight-color:rgba(0,0,0,0)}
amp-web-push-widget button.subscribe .subscribe-icon{margin-right:10px}
amp-web-push-widget button.subscribe:active{transform:scale(0.99)}
amp-web-push-widget button.unsubscribe{display:inline-flex;align-items:center;justify-content:center;height:45px;border:0;margin:0;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:transparent;color:#B1B1B1;-webkit-tap-highlight-color:rgba(0,0,0,0)}
Silahkan SAVE perubahan pada Template anda. maka hasilnya akan seperti ini:
Silahkan coba test halaman, apakah tombol subscribe sudah muncul atau tidak. Jika belum muncul, harap pastikan anda sudah benar mengganti APP ID dan Label.os.tc anda.
Jika ada pertanyaan, silahkan diskusikan di kolom komentar.