Updating old url to new url in PWA - progressive-web-apps

I am trying to change the start_url of my PWA app from one page to another but need to understand the working. Can anyone please tell me what will happen to users of my PWA app user (with old start_url). Is there any some kind of update happen after which old user can get the updated start_url.
For example:
PWA with old start_url: www.testweb.com/oldurl
PWA with new start_url: www.testweb.com/newurl
will users of PWA with old URL will get any URL after I change the start_url.

With Chrome, it depends on whether you're on desktop or mobile. On desktop, changing the start_url will have no effect, but on Android, it should be updated within a day or two. See How Chrome handles updates to the web app manifest for details about how manifest changes affect an installed PWA.
My recommendation would be don't change the start_url but instead, use the service worker to redirect the browser to the new page. For example, you could use something like:
self.addEventListener('fetch', (event) => {
// Check if URL is old start_url, if so redirect to new URL
if (event.request.url.endsWith('/previous/start_url.html')) {
const resp = Response.redirect('/new/start_url.html', 301);
event.respondWith(resp);
}
});

Related

Access Blocked: authorisation error. flutter

I just released my first app and It has a button in it that takes you to a website.
A user just sent me this:.
I tried googling Google's secure browsers policy but not much info is coming up.
how can I make my app comply with this policy? I think the button opens a browser in app (I use duckduckgo as my default browser and haven't had an issue)
is it just a case of opening a browser and then heading to the website when the button is pressed?
my code to open the website is:
_launchURL() async {
const url = 'https://www.thiswebsite.com';
final uri = Uri.parse(url);
if (await canLaunchUrl(uri)) {
await launchUrl(uri);
} else {
throw 'Could not launch $url';
}
}
thanks so much and any help would be greatly appreciated
Google is trying to make sure, you open this window in an actual new browser window, not in a webview still under the control of your application.
Your code should open an external browser.
Maybe the user has no browser installed on their device? Maybe their default browser is some exotic thing not recognized by Google?
If you are using the latest version of url_launcher (currently 6.1.8) there is not a lot more you can do.
You could force the app to take the external browser, not the in-app webview:
await launchUrl(_url,mode: LaunchMode.externalApplication);
But that should be what happens anyway. If your version is up to date, ask your user, what browser they use. Be prepared to tell them that they need to use another one.

Flutter Web Firebase Auth's persistence doesn't work on PWA

I have developed a Flutter Web app that uses Firebase Authentication in order to sign in users to the app.
I've declared the Firebase Authentication persistence field so that the app will remember and auto-login the user when he revisits the Flutter Web app's URL, and won't be required to re-login every time he launches the URL.
It all works fine on a regular browser, but when the user generates a PWA (for example, clicking "Add to Home Screen" on iOS devices to save the website as PWA), the persistence feature stops working, and the user is required to re-login every time he opens the PWA.
Is there a way to add Firebase Authentication's persistence feature to a PWA? And if not, is there a way to prevent generating a PWA (and saving the Flutter Web app as a regular browser URL when clicking "Add to Home Screen" button on iOS, for example)?
Thank you!
To solve the persistence problem, add a listener:
FirebaseAuth.instance.idTokenChanges().listen((User? user) async {
if (user == null) {
// Function for user not logged in here. Do not write function to change page here.
} else {
// As it's a Future it will take a while to process the user's information, so it
will call the function after it's done.
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => Home()));
}
}
This is an example I made and it worked, use controllers to change the status, put some function to wait for the information to be processed.
Hope this helps. Any questions, at your disposal.

Update Service Worker in Facebook Browser

