I've been trying out the example in the doc (https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html) but don't seem to be able to trigger the "add to homepage" banner.
Is there a way of defining and manually triggering it? or building a popup to perform a similar action?
In the perfect world, i'd want the same popup to work for both ios and android.
Requirements has changed to display the "Add to homepage" banner.
You need to have:
a name and a short_name
an image sized 192x192
a service worker to make some stuff offline
You need to define an empty service worker like this:
self.addEventListener('install', function(event) {
});
self.addEventListener('fetch', function(event) {
});
Related
I've been trying to implement some animation for sending messages through GiftedChat but it's giving me quite abit of issues.
Can't seem to find any resources on this except for this thread:
https://github.com/FaridSafi/react-native-gifted-chat/issues/592
The goal is to have the new messages slide into the chat demonstrated by a lot of other chat apps such as facebook messenger and whatsapp.
My current implementation uses layoutAnimation but I'm not sure where to put it to ensure that it's bug free.
When I put "LayoutAnimation.configureNext(config)" under my useEffect for when the messages update, it seems to work on on ios but on android, it leaves a blank space in the chat and messes up the layout.
blank space on android
So my solution was to put it under onSend so that the animation only plays when sending a message, but this is also bugged in my code because I have "onInputTextChanged" setup under GiftedChat to hide the left actions when typing a message and the animation plays for hiding the left actions instead of new messages.
Here's my code:
<GiftedChat
...
onInputTextChanged={text => {text != ‘’ ? this.setState({hideActionButtons: true}) :
this.setState({hideActionButtons: false})}}
onSend={messages => {
this._onSend({ type: MESSAGES, messages })
LayoutAnimation.configureNext(config)
}}
...
/>
Any suggestion is appreciated, thanks.
Working on a Project and stuck in an Issue:
Hardware Back Button Reloading Application (I am using Angular Router in this application).
My Code to Exit Application:
ionViewDidEnter(){
this.subscription = this.platform.backButton.subscribe(()=>{
navigator['app'].exitApp();
});
}
ionViewWillLeave(){
this.subscription.unsubscribe();
}
While same logic Working in other applications. but in this application its reloading the application not exiting it.
P.S: i have also tried it to put in platform.ready() but no luck.
With IONIC 4, there is new method subscribeWithPriority developed to handle race between soft & hard back button. Try modifying your code like below:
this.platform.backButton.subscribeWithPriority(1, () => {
navigator['app'].exitApp();
});
subscribeWithPriority() stops the propagation of the event after its execution and if we subscribe with high priority and execute our prefered navigation instead of default one then it is going to work as you want.
More reference docs for details:
https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795
https://medium.com/#aleksandarmitrev/ionic-hardware-back-button-nightmare-9f4af35cbfb0
UPDATES:
Try using this new version of exitApp cordova plugin. I haven't
tried myself but looks promising from popularity.
Also try to empty the page stack from Navcontroller or go to your home screen, seems like that's causing the reload for app with sidemenu's & tab pages... this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen'), and then call exitApp.
NOTE: Tabs & SideMenu as those have its own routing module does create lot of complexity with app navigation.
Solved:
As Mention by #rtpHarry template of SideMenu / Tabs have History which leads application to Reload it self on root page. i was able to solve this by clearing History.
ionViewDidEnter(){
navigator['app'].clearHistory();
}
on Your Root Page just Clear your history and your Hardware Back Button will close the Application instead of Reloading it.
Do you have a sidemenu in your app? I'm just curious because this seems to be when I get this problem as well.
If you look in your inspector, you will see that window.history has a length of 1.
I don't see it in some of my apps, but the app that I have a side menu setup acts this way - on the homepage if you press back the screen goes white then it reloads the app.
Like I say, looking in the inspector shows that there is a history to step back to, which it is trying to do, and whatever that history step is, it just pushes it forward back to the homepage, which made me wonder if it was the sidemenu setting up its own control of the navigation system.
I've probably said some poorly worded terminology but as I haven't solved this myself I thought I would just let you know what I had found... hopefully it helps you move forward.
In my scenario, I wasn't even trying to do the exit on back code - I just noticed that the app would appear to "reboot" if I kept pressing back.
This explain the solution on Ionic 5 (and 4.6+ too I think).
private backButtonSub: Subscription;
ionViewDidEnter() {
this.backButtonSub = this.platform.backButton.subscribeWithPriority(
10000,
() => {
// do your stuff
}
);
}
ionViewWillLeave() {
this.backButtonSub.unsubscribe();
}
also keep
IonicModule.forRoot({
hardwareBackButton: true
}),
to true (default) in your app.module.ts
Sources:
https://www.damirscorner.com/blog/posts/20191122-CustomizingAndroidBackButtonInIonic4.html
The Doc
I have created a new Ionic app and setup the cordova local notifications plugin to have notifications run in the background without the need for an external server such as Google Cloud Messaging using this plugin.
https://github.com/katzer/cordova-plugin-local-notifications
Everything seems to work but for some reason the icon shown in the notification isn't the one that I am setting in the js below - can anyone suggest what is wrong - it does show an icon, (an alarm bell) but it isn't the one that have I specified.
// within my $ionicPlatform.ready
$scope.scheduleSingleNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
title: 'Warning',
text: 'My first local notification this will stick!',
icon: '../img/github-icon.png'
}).then(function (result) {
console.log('Notification #1 triggered');
});
};
I had same problem few months back but than i have given a hit and trial an it worked for
create the icons of all sizes and copy them to /platforms/android/res/
and respective folders of sizes i hope that will solve problem
An always give the path of img respect to your index file not the file in which your are coding but to the main file in which it's included
Make sure that the icon has a white or transparent background. If you take a look at the documentation:
Android notifications
icons should only be a white-on-transparent background image.
Testing a Progressive Web Application.
When I start the app in airplane mode, I get an unexpected startup/splash experience (Android/Chrome).
Launch from Home Screen Experience
I see a white screen, followed by a brief flash of the "offline dinosaur" before the app successfully starts and all is well. The startup time is longer than I expected, especially after testing with Chrome Devtools on a laptop, where startup is near instant.
Since it is a little tricky to debug where this time is being spent (especially in the “service-worker-not-running” case), it would be helpful to have some baseline knowledge:
Launch from Browser Experience
Just a brief flash of the "offline dinosaur" before the app successfully starts. Starts much faster.
Questions
What is the expected startup time and experience on Android/Chrome?
Is the experience described above just the current state of things (11/2015)?
Is there any way to specify the startup (splash) experience for Chrome? (I'm aware of background color and 144x144 icon in app manifest for splash, but for Opera only)
First time PWA for me, so any information on this would be helpful.
My platform:
Samsung GS 5,
Android 5.0,
Chrome 46.0.2490.76
The reason for the existence of the splash screen is because on mobile it can take over a second to start the render process so we paint something (the background colour and icons) util you have a first paint generated by your app.
If you are seeing a white screen on startup it might be because you added to the homescreen prior to Chrome landing (46) the splash screen feature. Some things to lookout for:
Ensure your manifest has a short_name and name
Ensure your start_url is in the same scope as a SW that is registered on the page
Have good icons in the manifest ideally > 192px
Set background_color in the manifest to the color of your background on the page (ideally.) This will ensure that the splash screen is the expected colour of your site.
You shouldn't see the offline dinosaur at all, even when you are in aeroplane mode. Airhorner should represent the ideal experience: Blue splash screen with an icon that morphs into the display of the app.
re: Icons - I recommend actually 192px icon or higher.
Regarding the offline-dino flash:
I was using sw-toolbox and performing asynchronous work to setup route handlers at worker startup. This caused an offline dino flash when the application was offline and starting up.
To avoid that, set a sw-toolbox default handler that waits for the asynchronous route handler setup to complete.
var toolbox = require('sw-toolbox');
var setupPromise = someAsyncHandlerSetup()
.then(function () {
// make default handler temporary, allows other fetch handlers (like sw-precache, for example)
toolbox.router.default = null;
});
// until the async handler setup is done, provide a default handler
// to avoid an offline-dino flash when starting up while offline.
toolbox.router.default = function defaultHandler (request) {
return setupPromise.then(function () {
var handler = toolbox.router.match(request);
if (handler) {
return handler(request);
}
throw new Error('default handler could not handle ' + request.url);
});
};
I am very new to html5, css and javascript. i have knowledge in android development.
Now i have started working on phonegap projects.
In my project i want show a loader just like a progressdialog in android when application moves from one screen to another screen or loading something.
Can any one help me to do this in html5?
I had similar need . I was able to do it using navigator object. Please find below sample code
to load data in background
function someJSFunctionLoadingData() {
navigator.notification.activityStart("Your message....", "loading");
////// some activity
navigator.notification.activityStop();
}
Further to navigate around you could use introduce a small delay ( 2 secs) and let progress bar load during that time and then direct user to the url you need. Below is the example for same
function loadMyUrl(){
navigator.notification.activityStart("Loading some url....", "loading");
setTimeout(function loadMyUrl(){
navigator.app.loadUrl('file:///android_asse/www/someurl.html');
navigator.notification.activityStop();
}, 2000 );
}
I got above idea from this link
An easy solution would be to just create a css based spinner element and set it to hidden/visible when needed via your js.
I searched and found tons of examples online here is one for example.