I am using the new webcomponent <pwa-install >Install </pwa-install> to install my PWA app build using PWA Builder. The button works well but the only problem I have is that I cant make it to disappear if the app has already been installed.
I have tried to hide the install button and only show it when the beforeinstallprompt is activate but I failed with that:
self.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
this.deferredPrompt = e;
$("#installbanner").show();
});
I also tried the appinstalled method, that did not work as well.
self.addEventListener('appinstalled', (evt) => {
app.logEvent("App is installed");
$("#installbanner").show();
});
I also tried displaying all the available methods that are contained within the <pwa-install >Install </pwa-install> but it just showed jibrish.
I am really sorry to bug everyone, may you please kindly assist
you can try using media display query, for example you can try one of the following properties:
#media all and (display-mode: standalone) {
pwa-install{
display: none;
opacity: 0;
visibility: hidden;
}
}
Related
I've tried the two following approaches to close my ionic app but non has worked.
1.
closeApp(){
this.platform.backButton.subscribeWithPriority(999999, () => {
navigator['app'].exitApp();
})
}
In this approach, when I click on the back button, the app is disappeared, but it's in the list of the background running apps. This doesn't help me, because I need the app to be completely closed and the user be forced to reopen the app by clicking on its icon.
2.
closeApp(){
const { App } = Plugins;
App['exitApp'];
}
in this case, nothing happens, i.e., I stay on the page.
Is there any other approach or plugin which I can use?
I am working with capacitor: 3 and testing on android 12.
import { App } from '#capacitor/app';
ExitApp() {
App.exitApp();
}
try this
I recently worked out a solution to another problem involving carousels on another post, but I found one issue when it comes to restarting the auto transitions from panel to the next on iPhones and iPads. (They won't restart.)
Here's a link to my original post and solution: Vanilla JS carousel next/prev button killing mouseover event pause
Here's a link to a JSFiddle containing my solution: https://jsfiddle.net/npzu90do/
After posting that solution I found that everything worked as it should accept the auto transition from one panel to the next stopped if you ever clicked the 'Prev' and 'Next' buttons on the sides. So I added this code to help restart the auto panel movement if you clicked outside the carousel.
document.getElementsByTagName("body").onclick = function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
}
Which works perfectly on all browsers except if you are on an iPad or iPhone.
I tried adding the following but that stopped the carousel from auto-starting due to errors in all browsers.
let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
document.getElementsByTagName("body").addEventListener(touchEvent, function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
});
Any suggestions?
I am working on progressive web app with ionic 3 and angular 6 framework.
Every thing works fine but when I press my browser back button or mobile back button my application get closed.
I tried to search how to do this, I am able to disable browser back button with java script but on mobile app it's not working.
<script>
// window.onbeforeunload = function() { return "Your work will be lost.";
};
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
</script>
I tried to register the back button event and lot's more but none of that is worked fine for me.
Can anyone have same issue then please tell me how to resolve this.
Thanks,
Dattatray
You can use Ionic's Platform to override the physical back button on Android.
Add it into app.component.ts file as such :
import { Platform } from 'ionic-angular';
constructor(public plt: Platform) {}
platform.registerBackButtonAction(() => {
//Add your code here
},100);
Ionic Platform Service.
In my Ionic v1.2 app I have set the following (according to the docs):
function Run($rootScope, $state, $http) {
...
ionic.Platform.ready(function() {
ionic.Platform.fullScreen(true, true);
});
}
This should make my app fullscreen and show the status bar. Of course, things look fine when previewing in the web browser (using ionic serve or http-server):
But when testing in Ionic View, the status bar overlaps with the header:
Is there some known workaround for this?
You need to use the plugin cordova-plugin-statusbar to achieve this.
Ref: https://github.com/apache/cordova-plugin-statusbar
And in your app use the below code to hide the status bar,
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
StatusBar.hide();
}
In addition of #Subash answer, you need to set some statusbar configuration in Xcode, but the trick is in your plist file. You need to add property "View controller-based status bar appearance" with value "NO". Hope it helps!
You have to install the plugin statusbar:
$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save #ionic-native/status-bar
And then you can custom your status bar as you want: https://ionicframework.com/docs/native/status-bar/
I would recommend you add these lines into your code, so you still can see the status bar at the top of the screen:
if (window.StatusBar) {
Statusbar.overlaysWebView(true);
StatusBar.style(1);
}
I have a mobile website running jQuery Mobile 1.0a2 and I'm currently testing in Mobile Safari for Firmware 4.1 via the iPhone Simulator.
I cannot seem to bind to the load event for an image.
I have a simple gallery of thumbnails and a large image. When you click on a thumbnail it changes the src attribute of the main img
The js for that uses the live('click' method to bind and it works just fine.
$('.gallery-navigation img').live('click',function() {
// change source of main image to new
$.mobile.pageLoading(); // show jquerymobile loading message
});
My problem is that I need feedback on this click, so I wanted to show a loading message (provided by jquerymobile) and then hide it once the image loads.
Where #gallery_image_large is the actual <img> where the src is changing, I tried the following:
$("#gallery_image_large").bind("load", function () {
$.mobile.pageLoading(true); // hide jquerymobile loading message
});
This works in Safari on my desktop but does not in the iPhone Simulator mentioned above.
For reference:
jQuery Mobile Loading Message Methods
UPDATE: I am experimenting with JQuery Image load fails on MobiOne iPhone simulator, which explains how to implement the .load manually by "checking .complete".
I changed the structure of my jquery and it's seemed to have fixed it!
$('#gallery_image_large').one('load',function() {
try { // a grade
$.mobile.pageLoading(true);
} catch(err) { // low grade
}
}).attr('src',full_src);
(as you can see, I opt'd for a try { .. } catch { .. } to verify jquerymobile is available.
Although I didn't use the solution (directly) from JQuery Image load fails on MobiOne iPhone simulator, the manual firing of load via .complete is probably a good solution for anyone else out there!