Facebook mbasic site, mobile safari, home screen shortcuts and local storage - html

I have a question about the mbasic.facebook.com page and how they manage to do what they do on iPhone with iOS 12.3.1. This is not about the facebook app. I don't have it installed at all.
I went to mbasic.facebook.com in mobile safari on iOS and created a shortcut for it on my homescreen. When I use the shortcut, the page behaves like what Apple calls a web application, i.e. it does not have the usual mobile safari UI.
Here's the weird part:
After using the shortcut and logging in, I switch to the settings app and under "Safari", I delete the browser history and website data.
I then use the shortcut again to launch the mbasic facebook site.
I am greeted with a screen where I still appear to be logged in. If i interact with the page it will make me login again, however.
This makes me wonder about two things:
How does the web application maintain its state (i.e. still know who am i) despite me trying to delete the Safari data?
How do I delete the data in a way that also affects a "web app" launched via a home screen shortcut?

I am not sure exactly. But I think it was done by PWA(Progressive Web App) technology. It helps you to use a website as an app that are installed from app store. And it also has the ability of state maintaining, giving push notification, maintain own storage in your device. When you installed it, all your login information was saved in your device as its own storage and this storage has no relation with your web browser. That;s why when you delete data from Safari, it made no effects on the installed one. And when you installed it, it installed its own manifest file in your device. That's why it runs on your device with it's own UI not with the safari UI. You can delete its data by deleting its storage folder that is created at the time of installation. I am not sure where you got the file in your device. Make a research on it. Here are some useful link about PWA. MDN web docs - PWA 4 important points to know about Progressive Web Apps (PWA) PWA Tutorial Hope it will help you. You are requested to share any new thing that should be known as I am new in this technology.

Related

Trusted web activity - Digital assets link validation for intranet/private web app seem to be failing

I've followed this doc to
Create a wrapper Android app based on this sample project for my UI application which runs in non-public domain in our corporate servers.
Add assetlinks.json in my Angular 6 PWA application, with SHA256 fingerprints of my release key.
Deployed the signed apk to a Android 4.4.3 device running Chrome Dev 69 and Google play services - 12.8.74.
When I run the application, everything works fine except hiding the address bar, which makes it as a regular custom tab and not the "Trusted web" content.
I don't see any error in the log and not sure how to debug this scenario. Any help on this is appreciated.
Got confirmation from Chrome team that they are using TWA assets link validation in server side using an API call and so this solution wont work for Private web apps. Said that, they are also considering to move that logic to browser to support this use case. Will update here when I have any update on this.
Update: As of Chrome Version 72, TWA(Trusted web activity) if available in Chrome stable version and the web asset validation(to make sure the web page is yours/same as the app its loaded to) happens in browser. So this solution can be implemented for private web apps for hosting inside enterprise environment.
Also, now PWAs can be packed as regular app using TWA solution and uploaded to Play store as an apk file. Documentation on this is still being updated as per one of Chrome developer. But the solution as such is ready for use.

How to create Progressive web app apk/any type of file that can be distributed in a enterprise devices

Understandably, PWAs (Progressive Web Apps) are added to home screen after the user visits the web app in a supported browser and clicks on "Add to Home Screen". This works fine for publicly available PWAs.
Thinking of Enterprise Android applications, which needs to be installed to thousands of devices via some app push tools like Airwatch, its practically not possible to have someone open the browser, put the URL and then add to home screen in all thousands of devices.
Is there any other way to automate this deploy/add icon to home screen of a Progressive Web App, not needing the user to visit the web app in a browser, and clicking on "Add to Home Screen" ?
One option we thought about is wrapping in Cordova, but we're trying to find a solution without such wrapper.
Chrome for Android generates and signs .apk file on the fly using WebPack, when the user clicks on "Add to Home screen" (from menu or install banner) option and if the site has a valid manifest.json and service worker.
Extracting and distributing APK: This .apk can be located and exported to desktop using file explorer tools. For some reason, some of default file explorer tools couldn't locate this .apk file. Once exported, this .apk can be used to distribute in controlled environment..like in enterprise devices, where you can enforce the deceive to have Chrome Browser. If this .apk is installed to devices which don't have Chrome browser, user will get a message saying "Chrome" is required to open this app. Once installed, installed PWA apk can be used.
For distributing PWA apps through Play store, google is streamlining the process. A google engineers repose on building APKs (March-2018), when we reached out to them for our enterprise needs.
"Well done extracting the APK and deploying it, it should give a good experience to end users, but I agree it shouldn't be that complicated to deploy web apps on Android.
We are currently working on a streamlined web apps feature, with which you wouldn't need to manipulate or build APKs. This feature will be available on managed devices using Play to deliver apps"
Alternate options: If you think your user base may not have Chrome or don't want to rely on that dependency, wrapping with Cordova kind of hybrid solution is the only way to build your PWA apps for distribution in app stores. With this option, if the "webpack" in the device has the version 40+, user will get PWA benefits. Otherwise, it will still work as a regular hosted web app.
Update on TWA - Trusted web activity is the official way to pack PWA for Android and its available in Chrome 72 and it also supports private/enterprise web apps as the digital assets validation happens in browser now(it use to happen in cloud, making this solution not possible for private web apps).
You can upload the PWA to Playstore using tools like PWA2APK. Just need to share the play store URL to the users, from which they can download PWA app like normal Android App.
Trusted Web activities are a new way to integrate your web-app content such as your PWA with your Android app using a similar protocol to Chrome Custom Tabs.
Trusted Web activities

