Opening Flutter Gallery web app
the user get prompted to add the app to the home screen as shown below
for both desktop
and mobile
what steps should I follow to achieve this without messing with JS (js answer)
Thank you
While the popup in the image that you have mentioned , that is automatic .It automatically fires up when you meet several criteria (and which are always true for flutter web apps , mentioned here) .
code :
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
which is present in index.html handles the pwa functionality
Related
When trying to open my Flutter web app from a link in the Messenger app on iOS, the web app is opening in Messenger's built-in browser. I do however need it to open in an external browser (i.e. Safari, Chrome, etc.), and I've tried several options to achieve this. Unfortunately, I've had no luck yet.
The Challenge
The web app is opening in Messenger's built-in browser, restricting panning in the app's map. Thus, I need to open the app in an external browser. The issue is shown in the gif below.
What I've tried
Most of the online solutions I've found regarding this issue refers to the url_launcher package with the option mode set to LaunchMode.externalApplication. I've tried adding a button for launching the app's url in an external browser based on this option, but this just causes the app to reload in the current in-app browser window (see gif below, in which I am tapping the _launchInExternalBrowser button several times).
A button tap runs the following function:
_launchInExternalBrowser() async {
if (!await launchUrl(Uri.base,
mode: LaunchMode.externalApplication)) {
setState(() {
_launchInExternalBrowserStatus = "Could not launch ${Uri.base}";
});
} else {
setState(() {
_launchInExternalBrowserStatus = "Could launch ${Uri.base}";
});
}
}
Any insight into how this issue can be solved would be highly appreciated!
In my PWA website, I have in a few places, links that open in new tab using target="_blank". I want to maintain this functionality but not if the user has installed the PWA.
Currently, if the user installs the PWA and click on that link, the user is taken to the browser and the page loads there.
I have tried all different kinds of scope but all give same result.
/
./
https://beta.domain.com/
// Add this script after </body>
<script>
if (window.matchMedia('(display-mode: standalone)').matches) {
// if webapp installed, remove 'target' attribute of links
document.querySelectorAll('a[target=_blank]').forEach(function(a) {
a.removeAttribute('target');
});
}
</script>
I have a Progressive Web App that meets all the Google Chrome criteria for installation and passes the Audit tests. Using Chrome, when I surf to the PWA's URL and select "Add To Home screen" (either from the menu or from the popup) it will install as an app via WebAPK - as expected. The correct icon shows in the app list. However, the app icon is not added to the Home screen - it is not on any of the home screens.
Shouldn't it also be added to the home screen as that is the expectation of "Add to Home screen"?
This SO thread suggests adding to both is the usual functionality. But that is not happening for me. PWA add to home screen does not work as expected
If it should also be added to the home screen, any suggestions as to what I may be doing wrong or where to investigate?
If it doesn't also add to home screen - shouldn't it? Or change the menu item to "Install App" - so the user expectation is set correctly?
EDIT 2021-09-18:
It's been 2 years since this post and I've been distracted with other things (as many have the last 18 months). But coming back to this project, I still have this issue. Thanks to CherryDT for suggesting to update this post instead of creating a new one.
I created a minimal PWA (called PWATest) that successfully registers a service worker and shows the browser prompt to install the PWA. The browser prompt in Android Chrome (now Version 91.0.4472.124) shows at the bottom of the mobile screen and says "Add PWATest to Home screen". When I tap that prompt, the "Install app" dialog shows and I select "Install". I see "Adding PWATest...". After it is installed, the app icon is in the applications area with all the other app icons but there is no PWATest icon on the home screen (any of them).
I have cleared the cache and asked a friend to try with no difference.
I just went to bmw.com and installed their pwa. Same thing. The app icon showed only with the other application icons - no icon on the home screen.
I tried my pwa using Samsung Internet and again same result.
I added a web app manifest to my web app and now I can add my web app to my iPhone home screen. I also added google workbox and implemented some caching strategies.
Unfortunately when closing my web app and open it again, it always shows the start screen.
I would like to jump back to the last seen screen automatically (call the last opened url) instead of always jumping to the starting page.
Is there a way to achieve this?
Thanks in advance!
One possible way
-- Subscribe to your router
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// call a method here to save the current
// page to a local storage variable
}
});
When your app opens, if there is a value in local storage, go to that page
I am Beginer for intel xdk , i have made an app for android device, in app. i have set a button as a back button , my app have 6 pages, one of them is an index page which is load first and then navigate too the another page , when i am on index page , press a back button which inbuilt in device it redirect me on the page according to history instead of exit the app.. it behaves just like a web browser back button, because my code is in html5 format.
i want to use this button to quit from this application how can I use it or code...*/
<script>
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();">
You can use the navigator.app.exitApp() function from the Cordova API if you include the cordova.js library (after the intelxdk.js library). But it only works on Android devices, it is not supported anywhere else.
You would execute this code when you capture the Android hardware back button.