{"id":3270,"date":"2026-11-05T10:13:29","date_gmt":"2026-11-05T04:43:29","guid":{"rendered":"https:\/\/larapush.com\/blog\/?p=3270"},"modified":"2026-11-05T10:13:29","modified_gmt":"2026-11-05T04:43:29","slug":"service-worker-for-web-push","status":"publish","type":"post","link":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/","title":{"rendered":"How to Set Up a Service Worker for Web Push Notifications"},"content":{"rendered":"\n<p><strong>To set up a service worker for web push notifications, create a sw.js file at your site root, register it with navigator.serviceWorker.register(), ask for permission after a user action, subscribe with pushManager.subscribe() using your VAPID public key, and handle the push and notificationclick events.<\/strong> Your site must use HTTPS.<\/p>\n\n\n\n<p>The service worker is the piece that makes web push work when your tab is closed. It&#8217;s a JavaScript file the browser runs in the background, separate from your page. When a push message arrives, the browser wakes the service worker, and the worker shows the notification. Below I walk through the minimum working setup, the scope rules that trip people up, and how to test it. The code follows the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Push_API\" target=\"_blank\" rel=\"noreferrer noopener\">Push API<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\" target=\"_blank\" rel=\"noreferrer noopener\">Notifications API<\/a> as documented on MDN.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_63 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#What_is_a_service_worker_in_web_push\" title=\"What is a service worker in web push?\">What is a service worker in web push?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#What_do_you_need_before_you_start\" title=\"What do you need before you start?\">What do you need before you start?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#How_do_you_set_up_a_service_worker_for_web_push_step_by_step\" title=\"How do you set up a service worker for web push, step by step?\">How do you set up a service worker for web push, step by step?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Step_1_Create_swjs_at_your_site_root\" title=\"Step 1: Create sw.js at your site root\">Step 1: Create sw.js at your site root<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Step_2_Register_the_service_worker\" title=\"Step 2: Register the service worker\">Step 2: Register the service worker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Step_3_Ask_for_permission_after_a_user_action\" title=\"Step 3: Ask for permission after a user action\">Step 3: Ask for permission after a user action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Step_4_Subscribe_with_your_VAPID_public_key\" title=\"Step 4: Subscribe with your VAPID public key\">Step 4: Subscribe with your VAPID public key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Step_5_Save_the_subscription_and_send_a_test\" title=\"Step 5: Save the subscription and send a test\">Step 5: Save the subscription and send a test<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#What_is_service_worker_scope_and_why_does_it_matter\" title=\"What is service worker scope and why does it matter?\">What is service worker scope and why does it matter?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#How_do_you_test_and_debug_a_push_service_worker\" title=\"How do you test and debug a push service worker?\">How do you test and debug a push service worker?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Do_service_workers_for_push_work_on_iPhone\" title=\"Do service workers for push work on iPhone?\">Do service workers for push work on iPhone?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Where_does_LaraPush_fit\" title=\"Where does LaraPush fit?\">Where does LaraPush fit?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#Frequently_asked_questions\" title=\"Frequently asked questions\">Frequently asked questions<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_service_worker_in_web_push\"><\/span>What is a service worker in web push?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A service worker is a background script that receives push messages and displays notifications for your site, even when no tab is open. It sits between the browser&#8217;s push service and your visitor&#8217;s screen.<\/p>\n\n\n\n<p>Here&#8217;s the flow in one line: your server sends an encrypted message to the push service, such as Firebase Cloud Messaging (FCM) for Chrome. The push service delivers it to the browser. The browser then starts your service worker and fires a push event. Your code in that event calls showNotification(), and the alert appears. If you&#8217;d like the bigger picture first, read <a href=\"https:\/\/larapush.com\/blog\/what-are-web-push-notifications\/\">what web push notifications are<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_do_you_need_before_you_start\"><\/span>What do you need before you start?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You need four things before writing any code: HTTPS, a VAPID key pair, a server endpoint that saves subscriptions, and access to your site&#8217;s root folder.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Requirement<\/th><th>Why it matters<\/th><\/tr><\/thead><tbody><tr><td>HTTPS<\/td><td>Service workers only run in secure contexts (localhost is allowed for testing)<\/td><\/tr><tr><td>VAPID key pair<\/td><td>The public key goes in the browser code; the private key signs messages on your server<\/td><\/tr><tr><td>Subscription endpoint<\/td><td>Your server must store each browser&#8217;s subscription to send to it later<\/td><\/tr><tr><td>Root folder access<\/td><td>A worker&#8217;s default scope is the folder it&#8217;s served from<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>If you&#8217;re unsure about keys, see <a href=\"https:\/\/larapush.com\/blog\/vapid-keys-web-push\/\">what VAPID keys are<\/a>. The scope rule matters most, so I cover it in its own section below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_you_set_up_a_service_worker_for_web_push_step_by_step\"><\/span>How do you set up a service worker for web push, step by step?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You set up a push service worker in five steps: create the file, register it, ask permission, subscribe, and send the subscription to your server.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Create_swjs_at_your_site_root\"><\/span>Step 1: Create sw.js at your site root<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Create a file named sw.js and serve it from the root, for example https:\/\/example.com\/sw.js. This version shows a notification for each push and opens a URL on click.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ sw.js\nself.addEventListener('push', (event) =&gt; {\n  const data = event.data ? event.data.json() : {};\n  const title = data.title || 'New update';\n  event.waitUntil(\n    self.registration.showNotification(title, {\n      body: data.body || '',\n      icon: data.icon || '\/icon-192.png',\n      data: { url: data.url || '\/' }\n    })\n  );\n});\n\nself.addEventListener('notificationclick', (event) =&gt; {\n  event.notification.close();\n  event.waitUntil(clients.openWindow(event.notification.data.url));\n});<\/code><\/pre>\n\n\n\n<p>Notice the event.waitUntil() calls. They tell the browser to keep the worker alive until the notification is shown or the window opens. Without them, the browser may stop the worker early.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Register_the_service_worker\"><\/span>Step 2: Register the service worker<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Register the worker from your page&#8217;s JavaScript. Check for support first, so older browsers fail quietly.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ('serviceWorker' in navigator &amp;&amp; 'PushManager' in window) {\n  navigator.serviceWorker.register('\/sw.js');\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Ask_for_permission_after_a_user_action\"><\/span>Step 3: Ask for permission after a user action<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ask for notification permission from a click handler, such as a &#8220;Get alerts&#8221; button, rather than on page load. Safari requires a user gesture for the prompt, and Chrome may show a quieter prompt on sites that ask too early.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>button.addEventListener('click', async () =&gt; {\n  const permission = await Notification.requestPermission();\n  if (permission === 'granted') subscribe();\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Subscribe_with_your_VAPID_public_key\"><\/span>Step 4: Subscribe with your VAPID public key<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Call pushManager.subscribe() with userVisibleOnly set to true and your public key as applicationServerKey. Chrome requires userVisibleOnly: true, which promises that every push shows a notification.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function subscribe() {\n  const reg = await navigator.serviceWorker.ready;\n  const sub = await reg.pushManager.subscribe({\n    userVisibleOnly: true,\n    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)\n  });\n  await fetch('\/api\/push\/subscribe', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application\/json' },\n    body: JSON.stringify(sub)\n  });\n}<\/code><\/pre>\n\n\n\n<p>The urlBase64ToUint8Array helper converts the base64url key into bytes. Most web push libraries and tutorials include a copy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Save_the_subscription_and_send_a_test\"><\/span>Step 5: Save the subscription and send a test<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Store the subscription JSON (endpoint plus p256dh and auth keys) on your server. Then send a test message with a Web Push library. In PHP or Laravel, my guide on <a href=\"https:\/\/larapush.com\/blog\/send-web-push-php-laravel\/\">how to send web push from PHP or Laravel<\/a> has the server-side code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_service_worker_scope_and_why_does_it_matter\"><\/span>What is service worker scope and why does it matter?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Scope is the set of URLs a service worker controls, and by default it&#8217;s the folder the file is served from. A worker at \/sw.js controls the whole site, while one at \/js\/sw.js only controls pages under \/js\/.<\/p>\n\n\n\n<p>For push, scope affects which registration your page finds and subscribes with. Serving sw.js from the root is the simplest fix. If you can&#8217;t, the server can send a Service-Worker-Allowed header to widen the scope, as described in the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ServiceWorkerContainer\/register\" target=\"_blank\" rel=\"noreferrer noopener\">ServiceWorkerContainer.register() docs on MDN<\/a>. Also avoid running two push workers on the same scope. That conflict is a common reason one tool&#8217;s notifications stop after you install another.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_you_test_and_debug_a_push_service_worker\"><\/span>How do you test and debug a push service worker?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You test a push service worker in your browser&#8217;s developer tools. In Chrome, open DevTools, go to Application, then Service workers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Check the status.<\/strong> The worker should show as activated and running, with the right scope.<\/li>\n\n\n\n<li><strong>Send a test push.<\/strong> The Push button in that panel fires a push event with sample text.<\/li>\n\n\n\n<li><strong>Update on reload.<\/strong> Tick &#8220;Update on reload&#8221; while you edit sw.js, so changes apply right away.<\/li>\n\n\n\n<li><strong>Read the console.<\/strong> Errors inside the push handler appear in the worker&#8217;s own console.<\/li>\n<\/ul>\n\n\n\n<p>If notifications still don&#8217;t appear, work through my checklist on <a href=\"https:\/\/larapush.com\/blog\/web-push-notifications-not-showing\/\">why web push notifications are not showing<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Do_service_workers_for_push_work_on_iPhone\"><\/span>Do service workers for push work on iPhone?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Yes, from iOS and iPadOS 16.4, but only for web apps added to the Home Screen. Apple&#8217;s <a href=\"https:\/\/webkit.org\/blog\/13878\/web-push-for-web-apps-on-ios-and-ipados\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebKit announcement<\/a> explains that a site needs a web app manifest, and the user adds it to the Home Screen before allowing notifications. Full details are in <a href=\"https:\/\/larapush.com\/blog\/iphone-push-notifications-without-app\/\">iPhone push notifications without an app<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Where_does_LaraPush_fit\"><\/span>Where does LaraPush fit?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you&#8217;d rather not maintain this code yourself, LaraPush gives you the JavaScript snippet and service worker file to add to your site, or you can use the free WordPress plugin. Subscriptions are stored on your own server, and you send from the panel. Trade-offs: you run a VPS, a licence covers one server, and there&#8217;s no free plan. See the <a href=\"https:\/\/larapush.com\/guide\/\">setup guide<\/a>, the <a href=\"https:\/\/larapush.com\/features\/\">features<\/a> and <a href=\"https:\/\/larapush.com\/pricing\/\">pricing<\/a>. For other options, check the <a href=\"https:\/\/larapush.com\/blog\/best-push-notification-services-and-tools\/\">best push notification services and tools<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1762410000000\"><strong class=\"schema-faq-question\">How do I set up a service worker for push notifications?<\/strong> <p class=\"schema-faq-answer\">Create a sw.js file at your site root with push and notificationclick event handlers. Register it with navigator.serviceWorker.register(&#8216;\/sw.js&#8217;), ask for permission after a click, subscribe with pushManager.subscribe() using your VAPID public key, and send the subscription to your server.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1762410001111\"><strong class=\"schema-faq-question\">Where should the service worker file go?<\/strong> <p class=\"schema-faq-answer\">Put it at the root of your domain, such as https:\/\/example.com\/sw.js. A service worker only controls URLs in the folder it&#8217;s served from and below. If it must live in a subfolder, your server can send a Service-Worker-Allowed header to widen the scope.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1762410002222\"><strong class=\"schema-faq-question\">Why does Chrome need userVisibleOnly set to true?<\/strong> <p class=\"schema-faq-answer\">Chrome only allows push subscriptions that promise to show a notification for every message, so pushManager.subscribe() must pass userVisibleOnly: true. If your push handler doesn&#8217;t show a notification, Chrome may display a generic message saying the site was updated in the background.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1762410003333\"><strong class=\"schema-faq-question\">Can I use two push services on the same website?<\/strong> <p class=\"schema-faq-answer\">It&#8217;s risky. Two push tools that register service workers on the same scope can replace each other, so one tool&#8217;s notifications stop. If you need both, keep them on separate scopes or merge the handlers into one worker. Most sites should pick one push provider.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1762410004444\"><strong class=\"schema-faq-question\">Does a push service worker slow down my site?<\/strong> <p class=\"schema-faq-answer\">Not noticeably. The worker runs in the background on a separate thread and only wakes for events such as push and notificationclick. A minimal push worker is a few kilobytes. Load your registration script asynchronously so it doesn&#8217;t block page rendering.<\/p> <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"How to set up a service worker for web push notifications: create sw.js, register it, ask permission, subscribe with VAPID and handle clicks.","protected":false},"author":7,"featured_media":3276,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[68],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Set Up a Service Worker for Web Push Notifications<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Up a Service Worker for Web Push Notifications\" \/>\n<meta property=\"og:description\" content=\"How to set up a service worker for web push notifications: create sw.js, register it, ask permission, subscribe with VAPID and handle clicks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\" \/>\n<meta property=\"og:site_name\" content=\"LaraPush Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-05T04:43:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ritesh Das\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ritesh Das\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\"},\"author\":{\"name\":\"Ritesh Das\",\"@id\":\"https:\/\/larapush.com\/blog\/#\/schema\/person\/4f23894f98426ea3a6bd617e59f03bbd\"},\"headline\":\"How to Set Up a Service Worker for Web Push Notifications\",\"datePublished\":\"2026-11-05T04:43:29+00:00\",\"dateModified\":\"2026-11-05T04:43:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\"},\"wordCount\":1325,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/larapush.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg\",\"articleSection\":[\"How to\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\",\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\",\"name\":\"How to Set Up a Service Worker for Web Push Notifications\",\"isPartOf\":{\"@id\":\"https:\/\/larapush.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg\",\"datePublished\":\"2026-11-05T04:43:29+00:00\",\"dateModified\":\"2026-11-05T04:43:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000\"},{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111\"},{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222\"},{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333\"},{\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage\",\"url\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg\",\"contentUrl\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg\",\"width\":1200,\"height\":675,\"caption\":\"Illustration of a service worker for web push, a gear-shaped worker between a push service and a browser notification\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/larapush.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Set Up a Service Worker for Web Push Notifications\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/larapush.com\/blog\/#website\",\"url\":\"https:\/\/larapush.com\/blog\/\",\"name\":\"LaraPush Blog\",\"description\":\"Stay Ahead, Stay Notified with LaraPush!\",\"publisher\":{\"@id\":\"https:\/\/larapush.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/larapush.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/larapush.com\/blog\/#organization\",\"name\":\"LaraPush\",\"url\":\"https:\/\/larapush.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/larapush.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2022\/05\/LARAPUSH.png\",\"contentUrl\":\"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2022\/05\/LARAPUSH.png\",\"width\":280,\"height\":60,\"caption\":\"LaraPush\"},\"image\":{\"@id\":\"https:\/\/larapush.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/larapush.com\/blog\/#\/schema\/person\/4f23894f98426ea3a6bd617e59f03bbd\",\"name\":\"Ritesh Das\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/larapush.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1bd7bb0ba68e36b218587b72e89e511f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1bd7bb0ba68e36b218587b72e89e511f?s=96&d=mm&r=g\",\"caption\":\"Ritesh Das\"},\"url\":\"https:\/\/larapush.com\/blog\/author\/riteshdas\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000\",\"position\":1,\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000\",\"name\":\"How do I set up a service worker for push notifications?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Create a sw.js file at your site root with push and notificationclick event handlers. Register it with navigator.serviceWorker.register('\/sw.js'), ask for permission after a click, subscribe with pushManager.subscribe() using your VAPID public key, and send the subscription to your server.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111\",\"position\":2,\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111\",\"name\":\"Where should the service worker file go?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Put it at the root of your domain, such as https:\/\/example.com\/sw.js. A service worker only controls URLs in the folder it's served from and below. If it must live in a subfolder, your server can send a Service-Worker-Allowed header to widen the scope.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222\",\"position\":3,\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222\",\"name\":\"Why does Chrome need userVisibleOnly set to true?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Chrome only allows push subscriptions that promise to show a notification for every message, so pushManager.subscribe() must pass userVisibleOnly: true. If your push handler doesn't show a notification, Chrome may display a generic message saying the site was updated in the background.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333\",\"position\":4,\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333\",\"name\":\"Can I use two push services on the same website?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"It's risky. Two push tools that register service workers on the same scope can replace each other, so one tool's notifications stop. If you need both, keep them on separate scopes or merge the handlers into one worker. Most sites should pick one push provider.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444\",\"position\":5,\"url\":\"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444\",\"name\":\"Does a push service worker slow down my site?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not noticeably. The worker runs in the background on a separate thread and only wakes for events such as push and notificationclick. A minimal push worker is a few kilobytes. Load your registration script asynchronously so it doesn't block page rendering.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Up a Service Worker for Web Push Notifications","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Up a Service Worker for Web Push Notifications","og_description":"How to set up a service worker for web push notifications: create sw.js, register it, ask permission, subscribe with VAPID and handle clicks.","og_url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/","og_site_name":"LaraPush Blog","article_published_time":"2026-11-05T04:43:29+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg","type":"image\/jpeg"}],"author":"Ritesh Das","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ritesh Das","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#article","isPartOf":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/"},"author":{"name":"Ritesh Das","@id":"https:\/\/larapush.com\/blog\/#\/schema\/person\/4f23894f98426ea3a6bd617e59f03bbd"},"headline":"How to Set Up a Service Worker for Web Push Notifications","datePublished":"2026-11-05T04:43:29+00:00","dateModified":"2026-11-05T04:43:29+00:00","mainEntityOfPage":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/"},"wordCount":1325,"commentCount":0,"publisher":{"@id":"https:\/\/larapush.com\/blog\/#organization"},"image":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage"},"thumbnailUrl":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg","articleSection":["How to"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/","url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/","name":"How to Set Up a Service Worker for Web Push Notifications","isPartOf":{"@id":"https:\/\/larapush.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage"},"image":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage"},"thumbnailUrl":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg","datePublished":"2026-11-05T04:43:29+00:00","dateModified":"2026-11-05T04:43:29+00:00","breadcrumb":{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000"},{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111"},{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222"},{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333"},{"@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/larapush.com\/blog\/service-worker-for-web-push\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#primaryimage","url":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg","contentUrl":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2026\/11\/service-worker-for-web-push.jpg","width":1200,"height":675,"caption":"Illustration of a service worker for web push, a gear-shaped worker between a push service and a browser notification"},{"@type":"BreadcrumbList","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/larapush.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Set Up a Service Worker for Web Push Notifications"}]},{"@type":"WebSite","@id":"https:\/\/larapush.com\/blog\/#website","url":"https:\/\/larapush.com\/blog\/","name":"LaraPush Blog","description":"Stay Ahead, Stay Notified with LaraPush!","publisher":{"@id":"https:\/\/larapush.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/larapush.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/larapush.com\/blog\/#organization","name":"LaraPush","url":"https:\/\/larapush.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/larapush.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2022\/05\/LARAPUSH.png","contentUrl":"https:\/\/larapush.com\/blog\/wp-content\/uploads\/2022\/05\/LARAPUSH.png","width":280,"height":60,"caption":"LaraPush"},"image":{"@id":"https:\/\/larapush.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/larapush.com\/blog\/#\/schema\/person\/4f23894f98426ea3a6bd617e59f03bbd","name":"Ritesh Das","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/larapush.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1bd7bb0ba68e36b218587b72e89e511f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1bd7bb0ba68e36b218587b72e89e511f?s=96&d=mm&r=g","caption":"Ritesh Das"},"url":"https:\/\/larapush.com\/blog\/author\/riteshdas\/"},{"@type":"Question","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000","position":1,"url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410000000","name":"How do I set up a service worker for push notifications?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Create a sw.js file at your site root with push and notificationclick event handlers. Register it with navigator.serviceWorker.register('\/sw.js'), ask for permission after a click, subscribe with pushManager.subscribe() using your VAPID public key, and send the subscription to your server.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111","position":2,"url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410001111","name":"Where should the service worker file go?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Put it at the root of your domain, such as https:\/\/example.com\/sw.js. A service worker only controls URLs in the folder it's served from and below. If it must live in a subfolder, your server can send a Service-Worker-Allowed header to widen the scope.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222","position":3,"url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410002222","name":"Why does Chrome need userVisibleOnly set to true?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Chrome only allows push subscriptions that promise to show a notification for every message, so pushManager.subscribe() must pass userVisibleOnly: true. If your push handler doesn't show a notification, Chrome may display a generic message saying the site was updated in the background.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333","position":4,"url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410003333","name":"Can I use two push services on the same website?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"It's risky. Two push tools that register service workers on the same scope can replace each other, so one tool's notifications stop. If you need both, keep them on separate scopes or merge the handlers into one worker. Most sites should pick one push provider.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444","position":5,"url":"https:\/\/larapush.com\/blog\/service-worker-for-web-push\/#faq-question-1762410004444","name":"Does a push service worker slow down my site?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Not noticeably. The worker runs in the background on a separate thread and only wakes for events such as push and notificationclick. A minimal push worker is a few kilobytes. Load your registration script asynchronously so it doesn't block page rendering.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/posts\/3270"}],"collection":[{"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/comments?post=3270"}],"version-history":[{"count":1,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/posts\/3270\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/posts\/3270\/revisions\/3277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/media\/3276"}],"wp:attachment":[{"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/media?parent=3270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/categories?post=3270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/larapush.com\/blog\/wp-json\/wp\/v2\/tags?post=3270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}