avatarTrevor-Indrek Lasn

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3493

Abstract

get the permission.</code></p><p id="42e8">Unregister, then register the new service worker. A notification prompt will pop up. Grant the service worker the access it needs.</p><figure id="504d"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*SY-yM54Xo7_vSjpMdMHhYA.gif"><figcaption>Handling notification permissions</figcaption></figure><p id="cb29">Upon pressing allow, the browser will save the choice under your settings. At any given time we can revoke the notifications through the settings. Be sure not to abuse the notifications, otherwise, users will revoke permissions and never grant it again.</p><figure id="3bc3"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*P24i-n1L-lXzGbCka0BRug.png"><figcaption><a href="chrome://settings/content/notifications?search=site+settings">brave://settings/content/notifications?search=site+settings</a></figcaption></figure><p id="b296">In case you’re wondering, I’m using the <a href="https://brave.com/">Brave browser.</a> It’s pretty much the same as Chrome but it blocks ads by default and doesn’t have trackers. If you’re not using a Chromium-based browser, a quick search will tell you how to access the notifications settings.</p><h1 id="5e19">What Can We Do With the Notifications?</h1><p id="70ae">Anything we want… well almost. There’s no limit on how often we can send push notifications. Let’s try it out and send one:</p> <figure id="4e1b"> <div> <div>

            <iframe class="gist-iframe" src="/gist/indreklasn/71395d3b85c963886e8bf7067578e305.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="8cdf">The <code>.ready</code> read-only property of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer"><code>ServiceWorkerContai</code>ner</a> interface provides a way of delaying code execution until a service worker is active.</p><figure id="7712"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*MUhCrJnu8ow3aW44-d1jsA.png"><figcaption><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer#Properties">https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer#Properties</a></figcaption></figure><p id="20a7">When we register our new servicer worker, we should see a push notification appear on our screen.</p><figure id="c288"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*yPGGTUNL0R-NXQpANNYbqA.png"><figcaption>Buzz! Buzz!</figcaption></figure><p id="dd3a">Keep the user experience in mind here. Be sure not to abuse this new superpower!</p><h1 id="3809">Check for Browser Support</h1>
    <figure id="d597">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/indreklasn/e8a39f1bb43afa51435efc48e3c7f965.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="9166">Not all browsers support the new notification API yet, thus we have to make sure the notification API exists in the browser.</p><p id="ce4e">If we want the push notification to be reusable and of higher code quality, simply extract it to function:</p>
    <figure id="d096">
        <div>
          <div>
            
            <iframe cl

Options

ass="gist-iframe" src="/gist/indreklasn/6ad0c98ff26773bd05c7c915cd4ae09d.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined"> </div> </div> </figure></iframe></div></div></figure><p id="e437">And now if we reload the service worker:</p><figure id="27bb"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*cgLLTwXIJGqCE3ZVxwWM0w.png"><figcaption></figcaption></figure><p id="4acb">Voila! Reusable Push notifications.</p><figure id="4066"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*DkCx-Yh3aupxCBaG4gJ1QA.png"><figcaption>How Push Works — <a href="https://web-push-book.gauntface.com/chapter-01/02-how-push-works/">https://web-push-book.gauntface.com/chapter-01/02-how-push-works/</a></figcaption></figure><h1 id="3fb0">Browser Support</h1><p id="9e95">The Web Notifications API is a highly experimental technology and is very likely to change in the future. Despite the fragile state of the API, keeping your users up to date can be extremely useful when it comes to applications such as real-time trading, online dating (new matches), or breaking news.</p><figure id="c2f0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*q7AnF6sbww1vZPbYPyszPw.png"><figcaption><a href="https://caniuse.com/#search=notifications">https://caniuse.com/#search=notifications</a></figcaption></figure><p id="218d">Browser support is mostly there but could be better <i>(looking at you iOS Safari, Samsung browser, and Opera Mini). </i>Nobody should care about IE at this time (2019).</p><p id="9c39">If you want to learn Push notification in even greater depth, I found Web Push Book a very useful place.</p><figure id="5bff"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*NuvI-ktX02FAx6vIbMoV6w.png"><figcaption><a href="https://web-push-book.gauntface.com/">https://web-push-book.gauntface.com/</a></figcaption></figure><p id="6f83">Check out the <a href="https://readmedium.com/everything-you-need-to-know-about-pwas-workbox-de5755672fb3">next chapter</a> about workbox and how it can simplify your life.</p><div id="4a99" class="link-block"> <a href="https://readmedium.com/everything-you-need-to-know-about-pwas-workbox-de5755672fb3"> <div> <div> <h2>Everything You Need to Know About PWAs — Workbox</h2> <div><h3>Adding precaching, caching strategies, routing, background sync for your progressive web app will get very complicated…</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*vYDy9mmqlaj1meqfmEY8cA.png)"></div> </div> </div> </a> </div><h2 id="af8d">Play with the code here.</h2><div id="6618" class="link-block"> <a href="https://github.com/indreklasn/pwa-example/tree/part-2"> <div> <div> <h2>indreklasn/pwa-example</h2> <div><h3>Contribute to indreklasn/pwa-example development by creating an account on GitHub.</h3></div> <div><p>github.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/)"></div> </div> </div> </a> </div><p id="9afd">Thanks for reading! ❤</p></article></body>

