I recently made my first progressive web app with a service worker generated by the Google node module "sw-precache" (I've used the Gulp task in the demo). Everything works fine and I am able to navigate through the web app when I am offline using Chrome on mobile or using the icon created by Chrome using the "Add to home screen" option (my progressive web app).
I only have one weird issue: if I am offline and I refresh the page in Chrome, it still works but if I do the same using the pwa, it shows the dinosaur and the "You are offline" message (refresh by scrolling up). But if I navigate through the app without refreshing a page, no dinosaur.
Is it a known issue?
From the looks of it, you jut only used sw-precache. The service worker seems to does not have an event handler to listen to what to do if the page is not cached. You can use sw-toolbox to handle the caching of future visits and handle the offline page. Heres the code
self.toolbox.router.get('/(.*)', function (req, vals, opts) {
return self.toolbox.networkFirst(req, vals, opts)
.catch(function (error) {
if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
}
throw error;
});
});
Related
I am trying to integrate reCaptcha with my Ionic Android/IOS app. The reason for this is that it calls the same API as the public Web app API.
I have tried creating a web key but due to the fact that the app is served from file:// it doesn't have a domain and as such i cant white list it.
I also tried to create a Android key and white list the App's package name but in both cases, i get the same error:
"error for site owner invalid domain for site key"
I tried using these recaptcha angular wrappers: ng-recaptcha and angular2-recaptcha, but obviously they fail as is a domain issue.
Is there any way to go around this?
So, after long searches and reading everything i found on the subject, i managed to find a workaround.
Instead of trying to load the captcha in my Ionic app, i am using the in-app-browser to open a page on our web version of the app that has the captcha. When the captcha is checked, it saves the code in the localStorage of the in-app-browser.
When the browser is initially opened i start running a script on the browser that checks its storage for the captchaCode.
Code example:
captchaCheck($event){
const browser = this.iab.create(YOUR_CAPTCHA_PAGE_URL_HERE,'_blank', 'location=no'); //AppSettings.CAPTCHA_URL
let loginCtx = this;
browser.on( "loadstop").subscribe(function() {
browser.executeScript({ code: "localStorage.setItem( 'captchaCode', '' );" });
var loop = setInterval(function() {
browser.executeScript({code: "localStorage.getItem( 'captchaCode' )"}).then((values)=>{
var captchaCode = values[0];
if (captchaCode) {
loginCtx.signinForm.get('captchaCode').setValue(captchaCode);
clearInterval( loop );
browser.close();
}
});
});
});
}
}
I'm building an android app with Ionic and cordova.
I have one wordpress website - where is oauth2 plugin installed with some access functions. I want first to get code and later send post to retrieve the token. I tested it in web-browser and it works well:
location.replace('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/');
Im getting code after client login to my website and its redirecting to my app which is standing on ip 192.168.0.129:8100 with code in url - it wo. But in the android Im usining:
var options = {
clearcache: 'yes',
toolbar: 'no'
};
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options)
.then(function(event) {
}).then(function(){
});
Everything works but not redirection - it cant load my app again. I made some research and mostly people place http://localhost/ or http://localhost/callback to go back to android app but it also doesnt work for me. What is the redirect URL than?? How to get back to the app?
of course 'xxx' are just for example;)
After you have opened the url in the in app browser with $cordovaInAppBrowser , you need to listen to an event, $cordovaInAppBrowser:loadstart as described here, http://ngcordova.com/docs/plugins/inAppBrowser/.
So you can do it in the following way,
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options);
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event) {
// check event for which url loaded. if it loaded the http://192.168.0.129:8100/ with the access token, then handle it there and close the in app browser with, $cordovaInAppBrowser.close();
})
I am building an Android App, using Phonegap. I have included oauth.io and have configured twitter / google+ and facebook logins.
I have included : OAuth.initialize('ACTUAL PUBLIC KEY'); in the device ready event.
I have written the same function, as per sample :
function login(provider, callback) {
OAuth.popup(provider)
.done(function(result) {
callback(null, result);
})
.fail(function(error) {
console.log(error);
callback(error);
});
}
When I call this function, InApp browser is opened and credentials are coming up, for each provider respectively. When the user logs in successfully, it goes to
http://localhost/#oauthio=%7B%22status%22success%22%2C%22data%22%3A%7B%22oaculDQAHRHACioXNL2BHMoFMHXQzKWZZn%22%2c
It does not come back to the Android App.
The InApp browser also does not close automatically.
As per manual, it should call back the function. Instead it is redirecting to a web page, which does not exist in Phonegap App.
Please guide.
Removed and added the plugin. It worked. Thanks.
Im just learning PhoneGap and I have some problems conserning the databases...
SO I want to connect to my localhost databse and simply display the items from the table.. With the ripple emulator everything works, but when I install the app on my device the data is not displayed, but im not getting any errors either.
So I am using the PhoneGap Desktop App. The server is running on http://88.216.170.246:3000
So in my ajax I do this:
$(document).on('click', '.show', function (e) {
$.ajax({
type:"GET",
url:"http://88.216.170.246/Test/www/getData.php",
success: function(result) {
if (result) {
$(".show_data").html(result);
}
else {
alert("error");
}
}
});
});
});
This renders everything perfectly on the emulator, but on my phone, nothing happens... Does the url not work? Maybe I cant access localhost on my device?
Please read:
Top Mistakes by Developers new to Cordova/Phonegap
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md
READ #1, #4, #5, & #10
#4 reads
In the code, did not listen for the 'deviceready' event.
This is listed MULTIPLE times in the documentation, and is include in every example where it is appropriate. It is still missed. Brian Ford - an Angular developer, points to the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
Please read the FAQ and follow the links. You have made many bad assumptions.
Best of Luck
Jesse
We are in the midst of creating a PhoneGap-based app using AngularJS and the Ionic framework.
This app is a store management system which ties in with an existing web app using OAuth2, and we have a problem with Android redirecting after authentication.
An event listener is set up as follows to close the InAppBrowser window either upon successfully connecting or cancelling::
if (runningInCordova) {
connectWindow.addEventListener('loadstart', function(event) {
var url = event.url;
if (url.indexOf("code=") > 0 || url.indexOf("error=") > 0) {
return callback(url).then(function() {
connectWindow.close();
},
function() {
connectWindow.close();
});
}
});
For browser testing purposes, a localhost redirect URI is also defined:
http://localhost:8100/oauthcallback.html
On iOS this works fine and the InAppBrowser closes immediately when it should, but on Android there is a delay before this event listener fires. The result is that for about 1 second the following error message is displayed:
Web page not available
The web page at http://localhost:8100/oauthcallback.html could not be loaded as:
net::ERR_CONNECTION_REFUSED
The event listener then fires and the window closes.
Is there any way to make the event listener fire more quickly in order to avoid this error?
Many thanks
This can also happen if you are to trying to access the InAppBrowser library, but not having the plugin installed in your PhoneGap project.