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.
Related
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.
I had a requirement in our company by senior management.We are working on a business app that can create,initialise and submit a process.This is both for web and mobile.Below is the flow of the app.
User logins in to the app.
Creates a process(a process is a form) by using a drag and drop UI.
Created process is initialised and submitted for approval.
Above is the flow of the application.Now,the requirement for mobile is,once the process is created in web that has to be dynamically updated in the mobile app.
What will be the better approach for this kind of requirements.
**Note:**Please don't get confused with the term process.Creation of process is some thing like leave request process,HR processes etc which are just normal forms.
Technically speaking,need solution for a form customisation using a drag and drop that has to be updated in mobile dynamically when changes are made in web.
If I understand your question correctly, then what you want to do is keep a process in sync between the web and your app.
You have two choices. You can either make a call to your API every x seconds and check if there are any changes. The other way would be to use WebSockets which allow you to push data from the server to the client instantly. (So you when there is a change you can notify the app and update immediately).
Both ways have advantages and disadvantages, especially when scaling your app. If you want to have a "real-time" feeling in our app, I would recommend using WebSockets.
You need to have a progressive web app and try out the ionic cloud services
https://docs.ionic.io/services/deploy/
Live deployments let you publish web assets such as HTML, JS, and CSS directly to your users without going through the app store.
This lets you:
Update your application on demand.
Get new features and bug fixes to your users quickly.
But it has a price associated with it but!
I would like to serve the pages in my phonegap app from a domain.
Like a local server inside the app.
The basic app example serve the pages from file:// and one of our integrating does not whitelist it correctly.
This is not related Cordova Whitelist
Don't.
Although it is possible to host apps from a domain, it is extremely risky and presents a poor user experience in the case of no/flaky network connectivity, and app stores may reject the app. If you must update your app outside of the app store review process, you can use various code push solutions which push code to the device instead.
Risky: MITM attacks; no ability to check certificate signature prior to download; how do you handle a partial/corrupt download of the page, etc.
Poor UX: If no network connection, nothing is present to tell the user about that. If flaky network, then the app may load for a long time, or timeout, etc., and again, there's nothing to alert the user.
App store rejection: Primarily Apple here, but they tend to reject apps that are viewed as wrappers for websites. Your app must also alert the user when there is no network connection if one is required.
The scenario is, a user is visiting my webpage, click the download button to download my apk package (on Android) or go to App Store (on iOS). Then install the app and open it.
What I want to do is, when the user visits my webpage, I store some data to somewhere, and when the app is installed and opened, it can somehow read the the data (so the custom url scheme doesn't work in this situation).
For example, the user is reading an article on my webpage and then he finds out that we have an native app. So he downloads the app and installs it. We hope that when he opens the app, it could automatically display the article he was just reading. Therefore, the native app needs to know the article id from the webpage.
Now I can think of two solutions to do this but have some difficulty to overcome:
When the user visits my webpage, I copy the data to system clipboard using document.execCommand('copy') and then in my app, I acquire the data from system clipboard. While, as you may know, this API are badly supported on mobile browsers due to security reasons.
Use remote server as media. Webpage sends data to the server and app fetches it. But the data is device sensitive, and I can't think of what can be used as a unique identifier for a device. Because all webpage can obtain is some navigator.userAgent information.
So, is there someone that can help me out here and find a perfect way to send the data from webpage to native app. I would be very grateful!
I think the best option you have is to :
-Store the data in a table
-Create a php page that will do the query to get the data
-Do a http query from you android/ios app to this php page, you've your data !
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!