I'm currently working on a TWA / Custom tabs application. Seeing as the user needs to load a website, I want to implement an offline page incase the user isn't connected to the internet.
When using a webview, I can just load an html file, with custom tabs it seems to be more difficult.
What I'm currently doing: Once the app is launched, I do a check to see if the user is connected to the internet, if that fails I would like to display my offline page and give them the option to retry, otherwise start the custom tabs intent.
Is there an easy way to load/inject my offline html page into the custom tab, or is there another way to load the html file into view?
The best way to implement an offline page for your web application is to use a Service Worker.
An advantage of this approach is that this offline page will also work for users using standalone browsers. And, by adding a Web Manifest, your application will become a Progressive Web App and will be installable from the browsers.
Service Workers can be a complex subject, so I'd recommend using WorkBox to get started with it. Here's a recipe for a simple offline page.
There's one caveat with this approach - the Service Worker is installed when the application is used for the first time. From that moment onwards, it will show the offline page if the user opens the app while offline. But, if the user is offline the first time the application is opened, they may still see the offline dinosaur. There's an open issue to improve this at https://crbug.com/816798.
Related
I have an android application that is connected with my website. This app shows some content from my database in my server that is connected successfully with cloudflare. While i open my application from bluestacks and i snoop it with URL snooper it doesn’t reveal my website url. It only shows ssl urls. That’s the point. I want to hide my domain if someone tries to snoop my application with these programs.
The problem is that i have build the same app in another language in another website with the same things. Admin Panel, database etc. While im trying to snoop my app with URL snooper or Whireshark, it reveals my domain. I don’t want this to happen. I want my domain to be hidden from everyone who tries to snoop my app like i do in my first android app. I have the same options like my other website in my cloudflare. The only difference is that i use wordpress in my first website and in the second one i don't use wordpress. Just a blank page. I don’t have any public content. Everything else is the same.
https://i.gyazo.com/a7f382758685e89edc3831f671c7beb3.png
I found some threads here that they say that domain cannot be hidden while the app takes requests from the server. But i did it in my first application. I was navigating everywhere in my app and my domain was hidden.
Before i used cloudflare in my first website the domain was shown. After i used cloudflare i figured out that domain was not visible anymore while using url snooper.
Why i can't do the same in my second website? What you believe can cause that?
I have created a progressive web app that simply lists links (to URLs) that when clicked uses the default browser of the device (say mobile phone) to open the URL.
Is there a way to tell the device to cache these pages so they are available offline.
This is so when my progressive web app runs offline, any links previously visited will also be able to display in the devices default browser.
You can do two things:
Pre-cache the set of links; you can do that using a library such as sw-precache
In the fetch event handler of the Service Worker of your PWA, place the URL's the user clicks on in the cache.
Option (1) has the advantage that your app will be offline-ready from the the start; and option (2) has the advantage that your app will cache only the links the user was interested in. I think your question refers to option (2); depending on your use cases, you can decide on which strategy is best.
You can lear more about a variety of caching and serving strategies in Jake Archibald's Offline Cookbook article.
I've been reading http://www.html5rocks.com/en/tutorials/offline/storage/
It sounds like the database is sandboxed. This is a problem for me, because the offline web app I've written - unfortunately one of the places it is being used is in has terrible mobile coverage and no wi-fi.
So what I'd like to do is write a native app which could grab the data from the IndexedDB database. Then maybe they can put it in an email, or plug it into a computer or something... it's very messy but I don't really have any other options.
Any ideas welcome.
Instead of creating a native app, why not create an offline web app? That way you can continue using the IndexedDB database, but won't have to worry about connectivity.
The way to accomplish this is by using JavaScript Service Workers, which act as a proxy between the browser and the network. After you register a service worker, whenever the user requests a page from your site, the service worker springs into action.
So for instance, every time the user loads a page from your site, the service worker will check if there is internet connectivity, and if not, load the page entirely from the browser's cache instead of making a web request for the page. That way you can effectively create a website that works entirely offline after it's been loaded only once. Neat!
I have some apps that I know go out to the web and pull down some pages to be displayed within the application in some type of wrapper (working in Android). I was wondering if there was a way to be able to fetch a list of those web pages, like the application's "web history".
If I could get this in a list somewhere in code that would be awesome, or otherwise just some way to view this. I suppose on the application level it would be different for every app, but if there is someway to fetch this from another app or some type of code that would be awesome!
To sum up, basically I want app A to know what pages app B (an application that I do not own) has fetched and displayed previously.
bascially I want app A to know what pages app B (an application that I do not own) has fetched and displayed previously
Fortunately, this is not directly possible, for obvious privacy and security reasons.
If App B allows you to configure a proxy server for it, then you can do so, using some proxy server that you manage that can record this info. You can even write an HTTP proxy server to fill this role.
Rooted device users can use Wireshark and equivalent to monitor all network traffic.
I am new to JQuery mobile .
Need some assistance to start with.
My plan is for a mobile application( cross platform android and Iphone ) which will get and update data to a webservice. This will be a set of htmls. I need to access gallery and camera so i think it should be integrated with PhoneGap.
Now the html pages are hosted in same domain as web service. While
integrating to Phonegap would like to know whether i need to move
Html to app or keep the htmls in remote server and put a web view to
load html from there. Basically in samples i have seen the app itself
with htmls , so would like to know best strategy.
In Android app there is a hardware back button. Basically i have
a login page, home page and detail pages. While in Home page if hardware back
button is pressed , i should ask for logout . I searched but dint get
idea to handle the same.
May be i will remove camera functionality and then it will be pure
JQuery Mobile and no Phonegap. SO this will be loaded in browser
directly in device. So if in JQuery mobile only also , can this hardware back
button be handled.
Please guide me in right direction.
-Thanks in advance
mia
In reply to your first point: the practice of hosting the full html pages in a remote server is usually forbidden by the app stores (at least iOS having read the guidelines recently).
You should instead only retrieve data from the server (in the form of json/xml for instance). For this very purpose you can create your mobile app using Backbone, or any other MVC/MVVC platform.
Your base pages will be in the app -displayed by phonegap webview- along with some templates. Every time the user goes to another page, you fetch some json data from the server and then process your data with the templates to generate full html.
This process makes more sense than serving full html pages (which is then more a mobile site than a mobile app) as only the data (what is dynamic) is sent from the server, which makes the payload smaller (better for mobile devices with limited bandwidth capabilities).
For the second point, I guess you mean when the app is closed or put in the background through this back button you want to call a logout function in your app. You'll need to catch a system event, but that's not something you can handle directly in Phonegap and you'll need some native java coding for that.. but first check the phonegap plugins for such feature but I haven't seen any.
For the third point, if you say you don't want to use phonegap your 'mobile app' will become only a 'mobile site'. which is fine, but then you'll have even less control over that "back button". You'll only be able to control web events like window close (beforeunload).
It is possible to have the full HTML on the server and I have had an app approved for the iOS app store with this method. However there are obvious downsides including the fact that you lose off-line capabilities.
You can add an event listener for the back button document.addEventListener('backbutton', onBackButton, false);
As far as I know you cannot handle the back button with a mobile site.