i want to get more accessible my webabb deployed on Google Apps Script.
I tried to do this adding an embedded manifest:
<link rel="manifest" href='data:application/manifest+json,
{
"name":"SharePoint Title",
"short_name":"SP Title",
"description":"description",
"start_url":"get_script_url",
"icons":[
{
"src":"icon_url",
"sizes":"144x144","type":"image/png"
}
],
"background":"rgb(255,0,0)",
"theme_color":"rgb(255,255,255)",
"display":"fullscreen"
}'>
and this js code (as shown in https://developer.mozilla.org/:
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
But when I can't load the page from any mobile device: Google returns an error.
Does somebody know how could I solve the problem?
Thanks a lot
Related
After extensive searching I discovered Rob's answer: https://stackoverflow.com/a/11614440/7907844 that "webstore cannot be scripted by extensions".
I only want to extract the URL and pass it to the extension. Is there no way to achieve this?
Could I query all opened tabs from background script, and keep the active tab URL in a variable accessible to extension?
I ended up implementing background script that saves currently active tab URL in a variable that I access from within a popup.js because webstore doesn't allow us to run content scripts there. chrome.extension.getBackgroundPage() inside popup.js only worked when I used var currentUrl.
var currentUrl;
var activeTabId;
chrome.tabs.onUpdated.addListener(
function (tabId, changeInfo, tab) {
if (changeInfo.status === "complete") {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
let activeTab = tabs[0];
currentUrl = activeTab.url;
activeTabId = activeTab.id;
if(currentUrl.includes("chrome.google.com/webstore/detail")) {
chrome.pageAction.show(activeTab.id);
} else {
chrome.pageAction.hide(activeTab.id);
}
console.log("page loaded: ", currentUrl);
});
}
});
chrome.tabs.onActivated.addListener(function (object) {
activeTabId = object.tabId;
chrome.tabs.get(activeTabId, function(tab){
currentUrl = tab.url;
if(tab.url.includes("chrome.google.com/webstore/detail")) {
chrome.pageAction.show(object.tabId);
} else {
chrome.pageAction.hide(object.tabId);
}
console.log("loaded tab selected: ", tab.url);
})
});
I'm trying to catch push notifications that get sent to my chrome browser with a chrome extension to then write it to a file or run code on receiving it.
I'm sure the issue I'm having is simple enough for some of you so I will share what I've found so far and my code.
notifhook.js
(function() {
// save the original function
var origCreateNotif = notifications.createNotification;
// overwrite createNotification with a new function
notifications.createNotification = function(img, title, body) {
// call the original notification function
var result = origCreateNotif.apply(this, arguments);
alert("Function was called");
// bind a listener for when the notification is displayed
result.addEventListener("display", function() {
alert("Triggered code");
// do something when the notification is displayed
});
return result;
}
})()
manifest.json
{
"name": "Push",
"description": "Relay push notifications",
"version": "3.0",
"permissions": ["notifications"],
"web_accessible_resources": ["notifhook.js"],
"content_scripts" : [{
"run_at" : "document_start",
"matches" : ["<all_urls>"],
"js" : ["inject.js"]
}],
"manifest_version": 2
}
inject.js
var s = document.createElement("script");
s.src = chrome.extension.getURL("notifhook.js");
document.documentElement.appendChild(s);
Most of the code used was taken here :
How can I listen to notifications?
I am using this webapp to test my extension :
http://ttsvetko.github.io/HTML5-Desktop-Notifications/
So, to my knowledge what is happening so far is that the block containing my main function is being added to the webpage just fine
since I can alert at the start of it and on every page load it will be triggered.
What is failing is when I receive a push notification the event listener isn't working or my function names are wrong. I read somewhere that webkitNotifications was replaced with just 'notifications'.
Any help is much appreciated.
If the code is in service worker, like when there are notifications when you close the browser tab/window for the app (like on facebook) then you need to overwirte registration of service worker.
// taken from https://googlechrome.github.io/samples/service-worker/post-message/index.html
function sendMessage(message) {
return new Promise(function(resolve, reject) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
if (event.data.error) {
reject(event.data.error);
} else {
resolve(event.data);
}
};
navigator.serviceWorker.controller.postMessage(message,
[messageChannel.port2]);
});
}
(function() {
if ('serviceWorker' in navigator) {
var register = navigator.serviceWorker.register;
navigator.serviceWorker.register = function() {
register.call(navigator.serviceWorker, "yourscript.js").then(function() {
sendMessage({args: [].slice.call(arguments)});
});
};
}
})();
and in service worker (yourscript.js) you need to call importScript with original script taken from post message
// put content of notifhook.js file here
self.addEventListener('message', function handler(event) {
if (event.data && event.data.args && event.data.args.length) {
importScripts(event.data.args[0]); // import original script
self.removeEventListener('message', handler);
}
});
I build an html/js application (a progressive web app) with Polymer and polymer-cli and the well generated service-worker for caching and offline.
I wonder how to notify the user when a new version of the application is available and invite him to restart browser.
any ideas ?
Edit
a talk at IO2016 where Eric Bidel talk about service worker and notify user about new version of an application :
https://youtu.be/__KvYxcIIm8?list=PLOU2XLYxmsILe6_eGvDN3GyiodoV3qNSC&t=1510
Need to check the google IO Web source code
References:
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
https://classroom.udacity.com/courses/ud899
// page script
document.addEventListener('DOMContentLoaded', function(){
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function(registration) {
console.info('ServiceWorker registration successful with scope:', registration.scope);
// if there's no controller, this page wasn't loaded
// via a service worker, so they're looking at the latest version.
// In that case, exit early
if (!navigator.serviceWorker.controller) return;
// if there's an updated worker already waiting, update
if (registration.waiting) {
console.info('show toast and upon click update...');
registration.waiting.postMessage({ updateSw: true });
return;
}
// if there's an updated worker installing, track its
// progress. If it becomes "installed", update
if (registration.installing) {
registration.addEventListener('statechange', function(){
if (registration.installing.state == 'installed'){
console.info('show toast and upon click update...');
registration.installing.postMessage({ updateSw: true });
return;
}
});
}
// otherwise, listen for new installing workers arriving.
// If one arrives, track its progress.
// If it becomes "installed", update
registration.addEventListener('updatefound', function(){
let newServiceWorker = registration.installing;
newServiceWorker.addEventListener('statechange', function() {
if (newServiceWorker.state == 'installed') {
console.info('show toast and upon click update...');
newServiceWorker.postMessage({ updateSw: true });
}
});
});
})
.catch(function(error) {
console.info('ServiceWorker registration failed:', error);
});
navigator.serviceWorker.addEventListener('controllerchange', function() {
window.location.reload();
});
}
});
// sw script
self.addEventListener('message', function(e) {
if (e.data.updateSw){
self.skipWaiting();
}
});
Thanks to IO team .. we need to check if the current service-worker becomes redundant
// Check to see if the service worker controlling the page at initial load
// has become redundant, since this implies there's a new service worker with fresh content.
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.onstatechange = function(event) {
if (event.target.state === 'redundant') {
// Define a handler that will be used for the next io-toast tap, at which point it
// be automatically removed.
const tapHandler = function() {
window.location.reload();
};
if (IOWA.Elements && IOWA.Elements.Toast &&
IOWA.Elements.Toast.showMessage) {
IOWA.Elements.Toast.showMessage(
'A new version of this app is available.', tapHandler, 'Refresh',
null, 0); // duration 0 indications shows the toast indefinitely.
} else {
tapHandler(); // Force reload if user never was shown the toast.
}
}
};
}
I have a common serviceworker escenario, where I want catch a notification click and focus the tab where the notification has come from. However, clients variable is always empty, its lenght is 0
console.log("sw startup");
self.addEventListener('install', function (event) {
console.log("SW installed");
});
self.addEventListener('activate', function (event) {
console.log("SW activated");
});
self.addEventListener("notificationclick", function (e) {
// Android doesn't automatically close notifications on click
console.log(e);
e.notification.close();
// Focus tab if open
e.waitUntil(clients.matchAll({
type: 'window'
}).then(function (clientList) {
console.log("clients:" + clientList.length);
for (var i = 0; i < clientList.length; ++i) {
var client = clientList[i];
if (client.url === '/' && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow('/');
}
}));
});
And the registration is this one:
this.doNotify = function (notification) {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function (reg) {
requestCreateNotification(notification, reg);
}, function (err) {
console.log('sw reg error:' + err);
});
}
...
}
chrome://serviceworker-internals/ output shows that registration and installation are fine. However, when a notification is pushed, clientList is empty. I have tried removing the filter type:'window' but the result is still the same. As clients are empty, a new window is always opened. What am I doing wrong?
The suspicion in your own comment is correct. A page is controlled by a service worker on navigation to an origin that the service worker is registered for. So the original page load that actually initializes the service worker is not itself controlled. That's why the worker only finds your tab once you visit with a new tab or do a refresh.
However (as Jeff Posnick points out in the comments) you can get uncontrolled pages as follows: ServiceWorkerClients.matchAll({includeUncontrolled: true, type: 'window'}).
Try making the service worker immediately claim the page.
E.g.:
self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));
For a more complex example, see https://serviceworke.rs/immediate-claim.html.
I'm tring to use the web notifications API like in this example:
http://www.inserthtml.com/2013/10/notification-api/?utm_source=html5weekly&utm_medium=email
When i'm in this website, everything is working great, in the console i'm writing "Notification.permission" and gets "granted".
But if i'm trying to do the same in my website, i'm getting error about the Notification object and when i'm trying to print "Notification.permission" i've noticed that the Notification object doesn't have this property and other properties like "requestPermition".
This happening in all the browsers and they all updated to the last version.
i've tried to open console in other websites, like cnn.com for example, and inspect the Notifications object, and also there are missing properties.
Any idea why?? and how its working the website above??
thanks.
this is my code:
window.addEventListener('load', function(){
var button = document.getElementById( "notifications" );
function theNotification() {
var n = new Notification("Hi!", {
});
}
// When the button is clicked
button.addEventListener('click', function () {
// If they are not denied (i.e. default)
if (Notification && Notification.permission !== "denied") {
// Request permission
Notification.requestPermission( function( status ){
// Change based on user's decision
if (Notification.permission !== status)
Notification.permission = status;
});
}
});
$(button).click();
var socket = io.connect('http://localhost:3000', {query : "user=343"});
socket.on('notification', function (data) {
console.log( data );
if (Notification && Notification.permission === "granted") {
theNotification();
} else {
alert(data);
}
});
});