Send message from web page to chrome extension - javascript

I want to be able to send a message from my web app to my chrome extension so it can easier to use (send the auth token so users dont have to login twice). However after looking at the documentation and reading a bunch of SO questions, I cannot get anything working for me.
Here's some parts my manifest.json:
"content_security_policy": "script-src 'self' https://330218550995.ngrok.io; object-src 'self'",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"externally_connectable": {
"matches": [
"*://localhost/*",
"*://*.ngrok.io/*"
]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"exclude_matches": [
"*://*.olympiatasks.com/*",
"https://app.olympiatasks.com/*",
"https://*.olympiatasks.com/*"
],
"css": ["/static/css/main.css"],
"js": [
"/static/js/runtime-main.js",
"/static/js/2.js",
"/static/js/main.js"
]
}
],
Inside of the content script I do this:
const ExtensionID = process.env.REACT_APP_EXTENSION_ID || '';
chrome?.runtime.connect(ExtensionID, { name: 'example' });
chrome?.runtime?.sendMessage('Hi from content script')
Inside of the web page I do this:
const ExtensionID = process.env.REACT_APP_EXTENSION_ID || "";
chrome.runtime.connect(ExtensionID, { name: "example" });
chrome?.runtime?.sendMessage(ExtensionID, "Hi from app");
Then here is the listener in the background.js:
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log({ request })
});
chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
console.log("Received message from " + sender + ": ", request);
sendResponse({ received: true }); //respond however you like
});
When I open the website, the extension is successfully injected and in the dev console of the background.js page I get the following:
Hello world from background.js
{request: "Hi from content script"}
The "hi from app" is missing which means it's not being sent/received. I used ngrok to setup forwarding to my app thinking that either:
The domain being localhost
The protocol not being https
could be the problem but as you guess, no luck.
So far I have done the following:
Setup my externally_connectable inside my manifest.json
Setup the onMessageExternal listener in the background.js
Call runtime.sendMessage with the Extension ID like shown in the docs
Used an https website for secure connection
Any help on this issue is greatly appreciated

We can synchronize the authentication token between the website and chrome extension using content-script and background js file.
Inside web page I do this
...
I am not sure how you did it on the web page
Here is what I did to send access token from web page to extension.
Here is my content-script file.
/* eslint-disable no-undef */
const hostScript = () => {
// ----------------- Function Declarations -----------------
let listenGetTokenResponseFromWindow = () => {};
const sendMessagesToExtension = (msg, callback = null) => {
chrome.runtime.sendMessage(msg);
};
const sendMessagesToWindow = (msg, callback = null) => {
const { type } = msg;
switch (type) {
case ExtensionMessagesTypes.GetTokenFromWindow:
// Can not pass the function with window.postMessage. Only JSON object can be passed.
// So reset the listener
window.postMessage(msg, document.location.origin);
window.removeEventListener("message", listenGetTokenResponseFromWindow);
listenGetTokenResponseFromWindow = event => {
if (event.source !== window) return;
if (event.data.type === ExtensionMessagesTypes.GetTokenFromWindowResponse) {
const { payload } = event.data;
!!callback && callback(payload.token);
}
};
window.addEventListener("message", listenGetTokenResponseFromWindow);
break;
case ExtensionMessagesTypes.SetWindowToken:
window.postMessage(msg, document.location.origin);
!!callback && callback();
break;
default:
break;
}
};
const listenMessagesFromWindow = event => {
if (event.source !== window) return;
const msg = event.data;
Object.values(ExtensionMessagesTypes).includes(msg.type) && sendMessagesToExtension(msg);
};
const listenMessagesFromExtension = (msg, sender, response) => {
sendMessagesToWindow(msg, response);
return true; // means response is async
};
// ----------------- Listener Definitions -----------------
window.removeEventListener("message", listenMessagesFromWindow);
window.addEventListener("message", listenMessagesFromWindow);
chrome.runtime.onMessage.removeListener(listenMessagesFromExtension);
chrome.runtime.onMessage.addListener(listenMessagesFromExtension);
// Reset extension token as windows token
sendMessagesToWindow({ type: ExtensionMessagesTypes.GetTokenFromWindow }, token => {
sendMessagesToExtension({
type: ExtensionMessagesTypes.SetExtensionToken,
payload: { token }
});
});
};
Here is the background.js file.
(() => {
chrome.runtime.onMessage.addListener((msg, sender, response) => {
switch (msg.type) {
case ExtensionMessagesTypes.GetTokens:
getAccessTokens(response);
break;
case ExtensionMessagesTypes.SetExtensionToken:
!!msg.payload && !!msg.payload.token && setAccessTokenToExtensionLocalStorage(msg.payload.token, response);
break;
case ExtensionMessagesTypes.SetWindowToken:
!!msg.payload && !!msg.payload.token && sendMessageFromExtensionToWindow(msg, response);
break;
}
});
})();
const sendMessageFromExtensionToWindow = (msg, callback = null) => {
chrome.tabs.query({ currentWindow: true, url: `${HostURL}/*` }, tabs => {
if (tabs.length < 1) {
!!callback && callback(null);
return;
}
if (msg.type === ExtensionMessagesTypes.GetTokenFromWindow) {
chrome.tabs.sendMessage(tabs[0].id, msg, token => {
!!callback && callback(token);
});
} else if (msg.type === ExtensionMessagesTypes.SetWindowToken) {
chrome.tabs.sendMessage(tabs[0].id, msg, () => {
!!callback && callback();
});
}
});
};
// Authentication
const setAccessTokenToExtensionLocalStorage = (access_token, callback = null) => {
chrome.storage.local.set({ access_token }, () => {
!!callback && callback();
});
};
const getAccessTokenFromChromeStorage = callback => {
chrome.storage.local.get(['access_token'], result => {
!!callback && callback(result.access_token);
});
};
const getAccessTokens = callback => {
getAccessTokenFromChromeStorage(accessTokenFromExtension => {
sendMessageFromExtensionToWindow({ type: ExtensionMessagesTypes.GetTokenFromWindow }, accessTokenFromWindow => {
callback({
accessTokenFromExtension: accessTokenFromExtension || '',
accessTokenFromWindow: accessTokenFromWindow || ''
});
});
});
};
const handleLogin = payload => {
//TODO: Handling refresh token
const { token } = payload;
if (!token) return;
setAccessTokenToExtensionLocalStorage(token);
};
const handleLogout = () => {
setAccessTokenToExtensionLocalStorage(null);
};
PS: You don't need externally_connectable option in the manifest.json file.

