(v6-core-webpack) Type route url on browser... share links... bookmark... ¿browserHistory ... deep-linking?

1

Hello
(Framework7 v6, core, webpack)
I’m searching the way to share the link route to a specific section on the web app version:
Something like write in the browser the route like:
https://my-appdomain.com/calendar/
https://my-appdomain.com/element/123
To have the possibility of sharing the link to any diferent app section, element by code or any other… bookmark it and so on…
I’ve try set browserHistory to true, set browserHistoryRoot, browserHistorySeparator…
But anyway if i write the link in the browser doesn’t work… it show a blank page.
¿Is there any way of doing this?
I think in cordova android app it can be does with deep linking or something…
Can be does in framework7 have the web app version with url links to access to diferent sections and the deep linking to access the same sections in cordova android app version?

Thanks in advance

2

You also need to configure web server correctly. Refer to your server implementation documentation

3

I’ve found sometime ago you said it’s not supported… entering the address in the browser address bar… but this is really interesting, people usually don’t type the URLs by themselves, but the URLs can be shared, bookmarked, a QR code can be created with them… and so…
¿This is still not supported, the possibility of access to a section of the web version app using the URL?
¿Is this a problem on server configuration?
Thanks in advance :slightly_smiling_face:

4

I’ve implemented a way of doing, not yet the deeplinking, but a way of capturing the URL in the web app to go to a route inside the web app:
The way I do the URL need to be writed in this way:

https://domain-name.com/web_app_path?route_to_go
because I just get the string after the ?

I need to improve everything of doing, but i’m just begining this way:
In js/app.js I do:

var app = new Framework7({

  // [..... SOME CODE HERE ......]

  on: {
    init: function () {
      var f7 = this;
      // I use cordova or web app so:
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      } else {
        var searchRoute = window.location.search.substring(1);
        console.log(searchRoute);
        if ( searchRoute != "" && searchRoute != undefined ) {
          window.initRoute = searchRoute;
          window.appfirstTime = true;
        }
      }
    },
  },
});

In the pages/home.f7.html file (i’m using webpack) I do this:

$on('pageAfterIn', (e, page) => {

  if (!$f7.device.cordova) {
    if (window.appfirstTime == true) {
      // I'm going to do this only one time
      window.appfirstTime = false;
      if (window.initRoute != undefined) {
        $f7router.navigate(window.initRoute);
    }
  }
});

This is the first try that works… It must be improved… in example testing if the route pased is a valid one; too doing the navigation in other place on the code, because now the home page shows first and the it go to the route…
maybe the route can be used without using the ? simbol, maybe to do this other way is needed to configure something in the server, like Vladimir said…

5

In previous comment i show a way of catch the url in web app, here the deeplink in android app
Deeplinking:
I’ve installed the
cordova-universal-links-plugin-fix
cordova-universal-links-plugin

in cordova/config.xml
I’ve added these lines:

<universal-links>
    <host name="my_website_url.com" scheme="https"></host>
</universal-links>

I’ve write it just over the line:
<platform name="android">
The universal-links can have some other parameters, like diferent events to be launched depending on diferent routes in the URL to be catch… as described in this link:

In js/cordova-app.js
I’ve added this:

var cordovaApp = {
  f7: null,

  //*** code added begins here ***
  // Application Constructor
  initialize: function() {
    this.bindEvents();
  },
 
  // Bind Event Listeners
  bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
  },
 
  // deviceready Event Handler
  onDeviceReady: function() {
    universalLinks.subscribe(null, cordovaApp.didLaunchAppFromLink);
  },
 
  didLaunchAppFromLink: function(eventData) {
    alert('Did launch application from the link: ' + eventData.url);
    //Here you have the URL to manage it as you wish... 
  },
  // *** end of code added (added too a line later) ***
  // This place you have more cordova-app.js code

  init: function (f7) {

// This place you have more cordova-app.js code

// *** Next line added too...
cordovaApp.initialize();
  },
};

export default cordovaApp;

And i’ve need to create a file in the server side:
In the route: /.well-known
I’ve need to create the file:
assetlinks.json
with this content:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "your.package.name",
    "sha256_cert_fingerprints":
    ["THE:FINGER:PRINT:FROM:THE:SIGNED:APP"]
  }
}]

To get the fingerprint from the signed APK i’ve used this command line code:
keytool -list -printcert -jarfile app-release-signed.apk
I’ve not uploaded yet the APK to Google Play, but if the APK is in Google Play you can find the fingerprint under: Setup → App Integrity

I’ve not used yet the webpage link described here:

So with this when I click on a url link the android device shows a dialog to chose open the link in the app or in the navigator

I’ve seen there is other diferent thing named intent filters, but i’ve not yet understand and use it… The intents are described here:

And i’ve find a intents plugin too: