PWA on Android: Hiding the top bar with the clock? - progressive-web-apps

I've got a manifest.json with
"display": "fullscreen",
"orientation": "landscape"
but when launched from the "install to home screen" icon, the very top bar with the clock and notification icons is still showing. Any way to have a true-fullscreen option?
The chrome docs say I can also use "standalone" - but even with that, it still shows the top bar.
Hard to make an immersive game!

As abraham said in the comments, using "display": "fullscreen", is the correct way to do it.
If you change the display property after the PWA is installed, it could take up a day for Chrome to update and change the display mode. See How Chrome handles updates to the web app manifest for details on how manifest changes are handled.
During development, the best way to check how changes to the manifest are handled is by doing an uninstall/reinstall.

Related

PWA iPhone icon not used when not on the home page

EDIT:
I've removed a bunch of the explanation that I had here, because I realized that the issue was intermittent and my previous thoughts were misled.
The issue is that the iPhone loads both a screenshot and your web app's icon when downloading your PWA. Whatever loads last gets used as the icon (race condition bug). My solution was to make the icon file size huge, which causes it to always be loaded last.
Here's how I tried setting the icon using Apple's own documentation.
I added this to index.html;
<link rel="apple-touch-icon" sizes="180x180" href="ream4.png">
Also tried without sizes, because why not;
<link rel="apple-touch-icon" href="ream4.png">
If anyone wants to compare, this is my manifest.
{
"name": "Ream",
"short_name": "Ream",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"icons": [
{
"src": "assets/ream6.png",
"sizes": "64x64 180x180",
"type": "image/png"
}
],
"background_color": "#f8f7fa",
"categories": ["books", "stories", "memberships"],
"homepage_url": "https://reamstories.com"
}
When I download the app from whatever location, it does download as a PWA and I can use it fine, but the icon is not downloaded unless I create it from the home page of the app. I want the icon to always be used regardless of where the user is and stop using screenshots as icons.
EDIT:
More details. The issue appears to be intermittent. Sometimes it uses a screenshot, sometimes it uses the icons. I have no idea why. I tested this by closing the tab and reopening it several times, each time I would try to download the PWA again. Sometimes it downloads the icon, sometimes it uses a screenshot. iPhone is just garbage code?
EDIT (I think I understand what is happening): It is in fact intermittent. When the cache is cleared, the icon takes longer to load which causes it display because it loads after the screenshot is generated. I think my fix is to make the icon really fng big. So it will always load after the screenshot.
This is a bug in Apple's pigsty code. The only solution is to use a larger image so that the image loads after the screenshot gets taken.
I solved this by increasing the size of the logo image from 180px to 980px. Now it works every time.
I guess this is to be expected from a startup company.

Customizing page transitions with Convertigo

I am currently building a cross-platform mobile application with Convertigo Studio, and the iOS default transition between pages does not fit well with the design : I would like the transitions between pages in the iOS app to be identical to the Android ones.
I have narrowed the problem to the Ionic navCtrl.push() call, probably made by the Convertigo PushPage component.
According to this blog post, it is possible to force transitions with the animation field of the call configuration object :
this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-android"});
Convertigo Studio allows me to edit the animate and duration fields, but not animation.
Without patching the Studio, is there a way to override the iOS default page transition ?
Yes in 7.5.7 version Convertigo studio does not expose the transition type property for push pages. This has been added in 7.6
Nevertheless, you can customize your template (The mobilebuildet_tpl_7_5_7 project in the workspace) the add a default transition into the app module this way :
in ionicTpl/src/app/app.module.ts
Change line
IonicModule.forRoot(MyApp, {}, deepLinkConfig)
to
IonicModule.forRoot(MyApp, {
pageTransition: 'ios-transition'
}, deepLinkConfig)
This way, all page transitions can be set to iOS or Android mode whatever the app runs on.
Do not forget to reload your project (Right click on project->Reload your project) to have the MobileBuilder to regenerate the Ionic project sources and re-execute the app viewer to rebuild the app.
Hope That Helps !

cordova-plugin-smooch issues with iOS/Android app built using creator.ionic.io

Am using http://creator.ionic.io to create a hybrid iOS/Android app.
Have added cordova-plugin-smooch as a plugin in Code Settings.
Have added ionic-native.min.js.
Have added smoochio.js with following code...
Smooch.init({
"appToken": "MY-TOKEN",
"soundNotificationEnabled": "true",
"imageUploadEnabled": "true",
});
The smooch.io button appears in the app but I think it's not 'native' because when user tries to type in message field, the iOS keyboard goes on top of the message input field so user can't see what they are typing. Also, in the smooch.io message window header, the 'X' or close icon doesn't show up...
Not sure what I'm missing to activate the 'native' plugin so it functions correctly on the phone. Thanks for any help.

Can we write the action for Home button in iphone

I am going to develop an application which will be posted in cydia. My requirement is after unlocking the iphone when the user clicks the home button then my application need to be popedup(run) ..
is it possible to do this?
if yes how?
You can do this without any extra code by changing the settings in Activator. The app doesn't need to be in Cydia, either.
Confirm you have Activator installed from Cydia.
Go to the Settings app, followed by Activator.
Choose which environment you want the action to run in: Anywhere, Home Screen, in an app or Lock Screen.
Scroll down to “Home button” and tap the action you want.
Scroll down again, until you see the app you want. Tap it and confirm there is a check mark next to it.
Now your app will start every time the action occurs. If you want this to be automatically set when your app is installed, however, you'll need to include the libactivator header in your code and use its API to set the action. Because the header isn't included with iOS, you'll need to make the app for Cydia.

Is it possible to change the app icon programmatically?

I want to make two different app icons, and programmatically switch betweem then. When the user quits the app without finishing an workflow-process, then I want to switch to an icon that will indicate that there's something undone when launching the app. Well, just theoretically, just for testing.
I think that the icon file is just a normal file as any other, so if I would just rename it programmatically and then give another icon file the name of the icon file that's named the Info.plist, then the app should show up with another icon, right? Would that be possible? Or do I have no access to that file for renaming it?
icon file stored in "application bundle" folder.
And your application has read-only rights to this folder
There is no oficial way to change/rename thees files.
You can add integer badge to youy icon
[[UIApplication sharedApplication] setApplicationIconBadgeNumber:666]
But it is not official method.
It sounds like a good idea, and I would definitely give it a try, but I get the feeling this isn't possible.
I believe the app icons get stored in another file structure global to the iPhone. I say this because after I installed 3.0 beta 5, I saw a bug where the app icon disappeared from an app I developed. Then after installing two new apps from the app store, the new app's icon appeared on my app, and the 2nd new app's icon appeared on both new apps. Essentially the new app icons shifted to fill in for the missing app icon.
Removing and re-adding the apps, then rebooting the phone, restored the icons properly.
I don't know for a fact how the app icons are managed and stored on the phone, of course, but it would fit to say they are stored in some sort of cached list that gets rebuilt occasionally, perhaps after a reboot. That would mean even if you could change the icon from within your app, it would take more effort to see the effects on the phone.