Thanks to #wOxxOm comment I was able to resolve the issue.
I quote:
Tentatively, since ngrok.io is in public suffix list it means it's basically like com which is forbidden in externally_connectable. Try using a more specific pattern for the site.
I changed the URL to use one more specific https://330218550995.ngrok.io/* and it now works

Related

Uncaught SyntaxError: Identifier 'myOptions' has already been declared in JavaScript

I am developing a chrome extension where I am injecting a JavaScript script into the active tab when it loads. The code of the script I have attached below. When I use var for declaring myOptions and myGlobals objects, the script runs without any errors. But if I use let for declaring them, then I get syntax error on the first line stating that myOptions has already been declared. I have not even redeclared myOptions and myGlobals objects anywhere in my code. But I have tried to change the values of their properties. I am unable to figure out where I am going wrong. I want to know why let does not work in my code?
var myOptions = {
takeNotes:false,
displayNotes:false
}
var myGlobals = {
displayingForm:false,
tabUrl:window.location.href,
notesCache:[]
}
onloadForeground();
function onloadForeground(){
chrome.storage.sync.get(myGlobals.tabUrl, (data)=>{
myGlobals.notesCache = data[myGlobals.tabUrl]?data[myGlobals.tabUrl].savedNotes:[];
console.log(data);
myGlobals.notesCache.forEach(addSticker);
});
}
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log(request);
if (request.message === "change_takeNotes_option") {
console.log(`Changing take notes option to ${request.value}`);
myOptions.takeNotes = request.value;
sendResponse({
message:"success"
});
return true;
} else if (request.message === "change_displayNotes_option") {
console.log(`Changing display notes option to ${request.value}`);
myOptions.displayNotes = request.value;
displayNotes();
sendResponse({
message:"success"
});
return true;
} else if (request.message === "save_notes_cache") {
console.log("Saved notes");
saveNotes();
sendResponse({
message:"success"
});
return true;
} else if (request.message === "reset_notes") {
console.log("Reset notes");
resetNotes();
sendResponse({
message:"success"
});
return true;
}
});
function displayNotes(){
const notes = document.getElementsByClassName("note");
console.log(notes.length);
for (let i = 0; i < notes.length; i++) {
notes[i].style.visibility = (myOptions.displayNotes)?"visible":"hidden";
}
}
function saveNotes() {
if (myGlobals.notesCache.length > 0) {
chrome.storage.sync.set({[myGlobals.tabUrl]: {savedNotes:myGlobals.notesCache}});
} else {
chrome.storage.sync.remove(myGlobals.tabUrl);
}
}
function displayForm() {
myGlobals.displayingForm = true;
}
function discardForm() {
setTimeout(() => {
myGlobals.displayingForm = false;
}, 500);
}
function addNote(){
console.log("Adding note");
let noteTitle = document.getElementById("note-inputTitle").value;
let noteDescription = document.getElementById("note-inputDescription").value;
if (noteTitle == null || noteTitle.trim() === "") {
alert("The note requires a title");
} else if (noteDescription == null || noteDescription.trim() === "") {
alert("The note requires a description");
} else {
let note = {
title: noteTitle,
description: noteDescription,
}
myGlobals.notesCache.push(note);
console.log("Current note cache");
console.log(myGlobals.notesCache);
discardForm();
}
}
function discardNote(index) {
myGlobals.displayingForm=true;
setTimeout(()=>{
myGlobals.displayingForm=false;
}, 300);
console.log("Discarding note " + index);
myGlobals.notesCache.splice(index, 1);
console.log("Current note cache");
console.log(myGlobals.notesCache);
}
function resetNotes(){
myGlobals.notesCache = [];
console.log(notesCache);
}
This is the background script I am using to inject the above script
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
console.log(changeInfo);
if (changeInfo.status === "complete" && /^http/.test(tab.url)) {
chrome.scripting.insertCSS({
target: {
tabId: tabId
},
files: ["./foreground.css"]
})
chrome.scripting.executeScript({
target: {
tabId: tabId
},
files: ["./foreground.js"]
})
.then(() => {
console.log("Injected foreground script " + tabId);
chrome.storage.sync.set({ [tabId]: { options:{takeNotes:false, displayNotes:false} } });
})
.catch(err => {
console.log(err);
});
}
});
You use executeScript twice on the same page so when the injected script runs again it tries to declare a let variable in the same context, but this is forbidden by the JavaScript specification.
Solutions:
Keep using var
Wrap the code in an IIFE:
(() => {
// your entire code here
})()
Don't reinject the script twice by adding a condition before executeScript e.g. you can "ping" the tab:
// injected file
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg === 'ping') sendResponse(true);
});
// background or popup script
function inject(tabId) {
chrome.tabs.sendMessage(tabId, 'ping', {frameId: 0}, () => {
if (chrome.runtime.lastError) {
// ManifestV2:
chrome.tabs.executeScript(tabId, {file: 'content.js'});
// ManifestV3:
// chrome.scripting.executeScript({target: {tabId}, file: 'content.js'});
}
});
}
Try to check your HTML code. Maybe you included the Javascript code twice. That's the only explanation for the error. I can't see any other error in your code.