Improved Add To Homescreen (WebAPK) icon & name for installed web app on Google Chrome not upgrading after manifest update

I have a website that meets all the pre-requisites for Google Chrome for Android's "improved" add-to-homescreen (A2HS) feature. I can install the app and a APK is formed and gets installed on the device and icon is available on homescreen.
In the Google developer blog documentation, it is said that with the "Improved" A2HS now, it's possible to modify the manifest.json file with new icon and name after the site is visited subsequently, the installed web app's icon and name should upgrade:
You now have the ability to update your Progressive Web App's icon and
name and have it reflected to the user. Changing your icon or name in
the manifest will update the icon on the home screen after the user
has subsequently opened the site.
I have tried to modify the manifest with new values and verified that the modified manifest is being downloaded to the browser when the site is opened again, but the update of the name and icon for the installed web app does not happen. This is tested on Chrome for Android v63.
How do I get it working? Are there any particular steps that need to be taken care of? Am I missing something?
According to what I read, if you are able to create a WebAPK from your website, then you're all set for improved A2HS.
I've tried changing my shortname in my manifest.json to see if the app name updates, but to no avail. So I assume that this isn't something we could control, since we fit all the requirements of improved A2HS.
I do not know how long Chrome needs to generate a new APK for our pages, nor do I know when exactly it does this as I'm not patient enough to wait too long(I've waited for about an hour), so do take my word with a grain of salt.

Full Website Within Chrome Application Window

Was wondering if I had a web-application on www.mydomain.com/userportal etc but didn't want this accessable via the browser, but as a chrome application similar to how Google's Hangouts is a seperate window / popup - How easy is it to implement an already built application into one of these windows?
If I understand you correctly, you would like to display your www site as a Chrome App. Chrome apps are all HTML/CSS/JS files hosted on the computer but they can display a webview into a site online. However, Chrome Apps must be 'offline' first. So you must ask for permissions to all online activity.
Ideally you would make separate app hosted as a Chrome App (not link/embedded to a www site) that uses an API to talk to a web-app.
Keep in mind that Google is phasing out Chrome Apps for all platforms except Chrome OS in the near future.

Chrome v31.0.1650.57 broke my packaged app webviews

I have a packaged app that requires me to be able to view saved, offlined web pages. These pages are downloaded from my server when the user is online and saved to the HTML5 filesystem so that they can be viewed offline. These are pages that cannot be packaged with the app. I have been using a webview to display this content in my app and this worked fine until the Chrome browser updated to v31.0.1650.57 (Nov. 9, 2013 build). Now I am getting 'ERR_FILE_NOT_FOUND' even though the content is definitely at the provided filesystem URL. The webviews still work fine on my two Chromebooks - an Acer running v29 and an HP running v30 - unless I go into developer mode and run in beta (which is v31.0.1650.57) instead of stable.
My question is what changed and how I fix it? Has Chrome tightened up the security to the point where I'll no longer be able to view these offlined web pages? Have new permissions been added that I need to include in my manifest to get my webviews to work again? I already have permissions for 'webview', 'unlimitedStorage', and the appropriate URL permissions for downloading the pages from my server.
My application is supposed to be given to the client around the first of December so this is a major surprise. Thankfully it didn't happen after the app went live.
Thanks in advance for your help.
*Update - I should point out that viewing an external URL such as 'http://stackoverflow.com' works fine. It is the filesystem URLs (filesystem:chrome-extension://[appId]/[pathToFile]) that are no longer working.
**Update 2 - Google has updated their 'webview' docs (https://developer.chrome.com/apps/tags/webview) but I still haven't been able to load filesystem URLs.
Perhaps this addresses your question? https://plus.sandbox.google.com/100132233764003563318/posts/hsNTHvbvEdo