Trouble using the Javascript Notification API on Google Chrome for Android when attempting to call it directly from a webpage

I've been working with the JavaScript Notification API to display small messages to my users. This feature works perfectly on all desktop browsers I've tested, including Chrome, but for some reason it doesn't work on Chrome for Android (specifically KitKat). Despite claims that Android Chrome started supporting the Notification API in April 2015, and the app having settings for Notification permissions, nothing happens when I try to create a new Notification instance. Even the official Mozilla Notification API demo page fails to display notifications on Android Chrome, despite being able to access permission information.

Does anyone know if there are specific steps or requirements needed to make Notifications compatible with Android Chrome?

javascriptandroidgoogle-chromenotificationsprogressive-web-apps

Answer №1

If you're using Chrome for Android, the only way to open a notification is through a Service Worker. This script runs alongside the browser and can remain active even when the browser or page are closed.

The rationale behind requiring a service worker is that notifications may outlast the browser's session (e.g., if the user closes the browser), so when the user interacts with the notification, Android needs to activate the Service Worker to handle it.

For a comprehensive overview of Notifications in Chrome and on the web, check out this Notification Guide. It covers Push messaging as well as how to set up notifications using a Service Worker.

Although the requirement may seem like an added step, it ultimately ensures that your notifications will still function even when the browser is not actively running.

Answer №2

For checking compatibility, visit this link: http://caniuse.com/#feat=notifications

"Partial Support" As mentioned by Kinlan, it is achievable with Web Service Workers.

navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
  if (result === 'granted') {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.showNotification('Notification with ServiceWorker');
    });
  }
});

The sw.js file can simply be a file with zero bytes.

Credit to: HTML5 Notification not working in Mobile Chrome

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve the body from a GET request using Express?

Every time I attempt to execute my code, it returns an error message indicating invalid text. app.post("/charge", (req, res) => { console.log(req.body) }) ...

javascriptexpress

Issue with Fancybox and Jquery compatibility

I'm encountering some issues with conflicting Javascripts. One script is responsible for creating a dropdown menu, while another set of scripts enable fancybox functionality. However, having both sets of scripts in the header code results in conflicts ...

javascriptjqueryfancybox

"Enhance your website with Zend 1.12's Ajax capabilities and revolutionize

When the user submits a form, I want to trigger Zend validation for that form without refreshing the entire page. My website also utilizes zend_Layout, yet despite consulting numerous tutorials, I have been unable to successfully implement this functionali ...

javascriptjqueryformszend-frameworktwitter-bootstrap-3

Using AngularJS to implement modules in a single controller

Currently, I am in the process of learning Angularjs and have two separate template pages - one for login (login.html) and another for the main content (index.html). To incorporate a chart into my index.html page, I am utilizing a directive from here. Th ...

javascriptangularjs

JavaScript implementation of Content-disposition feature

Is it possible to use client-side JavaScript to make the browser behave the same way as when it encounters "Content-disposition: attachment; filename=..."? This would mean that the data for the file to be saved is only available on the client side. For ex ...

javascriptajaxcontent-disposition

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

javascripthtmlcss

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Working with HTTPS in Angular: A guide to using $http

Can anyone provide guidance on how to handle https + cross-domain URL using $http? I managed to solve my issue using $.ajax, but I prefer using $http because I have an $http interceptor set up to automate certain processes. I've checked out related ...

javascriptajaxangularjsangular-http

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

javascripttypescript

Ensure the accurate port is specified in JavaScript to connect to a WCF service

I am working on a JavaScript project where I need to check which port number a WCF service is hosted on, out of a list of 10 different port numbers. I want to find out which port number the service responds to without any errors using AJAX JSON. Although ...

javascriptajaxjsonwcfservice

Guide on how to update the controller value in AngularJS directive to trigger data retrieval

I currently have multiple controllers responsible for fetching data from the server. One example of such a controller is shown below: var vm = this; var month = 1; loadStatusCount(); function loadStatusCount() { vm.summaryCount = [] ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

Update information interactively in Vuejs for all stored data

I am facing an issue with my code where the totalUserPosts value is returning as Zero after an AJAX call, and I need to find a solution for this problem. new Vue({ el: "#app", data: { totalUserPosts:0, }, methods:{ getPostsAjax () { $.ajax({ ...

javascriptjqueryajaxvue.js

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

javascripthtmlcssiossafari

How to Transfer Data from a Dynamic Drop-down Menu to PHP for Processing and Presentation in a Div Element on the Same Web Page

I've scoured various online resources, including StackOverflow, but haven't been able to find a solution for this issue described in the title. On my base page, I have a dynamically generated dropdown list as shown below: <div class="tipfixtu ...

javascriptphpjqueryhtmlajax

"Access denied" when trying to connect to an abstract Unix socket

Operating System: Android L Server: a native level system server, serviced through an abstract socket. Client: jni in a regular 3rd party application package (APK). Encountering a 'permission denied' error when attempting to connect to the ...

androidsocketspermissions

Transferring information to the specified link using AJAX and PHP

I'm having trouble sending data to a link that I click on. Whenever I try, I just end up with an undefined index error in my PHP file. <a href="output.php"> Click me </a> ('a').click(function(){ href = "output.php"; ...

javascriptphpajaxurl

Utilizing the power of JavaScript to specifically prevent the default behavior within an ASP server control

An ASP.NET server control is used in the code snippet below: <asp:HyperLink Visible='<%# (GetAnswer(Eval("AnsQID"))) != 1 %>' ID="HyperLink1" runat="server" NavigateUrl="#" ToolTip='Like this answer' onclick="javascript:( ...

javascriptjqueryasp.net

The property number will have no effect on the time

Currently, I am in the process of developing an audio player that includes essential functions such as backward, play, and forward buttons. Strangely enough, the backward function operates perfectly fine, but the forward button is not functioning properly ...

javascriptvue.jsvuejs2vuejs3

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user. Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the ...

javascriptcssreactjsdrag-and-drop

Why am I getting an error in Node's mongoose saying that the function is undefined?

I am currently in the process of developing a Node script that will establish a connection with an external server's MongoDB and add a new user. This is pretty basic stuff that I have encountered in numerous tutorials while using localhost. However, I ...

javascriptnode.jsmongodbmongoose