Undefined is not an object (evaluating 'navigator.permissions.query')

I am getting this error when trying to access my website on an iPhone 7, with a white bank screen (the main screen loads fine, but then I get this at the net screen after I click something.
I assume this is what it's talking about:
useEffect(() => {
navigator.permissions
.query({ name: "microphone" })
.then((permissionStatus) => {
setMicrophonePermissionGranted(permissionStatus.state === "granted");
permissionStatus.onchange = function () {
setMicrophonePermissionGranted(this.state === "granted");
};
});
navigator.permissions.query({ name: "camera" }).then((permissionStatus) => {
setCameraPermissionGranted(permissionStatus.state === "granted");
permissionStatus.onchange = function () {
setCameraPermissionGranted(this.state === "granted");
};
});
}, []);
How do I fix this?
You need to check permission APIs availability and then if not available - query standard APIs.
Here is the location example:
Permissions API
Navigation API
if ( navigator.permissions && navigator.permissions.query) {
//try permissions APIs first
navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
// Will return ['granted', 'prompt', 'denied']
const permission = result.state;
if ( permission === 'granted' || permission === 'prompt' ) {
_onGetCurrentLocation();
}
});
} else if (navigator.geolocation) {
//then Navigation APIs
_onGetCurrentLocation();
}
function _onGetCurrentLocation () {
navigator.geolocation.getCurrentPosition(function(position) {
//imitate map latlng construct
const marker = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
})
}
Permissions.query() is marked as an experimental feature as of June 2021 https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query.
As of today, that traduces into that you'll need to implement two UIs / flows; one capable of supporting fancy flows to tell the user how to proceed, and the other one more standard, using try / catch blocks. Something like:
useEffect(() => {
requestPermissions();
}, []);
const requestPermissions = async () => {
try {
handlePermissionsGranted();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
startRecording();
} catch {
...
}
};
const handlePermissionsGranted = async () => {
if (navigator.permissions && navigator.permissions.query) {
const permissions = await navigator.permissions.query({name: 'microphone'});
permissions.onchange = () => {
setMicrophonePermissionGranted(permissions === 'granted');
};
}
};
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
...
} catch {
... << if you reach this catch means that either the browser does not support webrtc or that the user didn't grant permissions
}
};
I was trying to check for the mic and camera permissions from iOs devices and through the Facebook browser, which I guess makes the whole thing fail, as these don't exist in those environments.
Once I've moved that query to the component that only loads if it is not a mobile device, my error fixed.

