iOS HTML5 FileSystem API alternative - javascript

I have an application built that utilizes the HTML5 FilesSystem API, but it only works for Chrome.
Does anyone know of an existing plugin or a technique for replicating this functionality in iOS?
The catch is that I am rendering "mini-sites" for offline use. So I would need to be able to:
Download the files for the micro-site
Store them locally
Access them later. Right now, I'm using an iframe to render the page

My solution (right now) is to do the following.
Because I am caching microsite files that I am pulling from a 3rd party, I set
up a folder on a webserver and built out a PHP-based "caching"
service that routinely compares the content I have stored on the 3rd
part site to the same content stored locally to my server. It updates
the content where necessary.
The app, when it is run from iOS, will asynchronously load each of the microsites in an iframe (create a frame of size 1 x 1px with the appropriate src). The iframe self-destructs after
loading is completed.
Step 2 allows my service worker to cache all of the micro-sites locally, along with the main site.
I have other code in place to keep the local iOS cache "fresh".
This works, but it is nowhere near as ideal as the Chrome File System API, so any alternative suggestions would be great!
Thanks,
Wayne

Related

Angular: How to cache images?

I am developing a web app where I need to cache images so that it does not take time to load if user closes and opens website again.
By opening website again, images should be loaded from cache instead of reloading again.
Is this possible to implement with Angular?
I searched a lot online but I did not find proper solution for that yet.
You can use - HTML manifest Attribute
The manifest attribute specifies the location of the document's cache manifest.
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web application that you want cached.
The manifest file is a simple text file that lists the resources the browser should cache for offline access.
Detail understanding read this blog: https://www.html5rocks.com/en/tutorials/appcache/beginner/

Cordova - Access device functionality from remote HTML

I have a Cordova application that waits for the deviceready event and, when that event fires, sets the window.location.href to a remote site, say, http://foo.bar.com/lander.html. From that page, I have several links to other pages - say page1.html and page2.html. I want to put a button in page1.html that calls Cordova's navigator.notification.vibrate function.
I have the above set up and everything appears to work, except that navigation.notification is undefined when I click the button in page1.html to try to get the device to vibrate. I have copied cordova.js onto foo.bar.com and am referencing it from page1.html. Do I have to include other javascript source files on foo.bar.com? Will this approach ever work?
Would it work if instead of changing the window location I were to get the content by AJAX and put the content in a div container in the index.html page that underlies the Cordova app?
This is all on iOS if that matters. I included the dialogs and vibration plugins only. I am receiving the deviceready event in the Cordova app and successfully redirecting to the remote site. Please let me know if there are other factors which I need to take into consideration. Thanks.
UPDATE 1: I got vibration working from the Cordova app's local index.html by using navigator.vibrate instead of navigator.notification.vibrate. Changing this on the remote site did not help. I also tried including copies of vibration.js, Cordova.js and cordova_plugins.js from the remote page - still no luck.
UPDATE 2: I found in the Cordova docs where what I'm asking about is discussed: Invoking Cordova JavaScript functions from a remotely-loaded HTML page (an HTML page not stored locally on the device) is an unsupported configuration. This is because Cordova was not designed for this, and the Apache Cordova community does no testing of this configuration. While it can work in some circumstances, it is not recommended nor supported. There are challenges with the same origin policy, keeping the JavaScript and native portions of Cordova synchronized at the same version (since they are coupled via private APIs which may change), the trustworthiness of remote content calling native local functions, and potential app store rejection.
The display of remotely-loaded HTML content in a webview should be done using Cordova's InAppBrowser. The InAppBrowser is designed so that JavaScript running there does not have access to the Cordova JavaScript APIs for the reasons listed above. Please refer to the Security Guide.
Based on this, it sounds possible but like we'd be out on our own. Still, if anybody is successfully doing this, we'd like to give it a try.
I thinhk what you are looking for is a push notification. There is a plugin for this.
http://ngcordova.com/docs/plugins/pushNotifications/
You need a task running on your app though.
Hope this is helpfull.

Accessing local file system on browser

Please hear me out before you start crying security issues.
This is for an intranet application, hence I have full range to install any plugins or change any security permissions to suit.
What I want is for them to go to a webpage and click a link to download a file, such as a Word Document. This gets transferred to local storage of some kind (sandboxed if need be) and then is opened in word as a regular file.
When they click save, JavaScript or something will pickup the file is saved or the program is no longer accessing it and can be actioned upon, such as uploading back up to the server.
Is there any way to do this. I have looked at IndexedDb, WebStorage, HTML5 FileSystem API but I am new to all and don't see a way to do this.
I am open to coding any needed plugins as long as you don't mention Flash. The main issue I am coming across is opening a file downloaded into some form of local browser and then opening it via a desktop application, e.g. Word.
Any help, greatly appreciated.
After much research the only way to do it is with a plugin. IndexedDB, FileSystem API or WebStorage can not access the local file system. Which is good.
Silverlight is a good option for intranet and .NET, which is what I have chosen to go with.
Silverlight 5 in full permissions with a file watcher. The file watcher can be accomplished with this method: Is there an alternative to accomplishing what the FileSystemWatcher does in Silverlight?

Javascript Asset Download Progress From CDN

I have a web-based app which requires a lot of resources (audio/images/video). Previously I have been hosting everything on the same server and using PreloadJS to grab all the resources and download them (while showing a nice progress bar).
I am now moving to a Content Delivery Network (CDN) to host all these assets, but need to keep the base web application on my server.
So I have my app on webapp.com and all my resources on cdn.webapp.com - my question is how do I load all these resources from another domain and view the progress at the same time? Are there libraries that handle this or am I going to need to write up some code to subscribe to the onload() function of every asset and only continue when everything is downloaded?
(Thanks to the cross-domain ajax requests I cannot use PreloadJS to download everything anymore)
In the end (and because no one came to my rescue) I achieved it by doing this:
Images/assets are on cdn.webapp.com and were included as usual in the HTML of the page. Javascript would then run and set the div these images were in to have no height. This would still allow the images to load but it would not render them on the page.
I then found a JS library (https://github.com/desandro/imagesloaded) to register callbacks on these images so it would notify me when the images were completely downloaded.

Load local CSS and JavaScript files when developing, live when pushed to server

I am developing in Visual Studio and am making a lot of front-end changes to websites. But because of the server setup, every time I compile it takes one minute before I can see the changes in the browser.
Is it possible to use a program so that the website will load the site with local CSS and JavaScript files? I want to make changes locally and see the changes on the website without compiling the project.
I use Charles Proxy for that. It allows you to map certain URIs to different URIs or local files.
So you can tell it to load specific JS / CSS files from a different location (or use a wildcard and map them in bulk).
The real question here is why you are developing a website with Visual Studio.
You should setup a local HTTP server and access your site from http://localhost.

Categories

Resources