How to hide navigation bar in pwa when opening external link - javascript

what is the best possible solution to hide navbar with three dots when opening external website in PWA app?
The case is that the app is already build, but when clicking the external link I wanted to open as standalone mode in app, so the only possible way to go back will be by using swipe gesture on android ;)
That is the code used for open this:
class="space-button"
on:click={() => {
if (depObj.viewUrl) {
window.location.href = depObj.viewUrl;
}
}}
>
BUTTON TO OPEN EXTERNAL LINK
</div>

In your webmanifest.json the scope attribute defines what websites belong to your app. If the user navigates to a website not covered by the scope, it will be opened outside of the application window.
See more here: developer.mozilla.org

Related

Telegram Web App Bot, error redirecting to a new page on android

I can't redirect user on new page with javascript variants code:
window.location.href=url
window.location.replace (url)
window.location.assign (url)
The problem of redirect only on android, on other platforms there is no problem with going to another page.
How to fix it on android ?
View problem:
when going to any page
In order to solve the problem you have to understand it. This happens on the Android version of Telegram in WebApps. When you click on a link, it does not open in the WebApp area but in the browser.
This browser is Telegram's internal or external browser, depending on what was indicated in Setting/Chat Setting/In-App Browser.
This bug occurs regardless of the link. So not just with your Javascript calls. A simple produces the same effect.
It seems that it comes from a bug at the level of the WebView therefore in the code of Telegram. So a change in the code of your WebApp (another Javascript function for example) will not change anything.
Solution
The solution that I tested and that works is to use an iframe. Instead of having for example index.html which has links to page1.html and page2.html, you rename your index.html to menu.html and you make an index.html page which has an iframe containing menu.html.
If you put a borderless and full-surface iframe, the user won't notice anything.
And no need to go from menu to page1 or page2 with an iframe.src: direct Javascript links between pages that are in the iframe work perfectly, just like simple href links.
Just one point: you have to perform a window.Telegram.WebApp.ready(); in your first page so the one with the iframe (and also in the others)

Ionic - Open some URL into modal

I'm not sure if this is even possible but, I have a button (Add event to calendar).
This button should let the user create an entry to his Google calendar.
For this, I have to open somewhere this URL
My concern here is that I don't want the user to "quit" the main page (where the button is placed). So opening it in a new tab is not an option.
So I'm wondering if it is possible to open it in ion-modal or anything else that keeps the user with the page.
If your app is based on cordova you can use In App Browser to load a url within the app.
If you are using capacitor you can use Browser Plugin, same purpose.

How to open a browser app which is listed in chrome://apps

Chromium-based browser has the apps page at chrome://apps
There are some apps that I have installed into it. Is it able to launch one of them from JavaScript somewhat just like opening file selecting box?
I can open chrome://apps by setting this URL in to a link, but how about a single app?
Copied from: Open Chrome in a new window (Chrome app)
Sadly, there's no way to do that I know of.
Using window.open in an app's context is a bit of a hack, but results in the URL being open in the user's default browser (not necessarily Chrome). There's no control as to how the browser chooses to open it.
There's a Chrome App-specific API that was created specifically with "open a page in Chrome" in mind, chrome.browser. However, it still doesn't provide an option to open in a new window.
The closest you can get is to create your own "browser": an app window with an in it. Then you have full control over the presentation, but it's not integrated with Chrome's profile and may require additional work to implement things like dialogs and browser controls. See the Browser sample app and documentation.
You may need the app id which you can then append to the URL. I am not entirely sure how you would find but if you go to the apps page on chrome, drag the icon of the app to the search bar in the browser, you should get the full link.
For instance, I dragged the Google Slides Icon onto the search bar and it gave me this url chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html. So, you may give it a shot! Try to open the chrome apps page, then drag the app you want to open in new tab onto the search bar.
Hence, using Javascript:
window.open("chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html", "_blank");
Opens Google Slides App in a new tab.

Opening links in a PWA without showing the url?

I've found some similar questions but none that address my particular use case, I have a PWA written in Angular that displays a menu with external links. For example I might open the PWA and see a menu with an icon for Stackoverflow, Github and Reddit. When I open these links they open in a knowdown version of the browser I am using and for some users in a seperate browser instance altogether.
Would it be possible to hide the URL bar at the top of the screen? My goal is to hide the URL from the user if possible. Before I was using an Android app that was just a webview and that worked great but turned out to be impractical for the use case.
A solution that involves whitelisting domains will not work as I do not know which domains will appear on the links menu.

Link to external Url and open modal window

I'm trying to link to a contact form on another site but it's contained in a modal window. This is pretty much what I'm trying to do Linking Directly To An Open Modal Window Through a URL? however, the modal i'm trying to open does not have an id, just a class. The class is
.modal-content
Is this a possibility without the modal having an id?
$(document).ready(function() {
if(window.location.href.indexOf('.modal-content') != -1) {
$('.modal-content').modal('show');
}
});
As a general rule (and for good reason) when you redirect someone you don't and shouldn't have control over what their site displays. Your only bet would be to see if the host site already has this capability, and route to that URL.
Your app not having control over someone else's app is very important to web security.

Categories