Problem getting messages after loading html between main and renderer

I'm building an Electron application and I'm stuck with the following problem.
I'm getting information using a socket from an apparatus, and It was working fine. I wanted to change the html of the page if the program gets a type of message, so basically I used the loadUrl method, but then, after sending a message to the renderer process I't seems like it's not being received.
My code:
photoViewOn = false;
...
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({
backgroundColor: '#000000',
fullscreen : true,
frame : false,
icon : __dirname + "/res/logo.png",
webPreferences: {
nodeIntegration : true
}
});
mainWindow.webContents.openDevTools();
// Load html in window
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'bigNames.html'),
protocol: 'file:',
slashes:true,
}))...)
function HTMLupdate(msg) {
mainWindow && mainWindow.webContents.send('update', msg);
var server = socketBuilder('localhost', '7777', {
message: (msg, rinfo) => {
try {
console.log(`server got: ${msg} from ${rinfo.address}:${rinfo.port}`);
var infoMap = processCyrano(msg);
//if (infoMap["Com"] === "")
if (infoMap != null) {
if (infoMap["Com"] === "INFO") {
if (photoViewOn) {
photoViewOn = false;
bigNamesView();
}
console.log("Inside Infomap");
console.log(`Left Fencer: ${infoMap["LeftName"]}`);
console.log(`Right Fencer: ${infoMap["RightName"]}`);
HTMLupdate(infoMap);
}
}
}
catch (error) {
console.log(`Error ${error}`);
}
},
error: (err) => {
console.log(`server error:\n${err.stack}`);
server.close();
},
listen: () => {
const address = server.address();
console.log(`server listening ${address.address}:${address.port}`);
}
});
function photoView() {
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'photos.html'),
protocol: 'file:',
slashes:true,
}));
}
function bigNamesView() {
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'bigNames.html'),
protocol: 'file:',
slashes:true,
}));
}
function processCyrano(msg) {
try {
let stripMsg = msg.toString().split("%");
let info = {};
let compInfo = stripMsg[0].split("|");
console.log(compInfo);
if(compInfo[2] === "INFO" || compInfo[2] === "DISP") {
let firstFencerInfo = stripMsg[1].split("|")
let secondFencerInfo = stripMsg[2].split("|")
info.Protocol = compInfo[1];
info.Com = compInfo[2]
info.Piste = compInfo[3]
info.Compe = compInfo[4];
info.Phase = compInfo[5];
info.PoulTab = compInfo[6];
info.Match = compInfo[7];
info.Round = compInfo[8];
info.RightId = firstFencerInfo[1];
info.RightName = firstFencerInfo[2];
info.RightNat = firstFencerInfo[3];
info.Rscore = firstFencerInfo[4];
info.Rstatus = firstFencerInfo[5];
info.RYcard = firstFencerInfo[6];
info.Rrcard = firstFencerInfo[7];
info.Rlight = firstFencerInfo[8];
info.RWlight = firstFencerInfo[9];
info.LeftId = secondFencerInfo[1];
info.LeftName = secondFencerInfo[2];
info.LeftNat = secondFencerInfo[3];
info.Lscore = secondFencerInfo[4];
info.Lstatus = secondFencerInfo[5];
info.LYcard = secondFencerInfo[6];
info.Lrcard = secondFencerInfo[7];
info.Llight = secondFencerInfo[8];
info.LWlight = secondFencerInfo[9];
lastMatch = info;
return info;
}
else if (compInfo[2] === "PHOTO-NEXT") {
console.log("Photo-Next received");
photoViewOn = true;
photoView();
}
else if (compInfo[2] === "PHOTO-SCORE") {
console.log("Photo-score received");
photoViewOn = true;
photoView();
}
else if (compInfo[2] === "PHOTO-STOP") {
console.log("Photo-Stop received");
return lastMatch;
}
return null;
}
catch (error) {
//Avoid empty messages of the protocol
console.log(`Error ${error}`);
return null;
}
}
Basically my attempt is, if I get a "Photo-Score" message, call photoView() (this works fine), and if "Photo-Stop" is received, call bigNamesView() and start sending information agoin using HTMLUpdate(msg), but it doesn't work for me. Any clue why this is happening?
Note that I remove some irrelevant code. Thanks.
hi my friend you problem is that lastMatch = info only happens inside
if(compInfo[2] === "INFO" || compInfo[2] === "DISP") {
So Only When "Photo-Stop" is received then you return lastMatch
.
inside the code your logic says only when we receive INFO call bigNamesView()
but you want only when we receive PHOTO-STOP call bigNamesView()
.
Also about the loadurl method you call mainWindow.webContents.send('update', msg); in HTMLupdate immediately you should wait for event did-finish-load then call send update msg
win.webContents.on('did-finish-load', () => {
HTMLupdate(infoMap);
})
In your server you have the condition
if (photoViewOn) {bigNamesView()}
but in function processCyrano your condition for 'PHOTO-STOP' doesn't set photoViewOn to true.
else if (compInfo[2] === "PHOTO-STOP") {
console.log("Photo-Stop received");
return lastMatch;
}
Change to
else if (compInfo[2] === "PHOTO-STOP") {
console.log("Photo-Stop received");
photoViewOn = true;
return lastMatch;
}

FetchEvent for "[url]" resulted in a network error response: the promise was rejected

I am getting those errors and warning in my console after trying to create a PWA - Progressive Web App out of my website using this tutorial.
The FetchEvent for
"https://www.googletagmanager.com/gtag/js?id=UA-4562443-3" resulted in
a network error response: the promise was rejected. Promise.then
(async) (anonymous) # service-worker.js:228 service-worker.js:1
Uncaught (in promise) fetch failed 1:21 GET
https://www.googletagmanager.com/gtag/js?id=UA-4562443-3
net::ERR_FAILED The FetchEvent for
"https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap&subset=cyrillic"
resulted in a network error response: the promise was rejected.
Promise.then (async) (anonymous) # service-worker.js:228
service-worker.js:1 Uncaught (in promise) fetch failed 1:28 GET
https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap&subset=cyrillic
net::ERR_FAILED The FetchEvent for
"https://widget.uservoice.com/VuHfPZ0etI2eQ4REt1tiUg.js" resulted in a
network error response: the promise was rejected. Promise.then (async)
(anonymous) # service-worker.js:228 service-worker.js:1 Uncaught (in
promise) fetch failed 1:894 GET
https://widget.uservoice.com/VuHfPZ0etI2eQ4REt1tiUg.js net::ERR_FAILED
It actually works pretty well. I am able to get a fully working PWA icon in Audits in Chrome Dev Tools. Which is great, but after a refresh I am getting all those errors. My service-worker.js which is located at root of my website looks like this
"use strict";
const SERVICE_WORKER_VERSION = "REPLACED_WITH_SERVICE_WORKER_VERSION"; // updated with tools/service_worker_version.js (String)
const CACHE_VERSION = SERVICE_WORKER_VERSION;
//const fileNamesToSaveInCache = ["/"];
const HOME = "/";
const OFFLINE_ALTERNATIVE = "/offline";
const fileNamesToSaveInCache = [];
const fileNamesToSaveInCacheProd = [
OFFLINE_ALTERNATIVE,
"/",
"/publics/img/favicon/fav.gif",
"/publics/css/style.css",
"/publics/css/searchhelp.css",
"/publics/css/Helpa.css",
];
const rtcLength = 4; // "rtc/".length;
const rtcFetchDelay = 10000;//ms
const origin = location.origin;
const answerFromfileName = {};
const resolveFromfileName = {};
const rejectFromfileName = {};
const timeOutIdFromfileName = {};
let logLater = [];
// todo put all into single container
const resolveFetchFromPeerToPeer = function (fileName) {
clearTimeout(timeOutIdFromfileName[fileName]);
resolveFromfileName[fileName](answerFromfileName[fileName]);
delete answerFromfileName[fileName];//stop listening
delete resolveFromfileName[fileName];
delete rejectFromfileName[fileName];
};
const rejectFetchFromPeerToPeer = function (fileName, reason) {
if (rejectFromfileName[fileName]) {
rejectFromfileName[fileName](reason);
delete resolveFromfileName[fileName];
delete rejectFromfileName[fileName];
}
};
const fetchFromPeerToPeer = function (customRequestObject) {
/*asks all page for a fileName*/
const fileName = customRequestObject.header.fileName;
const promise = new Promise(function (resolve, reject) {
resolveFromfileName[fileName] = resolve;
rejectFromfileName[fileName] = reject;
if (answerFromfileName.hasOwnProperty(fileName)) {
resolveFetchFromPeerToPeer(fileName);
}
timeOutIdFromfileName[fileName] = setTimeout(function() {
rejectFetchFromPeerToPeer(fileName, "No answer after 10 seconds");
}, rtcFetchDelay);
});
self.clients.matchAll().then(function(clientList) {
clientList.forEach(function(client) {
client.postMessage(customRequestObject);
});
});
return promise;
};
const logInTheUI = (function () {
//console.log("logInTheUI function exists");
return function (what) {
console.log(what);
self.clients.matchAll().then(function(clientList) {
clientList.forEach(function(client) {
client.postMessage({LOG: JSON.parse(JSON.stringify(what))});
});
});
};
}());
const logInTheUIWhenActivated = function (what) {
logLater.push(what);
};
const fetchFromMainServer = function (request, options = {}) {
/*wrap over fetch. The problem with fetch here, it doesn't reject properly sometimes
see if statement below*/
return fetch(request, options).then(function (fetchResponse) {
// console.log("fetchFromMainServer:", fetchResponse.ok, fetchResponse);
// logInTheUI([request, options]);
if ((!fetchResponse) || (!fetchResponse.ok)) {
return Promise.reject("fetch failed");
}
return fetchResponse;
});
};
const fetchFromCache = function (request) {
return caches.open(CACHE_VERSION).then(function (cache) {
return cache.match(request).then(function (CacheResponse) {
//console.log("fetchFromCache:", CacheResponse.ok, CacheResponse);
if ((!CacheResponse) || (!CacheResponse.ok)) {
return Promise.reject("Not in Cache");
}
return CacheResponse;
});
});
};
const isLocalURL = function (url) {
return !(String(url).match("rtc"));
};
const fillServiceWorkerCache2 = function () {
/*It will not cache and also not reject for individual resources that failed to be added in the cache. unlike fillServiceWorkerCache which stops caching as soon as one problem occurs. see http://stackoverflow.com/questions/41388616/what-can-cause-a-promise-rejected-with-invalidstateerror-here*/
return caches.open(CACHE_VERSION).then(function (cache) {
return Promise.all(
fileNamesToSaveInCache.map(function (url) {
return cache.add(url).catch(function (reason) {
return logInTheUIWhenActivated([url + "failed: " + String(reason)]);
});
})
);
});
};
const latePutToCache = function (request, response) {
return caches.open(CACHE_VERSION).then(function(cache) {
cache.put(request, response.clone());
return response;
});
};
const deleteServiceWorkerOldCache = function () {
return caches.keys().then(function (cacheVersions) {
return Promise.all(
cacheVersions.map(function (cacheVersion) {
if (CACHE_VERSION === cacheVersion) {
//console.log("No change in cache");
} else {
//console.log("New SERVICE_WORKER_VERSION of cache, delete old");
return caches.delete(cacheVersion);
}
})
);
});
};
const useOfflineAlternative = function () {
return fetchFromCache(new Request(OFFLINE_ALTERNATIVE));
};
const isAppPage = function (url) {
/*appPage does not work offline, and we don't serve it if offline
returns Boolean*/
return (origin + HOME) === url;
};
self.addEventListener("install", function (event) {
/*the install event can occur while another service worker is still active
waitUntil blocks the state (here installing) of the service worker until the
promise is fulfilled (resolved or rejected). It is useful to make the service worker more readable and more deterministic
save in cache some static fileNames
this happens before activation */
event.waitUntil(
fillServiceWorkerCache2()
.then(skipWaiting)
);
});
self.addEventListener("activate", function (event) {
/* about to take over, other service worker are killed after activate, syncronous
a good moment to clear old cache*/
event.waitUntil(deleteServiceWorkerOldCache().then(function() {
//console.log("[ServiceWorker] Skip waiting on install caches:", caches);
return self.clients.claim();
}));
});
self.addEventListener("message", function (event) {
const message = event.data;
/*
if (message.hasOwnProperty("FUTURE")) {
console.log(message.FUTURE);
return;
}
*/
const fileName = message.fileName;
const answer = message.answer;
answerFromfileName[fileName] = answer;
//console.log(fileName, answer, resolveFromfileName);
if (resolveFromfileName.hasOwnProperty(fileName)) {//
resolveFetchFromPeerToPeer(fileName);
}
});
self.addEventListener("fetch", function (fetchEvent) {
/* fetchEvent interface FetchEvent
see https://www.w3.org/TR/service-workers/#fetch-event-interface
IMPORTANT: fetchEvent.respondWith must be called inside this handler immediately
synchronously fetchEvent.respondWith must be called with a response object or a
promise that resolves with a response object. if fetchEvent.respondWith is called
later in a callback the browser will take over and asks the remote server directly, do not do that
why have fetchEvent.respondWith( and not respond with the return value of the callback function ?
-->
It allows to do other thing before killing the service worker, like saving stuff in cache
*/
const request = fetchEvent.request;//Request implements Body;
//const requestClone = request.clone(); //no need to clone ?
const url = request.url;
if (logLater) {
logLater.forEach(logInTheUI);
logLater = undefined;
}
// logInTheUI(["fetch service worker " + SERVICE_WORKER_VERSION, fetchEvent]);
// Needs to activate to handle fetch
if (isLocalURL(url)) {
//Normal Fetch
if (request.method === "POST") {
// logInTheUI(["POST ignored", request]);
return;
}
// logInTheUI(["Normal Fetch"]);
fetchEvent.respondWith(
fetchFromCache(request.clone()).then(function (cacheResponse) {
/* cannot use request again from here, use requestClone */
//console.log(request, url);
return cacheResponse;
}).catch(function (reason) {
// We don't have it in the cache, fetch it
// logInTheUI(fetchEvent);
return fetchFromMainServer(request);
}).then(function (mainServerResponse) {
if (isAppPage(url)) {
return mainServerResponse;
}
return latePutToCache(request, mainServerResponse).catch(
function (reason) {
/*failed to put in cache do not propagate catch, not important enough*/
return mainServerResponse;
}
);
}).catch(function (reason) {
if (isAppPage(url)) {
//if it is the landing page that is asked
return useOfflineAlternative();
//todo if we are offline , display /offline directly
}
return Promise.reject(reason);
})
);
} else {
// Peer to peer Fetch
//console.log(SERVICE_WORKER_VERSION, "rtc fetch" url:", fetchEvent.request.url);
// request, url are defined
const method = request.method;
const requestHeaders = request.headers;
//logInTheUI(["Special Fetch"]);
const customRequestObject = {
header: {
fileName: url.substring(url.indexOf("rtc/") + rtcLength),
method
},
body: ""
};
requestHeaders.forEach(function (value, key) {
//value, key correct order
//is there a standard way to use Object.assign with Map like iterables ?
//todo handle duplicates
//https://fetch.spec.whatwg.org/#terminology-headers
customRequestObject.header[key] = value;
});
//console.log(request);
fetchEvent.respondWith(
/*should provide the peer the full request*/
request.arrayBuffer().then(function (bodyAsArrayBuffer) {
const bodyUsed = request.bodyUsed;
if (bodyUsed && bodyAsArrayBuffer) {
customRequestObject.body = bodyAsArrayBuffer;
}
}).catch(function (reason) {
/*console.log("no body sent, a normal GET or HEAD request has no body",
reason);*/
}).then(function (notUsed) {
return fetchFromPeerToPeer(customRequestObject);
}).then(function (response) {
const responseInstance = new Response(response.body, {
headers: response.header,
status: response.header.status || 200,
statusText : response.header.statusText || "OK"
});
return responseInstance;
}).catch(function (error) {
const responseInstance = new Response(`<html><p>${error}</p></html>`,
{
headers: {
"Content-type": "text/html"
},
status: 500,
statusText : "timedout"
});
return responseInstance;
})
);
}
/*here we could do more with event.waitUntil()*/
});
I am guessing the problem comes from loading those external libraries. So, this is my code loading those libraries.
// Include the UserVoice JavaScript SDK (only needed once on a page)
UserVoice = window.UserVoice || [];
(function() {
var uv = document.createElement('script');
uv.type = 'text/javascript';
uv.async = true;
uv.src = '//widget.uservoice.com/VuHfPZ0etI2eQ4REt1tiUg.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(uv, s)
})();
//
// UserVoice Javascript SDK developer documentation:
// https://www.uservoice.com/o/javascript-sdk
//
// Set colors
UserVoice.push(['set', {
accent_color: '#448dd6',
trigger_color: 'white',
trigger_background_color: 'rgba(46, 49, 51, 0.6)'
}]);
// Identify the user and pass traits
// To enable, replace sample data with actual user traits and uncomment the line
UserVoice.push(['identify', {
//email: 'john.doe#example.com', // User’s email address
//name: 'John Doe', // User’s real name
//created_at: 1364406966, // Unix timestamp for the date the user signed up
//id: 123, // Optional: Unique id of the user (if set, this should not change)
//type: 'Owner', // Optional: segment your users by type
//account: {
// id: 123, // Optional: associate multiple users with a single account
// name: 'Acme, Co.', // Account name
// created_at: 1364406966, // Unix timestamp for the date the account was created
// monthly_rate: 9.99, // Decimal; monthly rate of the account
// ltv: 1495.00, // Decimal; lifetime value of the account
// plan: 'Enhanced' // Plan name for the account
//}
}]);
// Add default trigger to the bottom-right corner of the window:
UserVoice.push(['addTrigger', {mode: 'contact', trigger_position: 'bottom-right'}]);
// Or, use your own custom trigger:
//UserVoice.push(['addTrigger', '#id', { mode: 'contact' }]);
// Autoprompt for Satisfaction and SmartVote (only displayed under certain conditions)
UserVoice.push(['autoprompt', {}]);
});//ready
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap&subset=cyrillic');
#font-face {
font-family: 'fa-solid-900';
font-display: swap;
src: url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-solid-900.woff2) format('woff2');
}
#font-face {
font-family: 'fa-brands-400';
font-display: swap;
src: url(https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-brands-400.woff2) format('woff2');
}
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-number-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-number-3');
</script>
What should i do in order to fix those errors. This is my first try in PWA so i am lost.
I end up using Workbox and everything is working great now.

