Develop Reference

PWA, Service Worker error: "Internet connection appears to be offline"

I have a progressive web app that works offline, but sometimes when I'm offline and I'm not inside of the 'bookmark' and I open it, I get a white screen with the error: "Safari cannot open the page. The error was: "FetchEvent.respondWith received an error: TypeError: The Internet connection appears to be offline."
I suppose this is coming from the "Fetch" event on the service worker, and this is my code:
self.addEventListener('fetch', function (event) {
const {
request,
request: {
url,
method,
},
} = event;
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request)
.catch(function(error){
return;
})
.then(function (res) {
if (event.request.method == 'POST' && !navigator.onLine) { //Prevent POST since they give errors.
if (res != 'undefined') {
return res;
}
return fetch(event.request);
} else {
return fetchAndUpdate(event.request);
}
})
);
}else{
return;
}
})
Am I missing something or am I looking at the wrong place? Any advice would be appreciated!

stop multiple service controller queries inside NodeJs promise while loop

I'm trying to start a windows service from a node script. This service has a bad habit of hanging and sometimes requires a retry to start successfully. I have a promise while loop setup (Please feel free to suggest a better way). The problem I'm having, is with each loop the sc.pollInterval output writes duplicate results in the console. Below is an example of the duplicate content I see in the console, this is after the second iteration in the loop, i'd like it to only display that content once.
sc \\abnf34873 start ColdFusion 10 Application Server
sc \\abnf34873 queryex ColdFusion 10 Application Server
SERVICE_NAME: ColdFusion 10 Application Server
TYPE : 10 WIN32_OWN_PROCESS
STATE : 2 START_PENDING
(NOT_STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
WIN32_EXIT_CODE : 0 (0x0)
SERVICE_EXIT_CODE : 0 (0x0)
CHECKPOINT : 0x0
WAIT_HINT : 0x7d0
PID : 0
FLAGS :
SERVICE_NAME: ColdFusion 10 Application Server
TYPE : 10 WIN32_OWN_PROCESS
STATE : 2 START_PENDING
(NOT_STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
WIN32_EXIT_CODE : 0 (0x0)
SERVICE_EXIT_CODE : 0 (0x0)
CHECKPOINT : 0x0
WAIT_HINT : 0x7d0
PID : 13772
FLAGS :
Here is the code I have. Basically, I'm going to try to start the service 3 times. If it doesn't, then I throw and error. One thing to note, when I attempt to start the service, but it's stuck in 'Start_pending' state, I kill the process and then try to start it again.
var retryCount = 0;
// Start the colfusion service
gulp.task('start-coldfusion-service', function(done) {
var serviceStarted = false;
console.log("Starting coldfusion service..");
// This says we're going to ask where it's at every 30 seconds until it's in the desired state.
sc.pollInterval(30);
sc.timeout(60);
retryCount = 0;
tryServiceStart().then(function(result) {
// process final result here
done();
}).catch(function(err) {
// process error here
});
});
function tryServiceStart() {
return startService().then(function(serviceStarted) {
if (serviceStarted == false) {
console.log("Retry Count: " + retryCount);
// Try again..
return tryServiceStart();
} else {
return result;
}
});
}
function startService() {
return new Promise(function(resolve, reject) {
var started = true;
// Make sure the coldfusion service exists on the target server
sc.query(targetServer, { name: 'ColdFusion 10 Application Server'}).done(function(services) {
// if the service exists and it is currentl stopped, then we're going to start it.
if (services.length == 1) {
var pid = services[0].pid;
if (services[0].state.name == 'STOPPED') {
sc.start(targetServer, 'ColdFusion 10 Application Server')
.catch(function(error) {
started = false;
console.log("Problem starting Coldfusion service! error message: " + error.message);
console.log("retrying...");
retryCount++;
if (parseInt(retryCount) > 2) {
throw Error(error.message);
}
})
.done(function(displayName) {
if (started) {
console.log('Coldfusion service started successfully!');
}
resolve(started);
});
} else if (services[0].state.name == 'START_PENDING') {
kill(pid, {force: true}).catch(function (err) {
console.log('Problem killing process..');
}).then(function() {
console.log('Killed hanging process..');
resolve(false);
});
}
} else {
console.log("Could not find the service in a stopped state.");
resolve(false);
}
});
});
}

Not too sure why you get duplicate results in the console, however below are some ideas on how the code might be better written, chiefly by promisifying at the lowest level.
Sticking fairly closely to the original concept, I ended up with this ...
Promisify sc commands
sc commands return something which is promise-like but with a .done() method that does not, in all probability, possess the full power of a genuine .then()
promisify each command as .xxxAsync()
by adopting each command's .done as .then, Promise.resolve() should be able to assimilate the promise-like thing returned by the command.
;(function() {
commands.forEach(command => {
sc[command].then = sc[command].done;
sc[command + 'Async'] = function() {
return Promise.resolve(sc[command](...arguments));
};
}).
}(['start', 'query'])); // add other commands as required
gulp.task()
promise chain follows its success path if service was opened, otherwise its error path
no need to test a result to detect error conditions in the success path.
gulp.task('start-coldfusion-service', function(done) {
console.log('Starting coldfusion service..');
// This says we're going to ask where it's at every 30 seconds until it's in the desired state.
sc.pollInterval(30);
sc.timeout(60);
tryServiceStart(2) // tryServiceStart(maxRetries)
.then(done) // success! The service was started.
.catch(function(err) {
// the only error to end up here should be 'Maximum tries reached'.
console.err(err);
// process error here if necessary
});
});
tryServiceStart()
orchestrate retries here
function tryServiceStart(maxRetries) {
return startService()
// .then(() => {}) // success! No action required here, just stay on the success path.
.catch((error) => {
// all throws from startService() end up here
console.error(error); // log intermediate/final error
if(--maxRetries > 0) {
return tryServiceStart();
} else {
throw new Error('Maximum tries reached');
}
});
}
startService()
form a fully capable promise chain by calling the promisified versions of sc.query() and sc.start()
console.log() purged in favour of throwing.
thrown errors will be caught and logged back in tryServiceStart()
function startService() {
// Make sure the coldfusion service exists on the target server
return sc.queryAsync(targetServer, { name: 'ColdFusion 10 Application Server'})
.then((services) => {
// if the service exists and it is currently stopped, then start it.
if (services.length == 1) {
switch(services[0].state.name) {
case 'STOPPED':
return sc.startAsync(targetServer, 'ColdFusion 10 Application Server')
.catch((error) => {
throw new Error("Problem starting Coldfusion service! error message: " + error.message);
});
break;
case 'START_PENDING':
return kill(services[0].pid, { 'force': true })
.then(() => {
throw new Error('Killed hanging process..'); // successful kill but still an error as far as startService() is concerned.
})
.catch((err) => {
throw new Error('Problem killing process..');
});
break;
default:
throw new Error("Service not in a stopped state.");
}
} else {
throw new Error('Could not find the service.');
}
});
}
Checked only for syntax error, so may well need debugging.
Offered FWIW. Feel free to adopt/raid as appropriate.

I have found another npm package called promise-retry that seems to have addressed the issue I was having. At the same time, I believe it made my code a little more clear as to what it's doing.
gulp.task('start-coldfusion-service', function(done) {
var serviceStarted = false;
console.log("Starting coldfusion service..");
// Since starting a service on another server isn't exactly fast, we have to poll the status of it.
// This says we're going to ask where it's at every 30 seconds until it's in the desired state.
sc.pollInterval(30);
sc.timeout(60);
promiseRetry({retries: 3}, function (retry, number) {
console.log('attempt number', number);
return startService()
.catch(function (err) {
console.log(err);
if (err.code === 'ETIMEDOUT') {
retry(err);
} else if (err === 'killedProcess') {
retry(err);
}
throw Error(err);
});
})
.then(function (value) {
done();
}, function (err) {
console.log("Unable to start the service after 3 tries!");
process.exit();
});
});
function startService() {
var errorMsg = "";
return new Promise(function(resolve, reject) {
var started = true;
// Make sure the coldfusion service exists on the target server
sc.query(targetServer, { name: 'ColdFusion 10 Application Server'}).done(function(services) {
// if the service exists and it is currentl stopped, then we're going to start it.
if (services.length == 1) {
var pid = services[0].pid;
if (services[0].state.name == 'STOPPED') {
sc.start(targetServer, 'ColdFusion 10 Application Server')
.catch(function(error) {
started = false;
errorMsg = error;
console.log("Problem starting Coldfusion service! error message: " + error.message);
console.log("retrying...");
})
.done(function(displayName) {
if (started) {
console.log('Coldfusion service started successfully!');
resolve(started);
} else {
reject(errorMsg);
}
});
} else if (services[0].state.name == 'START_PENDING') {
kill(pid, {force: true}).catch(function (err) {
console.log('Problem killing process..');
}).then(function() {
console.log('Killed hanging process..');
reject("killedProcess");
});
} else {
// Must already be started..
resolve(true);
}
} else {
console.log("Could not find the service in a stopped state.");
resolve(false);
}
});
});
}

Protractor Javascript not executing in sequence

I have the below function for login, which would console "successful" on success and "Failed" for files ones.
function login() {
return new Promise(function (resolve, reject) {
var username = element(by.name('txtLogin'));
var password = element(by.id('txtPassword'));
var signInButton = element(by.id('btnSignIn'));
for (var i = 0; i < testData.length; i++) {
if (testData[i].env === appConfig) {
username.sendKeys(testData[i].user);
password.sendKeys(testData[i].pass);
signInButton.click();
console.log("Successfully Clicked on the Sign In Button!");
break;
}
}
browser.getTitle().then(function (title) {
if (title == "Page Title") {
resolve("Successfull");
} else {
reject("Failed");
}
});
});
};
And the following test
describe('Login Scenarios', function () {
beforeEach(function () {
login();
});
it('Valid Credentials, Should login successfully from util class', function () {
console.log('Successfully logged in!');
});
});
I am seeing very strange behavior here. This line executes and consoles output even before the page is fully loaded.
console.log("Successfully Clicked on the Sign In Button!");
and the below code never gets executed.
browser.getTitle().then(function (title) {
if (title == "Page Title") {
resolve("Successfull");
} else {
reject("Failed");
}
});
And in the end i see the following error.
failed: error while waiting for protractor to sync with the page: "cannot re ad property '$$testability' of undefined"
I am pretty sure, i have messed up something here. But unable to figure out what's wrong that am doing here.

login returns a promise, but you're not signalling to Jasmine/Protractor that it needs to wait for it to finish. You can do this using the done callback:
beforeEach(function (done) {
login().then(function () {
done();
});
});
See the Jasmine documentation (which seems to have been inexplicibly hidden away in their new website layout...) for more info.

Chrome Notifications Using AJAX

On page load I request the user to allow notifications like so:
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
I have then wrote a function to send notifications to the user which works fine:
function push(title, message, location) {
if(!Notification) { return; }
if (Notification.permission !== "granted") { return; }
var notification = new Notification(title, {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: message,
});
notification.onclick = function () {
window.open(location);
};
}
Used like this:
push('Test', 'Test Message', 'http://example.com');
I then have a PHP script, for the time being it is static and returns the same thing for testing soon to be database driven.
session_start();
header('Content-Type: application/javascript');
if(!isset($_SESSION['notify'])) {
echo json_encode(array(
'Title' => 'Welcome to our Site',
'Message' => 'You are current recieving notifications.',
'Location' => 'http://example.com/',
'State' => true
),true);
$_SESSION['notify'] = true;
} else {
echo json_encode(array(
'State' => false
), true);
}
This works fine too when the page is directly accessed. The issue occurs in my AJAX request:
setInterval(function() {
$(document).ready(function() {
$.post('../notify/get_notify.php').done(function(response) {
if(response.State) {
push(response.Title, response.Message, response.Location);
}
console.log(response);
});
});
}, 5000);
The issue is here! When I check the network, every 5 seconds a request is being made and the response is coming back. However, nothing is logged in the console and the push() method is not executed.
Any help would be greatly appreciated.

I found the issue, due to the scope of the $.post() I was unable to retrieve anything, so instead I returned the value of the response like this:
setInterval(function() {
$(document).ready(function() {
response = $.post('../notify/get_notify.php').done(function(response) {
return response;
});
if(response.State) {
push(response.Title, response.Message, response.Location);
}
});
}, 5000);

Random Service Worker Response Error

I'm using Service Worker and Cache API to cache static resources but randomly http request to REST API endpoint (which is not being cached in SW) fails and the only message I have is xhr.statusText with text Service Worker Response Error and response code 500.
I can't tell if this error happens only with URLs that are not being cached or not. There is not enough evidence about either. This happens only in Chrome (50.0.2661.75 - 64b) and it works in Firefox 45
I wasn't able to reproduce it manually as it happens in Selenium tests and it appears to be random. Moreover it happens on localhost (where SW should work despite plain http) but also in domain with HTTPS that has self-signed certificate and as such SW should not even work there ...
Selenium tests are often refreshing pages and closing browser window but I have no idea if it matters.
Any ideas why it could be happening or how to get more information?
Update:
Service Worker code:
var VERSION = "sdlkhdfsdfu89q3473lja";
var CACHE_NAME = "cache" + VERSION;
var CACHE_PATTERN = /\.(js|html|css|png|gif|woff|ico)\?v=\S+?$/;
function fetchedFromNetwork(response, event) {
var cacheCopy = response.clone();
var url = event.request.url;
if (url.indexOf("/api/") === -1 // must not be a REST API call
&& url.indexOf(VERSION) > -1 // only versioned requests
&& VERSION !== "$CACHE_VERSION"
&& CACHE_PATTERN.test(url)) { //
caches.open(CACHE_NAME)
.then(function add(cache) {
cache.put(event.request, cacheCopy);
});
}
return response;
}
function unableToResolve() {
return new Response("Service Unavailable", {
status: 503,
statusText: "Service Unavailable",
headers: new Headers({
"Content-Type": "text/plain"
})
});
}
this.addEventListener("fetch", function (event) {
// cache GET only
if (event.request.method !== "GET") {
return;
}
event.respondWith(
caches.match(event.request)
.then(function (cached) {
if (cached) {
return cached;
} else {
return fetch(event.request)
.then(function (response) {
return fetchedFromNetwork(response, event);
}, unableToResolve)
.catch(unableToResolve);
}
}, function () { // in case caches.match throws error, simply fetch the request from network and rather don't cache it this time
return fetch(event.request);
}));
});
this.addEventListener("activate", function (event) {
event.waitUntil(
caches.keys()
.then(function (keys) {
return Promise.all(
keys.filter(function (key) {
// Filter out caches not matching current versioned name
return !key.startsWith(CACHE_NAME);
})
.map(function (key) {
// remove obsolete caches
return caches.delete(key);
}));
}));
});