Everything You Need to Know About PWAs — Push Notifications

Adding push notifications to your app to increase user engagement

This is a series about Progressive Web Apps. If you haven’t yet, please see part one before reading on.

What Are Push Notifications?

A notification is a message that pops up on the user’s device. Notifications can be triggered locally by an open application or they can be “pushed” in real-time from the server to the user, even when the app is not running.

The main idea behind push notifications is to engage users and keep everyone up to date with the latest content or features. For instance, you might get daily notifications from the Medium mobile app, those are push notifications!

https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

Understanding Push Notifications on the Web

Most modern browsers let us push real-time notifications to our users. We do this via the Notifications API.

Notifications API — https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Check for Permission

Once you’ve registered the service worker, you’ll have global access to the Notification API. First, we need to ask the user permission to show notifications:

The requestPermission promise returns one of three values: granted, denied, or default.

Note:Safari Version 12.0.3 still uses callback to get the permission.

Unregister, then register the new service worker. A notification prompt will pop up. Grant the service worker the access it needs.

Handling notification permissions

Upon pressing allow, the browser will save the choice under your settings. At any given time we can revoke the notifications through the settings. Be sure not to abuse the notifications, otherwise, users will revoke permissions and never grant it again.

brave://settings/content/notifications?search=site+settings

In case you’re wondering, I’m using the Brave browser. It’s pretty much the same as Chrome but it blocks ads by default and doesn’t have trackers. If you’re not using a Chromium-based browser, a quick search will tell you how to access the notifications settings.

What Can We Do With the Notifications?

Anything we want… well almost. There’s no limit on how often we can send push notifications. Let’s try it out and send one:

The .ready read-only property of the ServiceWorkerContainer interface provides a way of delaying code execution until a service worker is active.

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer#Properties

When we register our new servicer worker, we should see a push notification appear on our screen.

Buzz! Buzz!

Keep the user experience in mind here. Be sure not to abuse this new superpower!

Check for Browser Support

Not all browsers support the new notification API yet, thus we have to make sure the notification API exists in the browser.

If we want the push notification to be reusable and of higher code quality, simply extract it to function:

And now if we reload the service worker:

Voila! Reusable Push notifications.

How Push Works — https://web-push-book.gauntface.com/chapter-01/02-how-push-works/

Browser Support

The Web Notifications API is a highly experimental technology and is very likely to change in the future. Despite the fragile state of the API, keeping your users up to date can be extremely useful when it comes to applications such as real-time trading, online dating (new matches), or breaking news.

https://caniuse.com/#search=notifications

Browser support is mostly there but could be better (looking at you iOS Safari, Samsung browser, and Opera Mini). Nobody should care about IE at this time (2019).

If you want to learn Push notification in even greater depth, I found Web Push Book a very useful place.

https://web-push-book.gauntface.com/

Check out the next chapter about workbox and how it can simplify your life.

Play with the code here.

Thanks for reading! ❤

Mobile
Progressive Web App
JavaScript
Web Development
Software Development
Recommended from ReadMedium