connecting to websocket make webworker un-responsive in Microsoft edge

So this is weird, when i try to connect to websocket (this is only a Microsoft edge issue) it makes so on every second page refresh webworker will not accept messages onMessage wont trigger at all:
consider the following:
main.js
var worker = new Worker("webworker.js");
worker.postMessage({ type: 'INIT_SOCKET' });
worker.addEventListener('message', (event) => {
let data = event.data;
if (typeof data === 'string') {
data = JSON.parse(data);
}
if (data.type === 'SOCKET_INITIALIZED') {
console.log('inititalized');
}
});
webworker.js
var io = require('socket.io-client');
var socket;
onmessage = function(event) {
var data = event.data;
console.log('got a event');
if (typeof data === 'string') {
data = JSON.parse(data);
}
switch (data.type) {
case 'INIT_SOCKET':
try {
socket = io('xxxx', { transports: [ 'websocket' ], secure: true }); // this line causes the error
socket.on('connect', function () {
postMessage({
type: Consts.SOCKET_INITIALIZED
});
});
} catch(e) {
console.log('some error ', e);
}
break;
};
};
require does not appear to be defined at Worker context. Use importScripts() to import external scripts into DedicatedWorkerGlobalScope. For example
importScripts("socket.io.js");
Could not determine how to stop io() call from polling and getting error, probably due to 404 error
socket.io.js:7370 WebSocket connection to
'ws://echo.websocket.org/socket.io/?EIO=3&transport=websocket' failed:
Error during WebSocket handshake: Unexpected response code: 404
probably due to being unfamiliar, here, as to how io() is implemented. Though was able to define Socket object within Worker scope.
Approach using WebSocket returns expected result
const worker = new Worker("webworker.js");
worker.addEventListener('message', (event) => {
let data = event.data;
if (typeof data === 'string') {
console.log(data)
}
if (data.type === 'SOCKET_INITIALIZED') {
console.log('inititalized');
}
});
worker.postMessage({
type: 'INIT_SOCKET'
});
importScripts("socket.io.js");
let sock = io();
console.log(sock); // to demonstrate `Socket` is defined
sock.close(); // closing socket here to prevent `404` polling errors
self.socket = void 0;
self.onmessage = function(event) {
var data = event.data;
console.log('got a event');
if (typeof data === 'string') {
data = JSON.parse(data);
}
switch (data.type) {
case 'INIT_SOCKET':
if (!self.socket) {
try {
self.socket = new WebSocket("ws://echo.websocket.org/");
self.socket.onopen = function(e) {
socket.send("WebSocket rocks");
console.log("self.socket event.type:", e.type);
self.postMessage({
type: 'SOCKET_INITIALIZED'
});
};
self.socket.onmessage = function(e) {
console.log(e.data);
self.socket.close()
};
self.socket.onerror = function(e) {
console.log("self.socket error", e);
};
self.socket.onclose = function(e) {
console.log("self.socket event.type", e.type);
};
} catch (e) {
console.log('some error ', e);
}
break;
};
}
};
plnkr http://plnkr.co/edit/zVnLE6qG7Kf4yVSb0aJt?p=preview

Categories