html5 local storage for offline viewing - html

I have a folder, which contains html files, images, stylesheets, and js.
I have uploaded it to the server and when i open it on ipad, all the content should get stored on iPad for offline viewing. How can this be done using webstorage / local storage?
I tried with offline cache but it has its limit of 5MB

Your webserver has to support this by adding
AddType text/cache-manifest .manifest
to your .htaccess or server config.
then you need a manifest file, which says the client "store these files locally". Just create a blank file call it something like "data.manifest" and add this:
CACHE MANIFEST
CACHE
index.html
style.css
etc..
There are many more things you can do in this manifest file. I consider using Google or the search for this.
At least you have to edit your <html>-tag for your manifest file to your site.
<html manifest="/data.manifest" />
That's it. The browser should ask you whether it should store data locally.

You have to split your app in two. A downloader and the actual app.
The downloader will download the required files once and save it to localstorage/webstorage. Once saved your app can be loaded from local copy directly. The downloader part will be saved using cache manifest mechanism.
I am currently developing an app which works in the same way.
Note: JS and CSS files can be saved directly to localstorage, but for images you have to convert them to base64 and then use them. Watch out for the base64 size limitations.
http://en.wikipedia.org/wiki/Data_URI_scheme

Related

How to extract files from saz file?

I exported a session from Fiddler to saz files.
This session includes only jpg files and I'm wondering - how can I extract the jpg files from saz quickly and easily?
Thanks!
The easiest way to extract the JPEG files is to use Fiddler itself. Fiddler allows you to load a SAZ file (under File/Load Archive..).
Once loaded, just right-click on the HTTP message with the JPEG and select Save/Response/Response Body....
If you want to do it the hard way, a SAZ file is just a zip file. Below is from the Fiddler FAQ page
SAZ files are simply specially formatted .ZIP files. If you rename a
.SAZ file to .ZIP, you can open it for viewing using standard ZIP
viewing tools.
According to the FAQ, the HTTP payload data is stored in a directory called raw. The JPEG data will be in one of the sessid#_s.txt files, but embedded in a HTTP response message. Strip the HTTP headers to get the JPEG (assuming there is no extra encoding in the HTTP message).
sessid#_s.txt - contains the raw server request
Fiddler now requires a password to work, and I'm not willing to register.
First, I create a folder and put the .saz file inside
Second, I change to that directory and use unzip to extract the files because a saz file is a standard archive
Third, I open _index.htm with any browser and click the links in the index file
Have fun.

how to embed pdf file in html with security?

I am using below code to display pdf file in HTML
<object data="data/file.pdf" type="application/pdf" width="300" height="200">
test.pdf
</object>
But In above code we have to specify path name and folder name so it is not so secure. Crawler can find this path, so using some algorithms(robot) it is very easy to download other file those are stored in that folder.
How to secure this, is there any option to prevent this from robots?.
You may do the following:
Password protect the page (with the server-side code).
Generate unique links like (/getpdf/some_random_string_or_md5_hash_of_random_string.pdf) for every PDF file (using server-side code) that will a) check for the current time and the validity of the random name generated (if it has expired or not) then b) will redirect to the source files (not really hiding the source because of the redirection) to be displayed or stream the PDF file content (this is more secure though could seriously add the load to the server).
Finally add robots.txt to the folder and hope that crawlers will follow restrictions it sets.
If the other files in the directory are not to be downloaded, ever, they shouldn't be in a directory that is available to the http server. You can use directory permissions in your http server (eg., config directives and .htaccess in Apache) to control access to directories. Only configure access for directories you need to expose to the web, and only store files in them that you want the web to access.
If you want to avoid including a path in the HTML, you will need to write some dynamic code (eg, php, asp, or any number of server-side options). Your code on the server would need to handle the request for the file and return the file's content manually.

View and enable copy / paste of docx, xslx, pptx, pdf in web server

I would like to be able to load document files into my webserver / application server (docx, xslx, pptx, pdf). I need to view the files in WYSYIG and be able to copy and paste.
I found several libraries however it's either not fully WYSIYG or not enable copy/paste.
Let me know if there is library like this, even if it requires some plugin.

Load local image, modify it and save back to same file

File input allows user to access a local file from browser. Is it possible to load a local file given by file input, modify it and save it back to same local file? I know that HTML5 allows creating writeable filesystem, but basically it seems to be abstract directory.
For security reasons, I don't think the browser can overwrite the local file. Using the File-System API you could only copy the contents of the local file to the sandboxed File-System API directory(found under various obfuscated file names). All manipulation/saving would be done in AppData.
Perhaps displaying the modified image on the screen, right click, save-as to the given file location would also be suitable? (other than that I think you have to upload the image to a server and download it back again)

Can the code in a .crx chrome app have write access to the files within itself (the crx)?

I have a crx that has a number of files that I want to be able to change over time. For example, it might have this structure:
index.html
js/code.js
images/someimage.png
I want to be able to use ajax (or JSONP) to download a new image and overwrite image/someimage.png (after the crx has been installed into chrome). Is this possible?
No, you can not modify the application / extension data files directly.
But, you can store a downloaded image to chrome.storage, chrome.fileSystem, or chrome.syncFileSystem. At run time you can check to see if a downloaded image is there and swap out your image reference. E.g. use a dataURL or blob.