Capacitor native menu with embedded website - ionic-framework

I develop a platform used by teachers.
This platform uses "old" technologies like PHP, JS, JQuery etc ...
I want to offer a mobile application that would allow you to use the web platform (already responsive)
I already did two years ago a first version of the mobile application with Cordova:
The Cordova application requests a login and password, makes a token request to the platform then uses the token to load the pages with Window.cordova.inappbrowser.open in full screen
It works well (with some functions to manage the photo, downloads etc).
Today, I want to offer better: since Cordova is starting to be obsolete, I turned to Capacitor Ionic.
I want to use the same operation for the login (it already works) then load a native page with a menu and a space where the pages would be loaded according to the selection in the native menu.
But being new in Ionic / Capacitor / Angular, I am a little lost:
Use WebView
Make a routing to the web page
Use a JS function that loads the page in the div ...
Here is the current state the application:
I want to load a page like https://alpha.website.net/index.php?page= in the white part when the user clicks on the menu on the menu
Thank you

Related

Share my objects using a link - ionic3

I'm imagining this situation: I have my app opened on my device. I've just created a new element (object) in my app, for example a new Film like this
film = {
title: 'Shark 3',
subtitle: 'the revenge',
date: '12-11-2019',
plot: '...'
};
and I've saved it in my local storage. Now I want to share it on socials (WhatsApp, Facebook...) generating a link to this object. By clicking on this link I want my app (or the app store if it is not installed) to open. In case my app is installed, it should display a page with the film's information.
Is it possible? How to do this in ionic?
The data you want to present is stored within the app and so available on every device your app is installed, I guess? Or is it data loaded from a backend?
What you want to do is called a Deep Link. This means clicking on a links opens your app and redirects the user to a specific page depending on the link.
This is possible with Ionic and the DeepLink native plugin.
But there need to be done other things outside your app to make it work. You need to register and verify your domain with Google and/or Apple.
And be aware testing this is very uncomfortable. It will only work with signed packes. So just running ionic cordova run android won't work, you will have to go the whole way creating a signed package as you need to do when you're going to publish it.
Here is a Blog article describing the functionality.

Azure Mobile Services authentication doesn't work Internet Explorer Mobile

I was interested in developing my app on Azure Mobile Services and notice the authentication flow uses iFrame pattern which does not work on Internet Explorer mobile. However, the authentication works fine on Safari mobile. It seems silly to develop an app using a Microsoft service that isn't supported by Microsoft browser. I assume there is a work around but I just can't find it. Can someone point me to a link or explain the solution? I could always fall back to building my own ASP.Net website with true page redirects instead of iframes, but I would rather leverage what Mobile Services offers. Any help is appreciated.
Edit (Response to phillipv):
Version:
I was using the starter project that is generated by the Mobile Services portal. It comes with a script reference in the index.html page seen here:
<script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.5.min.js'></script>
I modified the project slightly by adding a login button at the top, which when clicked calls the login function in the SDK, which was taken directly from the sample code as seen below:
client.login("facebook").done(function (results) {
alert("You are now logged in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Perhaps there is some flags i need to pass to the function to force it to use full redirects instead of iframe transport.
Browser Version: I'm not sure where to find this, but I'm on Windows Phone 8.1 which has auto updating apps so I assume whichever IE Mobile that is latest.

Which GWT Layout Panel is perfect for building Mobile Friendly Website?

Ok, A Mobile Friendly Website should be very short and focus on the task, so it wont need to show the headers as in Desktop Website.
Here is What I want to design.
When user open mydomain.com in Mobile devices like Smartphone or Tablet. They Will see
Email:
Pass:
Login
Registration
Explanation
About
When they CLick Login they will go to a page that lists all the products, the Page Should has "Home" link the Back button
Home Back
Product 1 , some other info
Product 2 , some other info
Product 3 , some other info
......
When user clicks on a product, it will show the details of the products
Home Back
This is Product 1
Detail info of product 1..
If user hits "Back" button then it will go back to the previous page (ie, the list of products page).
Note that: in the home page, we also have "Registration", "Explanation" & "About" Buttons, but we will never show these buttons in any other pages except the home page.
So, my question is:
Is there any Gwt Layout panel that can help me to achieve that Simple Design for Mobile Friendly Website?
The only 1 I can see is the TabLayoutPanel, but the headers are always appear in all pages.
What about "StackLayoutPanel"? How it look like? & is it good for Mobile Website?
It's better not to use any LayoutPanels in mobile apps. Ideally, you should not use any widgets that implement RequiresResize interface.
Such widgets rely on JavaScript to resize them. This is very slow compared to native browser layout mechanism. It also requires much more code. The difference is not significant on desktop, but very important/noticeable on mobile.
A good mobile library should rely entirely on a native browser layout mechanism, like a flexbox model. This is the key reason to consider mgwt for mobile development.
None of the widgets included with GWT are primary thought for mobile, so I recommend that you use another library like m-gwt, gwt-mobile, or touchkit.
Anyway there is a very simple mobile web example application in the GWT trunk which you can use as reference. They use DeckLayoutPanel since you can add multiple views and let it to animate between them. You can try this live demo from a mobile device (you can append formfactor=mobile/tablet/desktop to switch view implementations). The demo is very old, without using modern CSS3, but helpful.
So, if your application is very simple use DeckLayoutPanel, but if it's going to getting bigger, it's better to consider a mobile specific library.

Not able to Close blackberry 7 browser from my code

Thanks! Hello everyone! I am making a BlackBerry 7 mobile native application. On click of button from my native application. It will be open a URL in a separate browser. So, I want to close the opened browser. The URL it is opening. This URL is separate domain, but this is my page, in this page i have tried following code. But, it is not working -
blackberry.app.exit();
window.close();
System.exit();
I have tried to open the URL in my native application using iframe. But, here always taking me splash screen instead of loading URL.
Are you using WebWorks or Cordova (nee PhoneGap) ? One solution is to use Cordova 2.9 (the last version to support BBOS) and the InAppBrowser API.

ASP.Net MVC 4 not using Mobile Views on iPhone standalone app (after adding to homescreen)

I have a web site that I have built in MVC 4 that has both Web and Mobile views. I am using the .Mobile extension on my views to render the mobile views when someone visits the site from a Mobile phone and that's working great. When I visit the site from an iPhone it detects the browser and displays the mobile views correctly.
However, if I add the app to the home screen and I navigate to the site by clicking on the Home Screen icon, MVC uses the standard web views.
I can only assume that when Safari is used in standalone/fullscreen mode it sends through different headers, which MVC does not recognise. (Side note: It also seems to ignore auto-login cookies that were previously set when the site was accessed normally through the browser).
What do I need to do in order to get MVC to recognise that it's still a mobile browser and render the Mobile views?
the simple if not particularly elegant way of getting this to work is to output the useragent string when launched from the home screen icon ... and then manually overriding to make sure that that useragent or some part thereof loads mobile like this question shows how to do :
ASP.NET MVC 4 Mobile Features