5 Chrome Extensions yang Wajib di install untuk Web Designer – Halo semua selamat data di situs web didikprabowo. com. Kali ini saya ingin membahasa mengenai extensions pada google chrome yang wajib diinstall oleh web designer. Perlu diketahui apa itu web designer, Web Designer merupakan salah satu bidang IT yang berguna untuk merancang tampilan situs web, biasanya mengenai tentang ukuran, warna, font dan lainnya. Desainer Web terkait dengan pengembang front end, namun biasanya seorang desain web juga memahami bagian pengembang front end
Ekstensi pada google chrome dapat membantu seorang web designer untuk merancang sebuah tampilan halaman website. Maka dari itu seoaran web designer wajib menginstall beberapa extension keren di google chrome
Penasaran apa aja extension nya ?
daftar isi
Face menginstall Extension Google Chrome
- Silahkan buka di kolom URL google chrome dan masukan link berikut ini , https. // chrome. Google. com/webstore/category/extensions?hl=en-US
- Silahkan pilih extension yang ingin di install kemudian klik add to chrome
Kalau sudah bisa cara menginstall extensions google chrome, mari kita bahas 5 Chrome Extensions yang Wajib di install untuk Web Designer
1. Pengembang Web
Extension dari web developers memiliki beberapa fitur yaitu
- Nonaktifkan Plugin, Javascript, berikan Pop Up
- Disable CSS, baik yang berupa inline css, internal css maupun external css
- Hapus, nonaktifkan cookie
- Manajemen image, baik thumbnail maupun background
- Dan masih banyak lagi
Anda dapat menginstall extensions web developer di https. //krispederik. com/kerja/pengembang web/dipasang/chrome/05/
2. Font apa
Whatfonts, berguna untuk mendeteksi font yang digunakan oleh suatu website yang ingin dilihat, Jadi setiap teks dapat kita lihat nama fontnya. Biasanya ketika kita melihat suatu website, dan fontnya menarik maka ingin menirunya. Hal ini dapat dilakukan menggunakan inspect element, namun harus menelusuri satu sama lain. Nah dengan menggunakan extension Whatfonts, maka font dapat terlihat dengan cepat
Go bisa dapatkan say https. // chrome. Google. com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en-US
3. Eyedropper Pemilih Warna
ColorPick Eyedropper, digunakan untuk melihat kode warna pada layout website, dengan menggunakan ColorPick Eyedropper maka akan terlihat kode warna yang dipakai oleh website tersebut. Kode warna bisa berjenis Hex maupun RGB. Tinggal anda sesuaikan ingin memakai yang mana, cukup membantu bukan. Langsung saja silahkan pasang extensions ColorPick Eyedropper di chrome yang anda pakai
Pergi bisa mendapatkan mengatakan https. // chrome. Google. com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en-US
4. cssviewer
CssViewer digunakan untuk melihat style cssnya, style css tersebut mencakup elemen dan tag HTML yang dipakai oleh website yang diperiksa. Hal ini biasanya digunakan untuk meniru tampilan style dari website lain yang tentunya lebih menarik. Dengan menggunakan extension CssViewer maka anda dapat melihat seperti ukuran margin, padding dan masih banyak lagi
Pergi bisa mendapatkan mengatakan https. // chrome. Google. com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en-US
5. Aturan Halaman
Page Rules ini digunakan untuk melihat ukuran dalam situs website, tidak hanya mencakup tinggi dan lebar saja, namun bisa melihat dimensi yang digunakan. Dengan menggunakan Page Rules anda dapat lebih tepat melihat ukuran apapun pada layout suatu website
Pergi bisa mendapatkan mengatakan https. // chrome. Google. com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme?hl=en-US
Demikian 5 Chrome Extensions yang Wajib di install untuk Web Designer, semoga dapat membantu dan untuk berkreasi
Perpesanan push menyediakan cara sederhana dan efektif untuk terlibat kembali dengan pengguna Anda. Dalam codelab ini, Anda akan mempelajari cara menambahkan notifikasi push ke aplikasi web Anda
Apa yang akan Anda pelajari
- Cara berlangganan dan berhenti berlangganan pengguna untuk pesan push
- Bagaimana menangani pesan push yang masuk
- Cara menampilkan notifikasi
- Bagaimana menanggapi klik notifikasi
Apa yang Anda butuhkan
- Chrome 52 atau lebih tinggi
- Server Web untuk Chrome, atau server web pilihan Anda sendiri
- Editor teks
- Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools
- Contoh kode (Lihat Menyiapkan. )
2. Bersiaplah
Unduh kode sampel
Ada dua cara untuk mendapatkan kode contoh untuk codelab ini
- Kloning repositori Git
- Unduh file ZIP
file_download Unduh kode sumber
Jika Anda mengunduh sumber sebagai file ZIP, membongkarnya memberi Anda folder root const applicationServerPublicKey = '<Your Public Key>'; 4
Instal dan verifikasi server web
Meskipun Anda bebas menggunakan server web Anda sendiri, codelab ini dirancang untuk bekerja dengan baik dengan aplikasi Server Web untuk Chrome. Jika Anda belum memasang aplikasi itu, Anda bisa mendapatkannya dari Toko Web Chrome
Instal Server Web untuk Chrome
Setelah menginstal aplikasi Server Web untuk Chrome, klik pintasan Aplikasi di bilah bookmark
Di jendela Aplikasi, klik ikon Server Web
Anda akan melihat dialog ini selanjutnya, yang memungkinkan Anda mengonfigurasi server web lokal Anda
Klik tombol Pilih folder, dan pilih folder const applicationServerPublicKey = '<Your Public Key>'; 5 di folder const applicationServerPublicKey = '<Your Public Key>'; 6 yang Anda unduh. Hal ini memungkinkan Anda untuk menayangkan pekerjaan Anda yang sedang berjalan melalui URL yang ditampilkan di bagian URL Server Web pada dialog
Di bawah Opsi, centang kotak di samping Tampilkan indeks secara otomatis. html, seperti yang ditunjukkan di bawah ini
Kemudian hentikan dan mulai ulang server dengan menggeser Web Server. MULAI beralih ke kiri lalu kembali ke kanan
Klik URL Server Web untuk mengunjungi situs Anda di browser web Anda. Anda akan melihat halaman yang terlihat seperti ini — meskipun versi Anda mungkin menampilkan 127. 0. 0. 1. 8887 sebagai alamatnya
Selalu perbarui pekerja layanan
Selama pengembangan, sebaiknya pastikan bahwa pekerja layanan Anda selalu terbarui dan memiliki perubahan terbaru
Untuk mengatur ini di Chrome
- Buka tab Push Codelab
- Buka DevTools. Ctrl-Shift-I di Windows dan Linux, Cmd-Option-I di macOS
- Pilih panel Application, klik tab Service Worker, dan centang kotak Update on Reload. Saat kotak centang ini diaktifkan, pekerja layanan diperbarui secara paksa setiap kali halaman dimuat ulang
3. Daftarkan pekerja layanan
kode selesai
Di direktori const applicationServerPublicKey = '<Your Public Key>'; _5 Anda, perhatikan bahwa Anda memiliki file kosong bernama const applicationServerPublicKey = '<Your Public Key>'; 8. File ini akan menjadi pekerja layanan Anda. Untuk saat ini, itu bisa tetap kosong. Anda akan menambahkan kode ke dalamnya nanti
Pertama, Anda perlu mendaftarkan file ini sebagai pekerja layanan Anda
Halaman const applicationServerPublicKey = '<Your Public Key>'; _9 Anda memuat function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0. Anda mendaftarkan pekerja layanan Anda di file JavaScript ini
Tambahkan kode berikut ke function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _Kode ini memeriksa apakah service worker dan push messaging didukung oleh browser Anda. Jika didukung, kode akan mendaftarkan file const applicationServerPublicKey = '<Your Public Key>'; 8 Anda
Cobalah
Periksa perubahan Anda dengan menyegarkan tab Push Codelab di browser
Periksa konsol di Chrome DevTools untuk function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 3, seperti itu
Dapatkan kunci server aplikasi
Untuk menggunakan codelab ini, Anda perlu membuat kunci server aplikasi. Anda dapat melakukan ini di situs pendamping. web-push-codelab. kesalahan. Saya
Di sini Anda dapat membuat pasangan kunci publik dan pribadi
Salin kunci publik Anda ke function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } _0 menggantikan nilai function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 5
________satu_______Penting. Anda tidak boleh memasukkan kunci pribadi Anda di aplikasi web Anda
4. Inisialisasi status
kode selesai
Saat ini, tombol Aktifkan aplikasi web dinonaktifkan dan tidak dapat diklik. Ini karena merupakan praktik yang baik untuk menonaktifkan tombol push secara default dan mengaktifkannya setelah Anda mengetahui bahwa perpesanan push didukung oleh browser dan Anda dapat memeriksa apakah pengguna saat ini berlangganan perpesanan atau tidak
Anda harus membuat dua fungsi di function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0
- function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 7, untuk memeriksa apakah pengguna saat ini berlangganan
- function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 8, untuk mengaktifkan tombol Anda dan mengubah teks tergantung pada apakah pengguna berlangganan atau tidak
Tambahkan fungsi function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } _7 ke function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 0 seperti ini
function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); }Metode baru Anda menggunakan function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _1 dari langkah sebelumnya, mendapatkan properti function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 2 darinya, dan memanggil function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 3 pada itu
function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _2. function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _3 mengembalikan janji yang diselesaikan dengan langganan saat ini jika ada. Jika tidak, ia mengembalikan function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 6. Dengan ini, Anda dapat memeriksa apakah pengguna sudah berlangganan, menetapkan nilai function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _7, lalu memanggil function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 8 untuk memperbarui tombol
Tambahkan fungsi function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _8 ke function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 0
function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; }Fungsi ini mengaktifkan tombol dan mengubah teks tombol tergantung pada apakah pengguna berlangganan atau tidak
Hal terakhir yang harus dilakukan adalah menelepon navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _1 saat pekerja layanan Anda terdaftar di function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 0
navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); })Cobalah
Muat ulang tab Push Codelab. Anda akan melihat bahwa tombol Enable Push Messaging sekarang diaktifkan (Anda dapat mengkliknya) dan Anda akan melihat navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) 3 di konsol
Saat Anda melanjutkan seluruh codelab ini, Anda akan melihat teks tombol berubah setiap kali Anda berlangganan atau berhenti berlangganan
5. Berlangganan pengguna
kode selesai
Saat ini, tombol Enable Push Messaging tidak berfungsi banyak. Mari kita perbaiki
Dalam fungsi navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _1, tambahkan pendengar klik untuk tombol Anda
function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); }Saat pengguna mengeklik tombol, Anda menonaktifkan tombol hanya untuk memastikan pengguna tidak dapat mengekliknya untuk kedua kalinya, karena berlangganan perpesanan push dapat memakan waktu lama
Kemudian Anda menelepon navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _5 jika pengguna saat ini tidak berlangganan. Untuk ini, Anda harus menempelkan kode berikut ke function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0
Mari kita telusuri apa yang dilakukan kode ini dan bagaimana kode ini membuat pengguna berlangganan perpesanan push
Pertama, Anda mengambil kunci publik server aplikasi, yaitu , dan mengubahnya menjadi navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _7, karena ini adalah input yang diharapkan dari panggilan navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) 8. Fungsi ________32______9 ada di atas function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0
Setelah mengonversi nilainya, Anda memanggil metode navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) 8 pada function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 2 pekerja layanan Anda, meneruskan kunci publik server aplikasi Anda dan nilainya function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 3
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey })Parameter function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } _4 adalah jaminan bahwa Anda akan menampilkan pemberitahuan setiap kali pesan push dikirim. Saat ini, nilai ini diperlukan dan harus benar
Memanggil navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _8 mengembalikan janji yang akan diselesaikan setelah langkah-langkah berikut
- Pengguna telah memberikan izin untuk menampilkan notifikasi
- Browser telah mengirim permintaan jaringan ke layanan push untuk mendapatkan data yang diperlukan untuk menghasilkan function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 6
Janji navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) _8 akan diselesaikan dengan function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } _6 jika langkah-langkah ini berhasil. Jika pengguna tidak memberikan izin atau jika ada masalah dalam berlangganan pengguna, janji akan ditolak dengan kesalahan. Ini memberi Anda rantai janji berikut di codelab Anda
swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); });Dengan ini, Anda mendapatkan langganan dan memperlakukan pengguna sebagai langganan atau menangkap kesalahan dan mencatatnya ke konsol. Dalam kedua skenario, Anda memanggil function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } _8 untuk memastikan bahwa tombol diaktifkan kembali dan memiliki teks yang sesuai
Dalam aplikasi nyata, fungsi function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _0 adalah tempat Anda mengirim data langganan ke backend, tetapi untuk codelab Anda cukup menampilkan langganan di UI. Tambahkan fungsi berikut ke _function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } _0
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _0Cobalah
Buka tab Push Codelab, segarkan halaman, dan klik tombol. Anda akan melihat permintaan izin seperti ini
Jika Anda memberikan izin, Anda akan melihat function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } 2 masuk ke konsol. Teks tombol akan berubah menjadi Disable Push Messaging dan Anda akan dapat melihat langganan sebagai data JSON di bagian bawah halaman
6. Menangani izin ditolak
kode selesai
Satu hal yang belum Anda tangani adalah apa yang terjadi jika pengguna memblokir permintaan izin. Ini memerlukan beberapa pertimbangan unik karena jika pengguna memblokir izin, aplikasi web Anda tidak akan dapat menampilkan kembali permintaan izin dan tidak akan dapat membuat pengguna berlangganan. Anda setidaknya harus menonaktifkan tombol push agar pengguna tahu itu tidak dapat digunakan
Tempat yang jelas untuk menangani skenario ini adalah di fungsi function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 8. Yang perlu Anda lakukan adalah memeriksa nilai function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _4, seperti itu
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _1Anda tahu bahwa jika izinnya adalah function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _5, maka pengguna tidak dapat berlangganan dan tidak ada lagi yang dapat Anda lakukan, jadi menonaktifkan tombol secara permanen adalah pendekatan terbaik
Cobalah
Karena Anda telah memberikan izin untuk aplikasi web Anda dari langkah sebelumnya, Anda perlu mengeklik i dalam lingkaran di bilah URL dan mengubah izin Notifikasi menjadi Gunakan default global (Tanya)
Setelah Anda mengubah pengaturan ini, segarkan halaman dan klik tombol Enable Push Messaging dan pilih Block di dialog izin. Tombol akan dinonaktifkan dan menampilkan teks Push Messaging Blocked
Dengan perubahan ini, Anda sekarang dapat membuat pengguna berlangganan, setelah menangani kemungkinan skenario izin
7. Menangani acara push
kode selesai
Sebelum mempelajari cara mengirim pesan push dari backend, Anda perlu mempertimbangkan apa yang sebenarnya akan terjadi jika pengguna yang berlangganan menerima pesan push
Saat Anda memicu pesan push, browser menerima pesan push, mencari tahu untuk apa service worker push itu, membangunkan service worker tersebut, dan mengirimkan event push. Anda perlu mendengarkan acara ini dan menampilkan pemberitahuan sebagai hasilnya
Tambahkan kode berikut ke file const applicationServerPublicKey = '<Your Public Key>'; _8 Anda
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _2Mari kita telusuri kode ini. Anda sedang mendengarkan function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _7 acara di pekerja layanan Anda dengan menambahkan pendengar acara
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _3(Kecuali jika Anda pernah bermain dengan Pekerja Web sebelumnya, function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _8 mungkin baru. Dalam file pekerja layanan, function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _8 mereferensikan pekerja layanan itu sendiri. )
Saat pesan push diterima, event listener akan dipanggil, dan Anda membuat notifikasi dengan memanggil const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 0 di properti const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 1 dari service worker. const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) _0 membutuhkan const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 3; . (Lencana hanya digunakan di Android pada saat penulisan. )
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _4Hal terakhir yang harus dibahas dalam penanganan acara function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(error) { console.error('Failed to subscribe the user: ', error); updateBtn(); }); } _7 Anda adalah const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 6. Metode ini mengambil janji untuk mengaktifkan browser agar pekerja layanan Anda tetap hidup dan berjalan sampai janji yang diteruskan diselesaikan
Untuk membuat kode di atas sedikit lebih mudah dipahami, Anda dapat menulis ulang seperti itu
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _5Sekarang setelah Anda melewati acara push, mari kita uji acara push
Cobalah
Dengan penanganan peristiwa push di pekerja layanan, Anda dapat memicu peristiwa push palsu untuk menguji apa yang terjadi saat pesan diterima
Di aplikasi web Anda, berlangganan perpesanan push dan pastikan Anda melihat const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 7 di konsol. Di panel Aplikasi di DevTools, di bawah tab Service Worker, klik tombol Push
Setelah Anda mengklik Push, Anda akan melihat pemberitahuan seperti ini
catatan. Jika langkah ini tidak berhasil, coba batalkan pendaftaran pekerja layanan Anda dengan tautan Batalkan Pendaftaran di panel Aplikasi DevTools, tunggu hingga pekerja layanan dihentikan, lalu muat ulang halaman
8. klik notifikasi
kode selesai
Jika Anda mengklik salah satu notifikasi ini, Anda akan melihat bahwa tidak ada yang terjadi. Anda dapat menangani klik notifikasi dengan mendengarkan const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 8 peristiwa di pekerja layanan Anda
Mulailah dengan menambahkan pendengar const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) 8 di const applicationServerPublicKey = '<Your Public Key>'; 8
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _6Saat pengguna mengklik notifikasi, event listener ________48______8 akan dipanggil
Kode pertama menutup notifikasi yang diklik
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _7Kemudian jendela atau tab baru dibuka, memuat URL swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 2. Jangan ragu untuk mengubah ini
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _8const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) _6 memastikan bahwa browser tidak menghentikan pekerja layanan sebelum jendela atau tab baru ditampilkan
Cobalah
Coba picu lagi pesan push di DevTools dan klik notifikasi. Sekarang Anda akan melihat notifikasi ditutup dan tab baru terbuka
9. Kirim pesan push
Anda telah melihat bahwa aplikasi web Anda mampu menampilkan notifikasi menggunakan DevTools dan melihat cara menutup notifikasi dengan sekali klik. Langkah selanjutnya adalah mengirim pesan push yang sebenarnya
Biasanya, ini memerlukan pengiriman langganan dari halaman web ke backend. Backend kemudian akan memicu pesan push dengan melakukan panggilan API ke endpoint dalam langganan
Ini di luar cakupan codelab ini, tetapi Anda dapat menggunakan situs pendamping ( web-push-codelab. kesalahan. saya) untuk memicu pesan push yang sebenarnya. Rekatkan langganan di bagian bawah halaman Anda
Kemudian rekatkan ini ke situs pendamping di area teks Berlangganan ke Kirim Ke
Di bawah Teks untuk Dikirim, tambahkan string apa pun yang ingin Anda kirim dengan pesan push
Klik tombol Kirim pesan dorong
Anda kemudian akan menerima pesan push. Teks yang Anda gunakan akan dicatat ke konsol
Ini akan memberi Anda kesempatan untuk menguji pengiriman dan penerimaan data, dan untuk memanipulasi pemberitahuan sebagai hasilnya
Aplikasi pendamping hanyalah sebuah server simpul yang menggunakan perpustakaan web-push untuk mengirim pesan. Sangat bermanfaat untuk meninjau web-push-libs org di GitHub untuk melihat perpustakaan apa yang tersedia untuk mengirim pesan push untuk Anda. Ini menangani banyak detail untuk memicu pesan push
Anda dapat melihat semua
10. Berhenti berlangganan pengguna
kode selesai
Satu hal yang hilang adalah kemampuan untuk berhenti berlangganan pengguna dari push. Untuk melakukan ini, Anda perlu menghubungi swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); _4 di function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 6
Kembali ke file function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0 Anda, ubah pendengar klik swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 7 di navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; initializeUI(); }) 1 menjadi berikut
if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _9Perhatikan bahwa Anda sekarang akan memanggil fungsi baru swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 9. Dalam fungsi ini, Anda mendapatkan langganan saat ini dan menelepon swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 4 di atasnya. Tambahkan kode berikut ke function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 0
const applicationServerPublicKey = '<Your Public Key>'; _0Mari melangkah melalui fungsi ini
Pertama, Anda mendapatkan langganan saat ini dengan menghubungi function updateBtn() { if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; } pushButton.disabled = false; } 3
const applicationServerPublicKey = '<Your Public Key>'; _1Ini mengembalikan janji yang diselesaikan dengan function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 6 jika ada; . Jika ada langganan, Anda menelepon swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 4 di atasnya, yang membuat function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); updateSubscriptionOnServer(subscription); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } updateBtn(); }); } 6 tidak valid
const applicationServerPublicKey = '<Your Public Key>'; _2Memanggil swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 4 mengembalikan janji, karena butuh waktu untuk menyelesaikannya. Anda mengembalikan janji itu sehingga if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push are supported'); navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg); swRegistration = swReg; }) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; } _08 berikutnya dalam rantai menunggu swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 4 selesai. Anda juga menambahkan catch handler jika memanggil swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; updateBtn(); }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); 4 menghasilkan kesalahan. Setelah ini, Anda dapat memperbarui UI Anda
const applicationServerPublicKey = '<Your Public Key>'; _3Cobalah
Anda harus dapat menekan Enable Push Messaging atau Disable Push Messaging di aplikasi web Anda, dan log akan menampilkan pengguna yang berlangganan dan berhenti berlangganan
sebelas. Selesai
Selamat telah menyelesaikan codelab ini
Codelab ini telah menunjukkan kepada Anda cara memulai dan menjalankan dengan menambahkan notifikasi push ke aplikasi web Anda. Jika Anda ingin mempelajari lebih lanjut tentang apa yang dapat dilakukan notifikasi web, lihat dokumen ini
Jika Anda ingin menerapkan pemberitahuan push di situs Anda, Anda mungkin tertarik untuk menambahkan dukungan untuk browser lama atau browser yang tidak memenuhi standar yang menggunakan GCM. Pelajari lebih lanjut di sini