Got a problem where some of our users have a buggy Service Worker sitting in their Facebook Browsers from our sites.
The problem: Facebook App users are getting our 'you are offline page' on the FB browser when they access our pages shared on FB.
The bug appeared to be that an old version of Google's Workbox (3.6.1) was automatically returning the 'You Are Offline' page in the FB app using Chrome 75. Updating Workbox fixed it.
The reference to Workbox was in the service worker, so when we updated our Workbox version (which fixed the issue) some users still had the old one cached.
If users clear their FB App caches or reinstall FB, then all's well and they can see our content. But we'd like to try to force the SW to update without asking them to do that.
To wipe the old Service Worker out from the FB browser, we tried the following:
<script>
"use strict";
console.log("Service Worker Registration");
function isFacebookApp() {
var ua = navigator.userAgent || navigator.vendor || window.opera;
return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
}
if ("serviceWorker" in navigator) {
if(isFacebookApp() == true) {
console.log("Service Worker Registration: using v2, via Facebook App");
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
console.log("Service Worker Registration: "+registration);
registration.unregister();
}
});
} else {
console.log("Service Worker Registration: using v2, not via Facebook App");
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js");
});
}
}
</script>
However our analytics show that we're still getting hits on the You Are Offline page, and we're still getting reports from users that they can's follow links to our articles.
Can anyone help? Is there a way of forcing FB's in-app browser to update the cache, and get our users using a working Service Worker?
Update
So far we have tried:
Fooling the browser to update the Service worker by using a query string in the SW registration URL
Iterating through the registrations and unregister()ing (see above)
Using skipWaiting() in the Service Worker code
Adding 'no-cache' to our headers on sw.js
Ensuring that sw.js isn't being cached by the server
Removing or changing the /offline page resulted in net::ERR_FAILED error
We suspected that all our service worker revisions may have some unseen fault in them, so we tried an 'empty' service worker to see if that would work and flush out the others
Our analytics indicate the following:
Chrome Mobile 75 may be an issue
problems seem to have occurred since 6/7 June.
Nothing's worked: our Service Worker, or something, is still returning the Offline page...
This is a bug in Chrome/the Chromium WebView, tracked in https://bugs.chromium.org/p/chromium/issues/detail?id=977784
The fix should be broadly rolled out at this point.
we experienced the same problem but presenting slightly differently - our users began receiving an error message "net:: ERR FAILED" though it sounds like the same cause. The problem began around 10 days ago, and the only way I've managed to get around the cache is to send the users to a new version of the site - by removing the www. from the URL that I'm sending to, and stopping this from 301'ing to with the www.
I also tried a bunch of solutions like you have, but it doesn't seem to be possible to get the service worker to contact the website - if you put Charles between your phone and the internet you'll see no traffic reaches your site. I'm hoping that after a period of disuse the service worker will be cleaned up by the app cache and we can switch back. Sorry I can't be more help, but rest assured you're not alone!

Ionic 2: InAppBrowser Geolocation

I am using InAppBrowser plugin to open a specific website URL which uses current geo-location to give results. On normal mobile browser like chrome or FireFox, website asks to enable location but on InAppBrowser plugin it won't and therefore, I think, I can't get results according to user location. Is there are any other ways to open a website URL and get results according to current user location.
webiste example like: https://www.foodpanda.pk/
I've also tried to make an iframe and open URL like in this post
Webview In Ionic 3
let url = "https://www.foodpanda.pk/";
let target = "_self";
let options = "location=yes,zoom=no";
alert("starting in-app-browser");
const browser = this.iab.create(url, target, options);
browser.on('exit').subscribe(event => {
alert("Browser exiting");
this.platform.exitApp();
});
Turns out, my application don't have location permissions, so in order to ask user to grant my application permission, I used this plugin Location Accuracy. After that websites on in-app-browsers are able to get results according to user current location.

Firebase Polymer PWA with custom domain, signInWithPopup doesn't work on mobile device

Testing on desktop works fine, the various provider's popups come up. On mobile device however with each provider a new browser window opens, but the address is the non-customized hosting URL of the firebase app and the sign-in flow halts.
Originally the Firebase documentation advises the non custom hosting URL to be used in the redirect URLs. I changed those for all providers to the custom one: https://valleydevfest.com/__/auth/handler instead of https://valleydevfest-620d6.firebaseapp.com/__/auth/handler (for both Facebook app, Twitter app and my Github app too). That didn't help at all and the mobile Chrome still redirects to some https://valleydevfest-620d6.firebaseapp.com/... address, which either halts loading or it loads a very broken version of the website (instead of the OAuth login).
Most relevant code:
var signIn = function(providerId) {
var provider = getProviderForProviderId(providerId);
var that = this;
return this.auth.signInWithPopup(provider).catch(function(error) {
...
https://github.com/gdgfresno/valleydevfest/blob/develop/scripts/helper/firebase.js#L43
How can I overcome that?
(Whole source of the app: https://github.com/gdgfresno/valleydevfest/tree/develop)