Background:
I have built an offline HTML5 application that stores some data into the local browser db using pouchdb.
Now the requirements have changed and I have to store large pdf documents(around 200 of them, each with 5mb - 8mb size) into the local browser so the user can view it offline when required.
Issue:
I don't think that it is a good idea to put these large documents received from server into my in browser database using pouchdb.
I would like to know if there is a way to put these documents into my device some how and then get a url reference pointing to the location within the local device ?.
Include the PDFs in your offline manifest, so that they're cached with the rest of the application. Then you just use your normal URL to refer to it, and it's satisfied from the offline app cache.
Re your question below:
When the application is loaded in the browser then i store the details of the associated pages into the browser via a manifest file. And when the user clicks on a 'SYNC' button then I communicate with the server and fetches all the pdfs associated with the user. If I have to persist these pdfs using the manifest then how can I do it ?.....the manifest is already stored
The way we do something similar is this: We have separate pages for the things that the user has taken offline (a day's worth of appointments, for instance), and a list page driven entirely by client-side data that lists those pages. Here's how it works:
When the user wants to take something they're looking at offline, they click a button which opens a URL with the information telling the server what they want (say, example.com/offline/stuff-saying-what-they-want-here/), and the server generates a page with that data embedded in it along with a manifest for the page and any assets it requires. So at that point, that information is available offline on that URL. When it loads, the page registers itself in a list in localStorage, giving a description of the page and its URL.
The list page (say, example.com/offline/list/) has its own manifest and assets, which don't change often because it's driven entirely by that localStorage information. It shows the list of things they have offline with links to them. It's primarily a convenience for users, in case they forget to bookmark the individual things they take offline; e.g., the idea is that they'll bookmark the list once, and never have to worry about bookmarking individual pages. (They could go hunting through their history, but it's a pain.) The list page keeps itself up-to-date by getting the list of known pages from localStorage when it loads, and subscribing to the storage event so if you load other pages in other tabs while the list is open, it sees them arrive and updates its list.
So without knowing anything about your app, it sounds like perhaps your main page could be like or list page, and clicking "sync" could open a page for the PDF, generating the manifest on the fly, and that page could register the PDF in localStorage the way we do with our offline pages so the main page can show their status correctly.
Obviously, there's potential there for the actual appcache and our localStorage list to get out of sync; we can't help it if a user clears appcache (which would make us list things that can't really be viewed offline) or clears localStorage (which would make is not list things they could view offline), but there we are. Users mostly don't do that, all that often.
In the future, you'll get much more granularity and control with service workers, but for now since service worker support is very thin on the ground so far, we're stuck with appcache and its fairly stodgy way of defining offline assets.
T.J. Crowder is right: if your PDFs are static and known in advance, then AppCache is the way to go. Unfortunately it does mean that each and every PDF will be saved in the user's browser when they first load the site, but maybe that's what you want.
Else if the PDFs are dynamic and not known in advance, then yeah, you may see performance problems from PouchDB with 5MB attachments. But if you want to try it out, then check out PouchDB attachments and blob-util. blobUtil.createObjectURL() is exactly what you're looking for in terms of a "local URL."
Related
I have a component which lazy loads the images.For the first time when my page loads then at that time the images are displayed using lazy loading but if I refresh or reload or close and then open the tab then my images are pre loaded because it is now fetched from cache.Is there any way i can stop caching of my component in angular 7?
The cache is not being done by Angular but your browser. Once you load an image (and depending on the headers of the response) your browser will cache it to be able to load it faster the next time. This is usually a good approach.
Not sure why you don't want them to be cached but you have different options. Here you have a good read about HTTP caching: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching This cache configurations for static assets are usually done by your web server and they depend on which webserver you are using (nginx, Apache, IIS, node, ...).
Another option is to append a random query string to your image URL. This HTTP cache system works by using the image URL as a resource key to identify it. Because of this reason you can do something like:
<img src="./yourimagefolder/yourimage.jpg?r=putherearandomstring">
In this way your image resource 'Id' will be different in each request. (You will need to change the 'putherearandomstring' string in the example with a different random string each time the page is loaded.
If this is just for development purposes, you can disable the cache in developer tools. I don't see a reason you would want to do this for a live site though? As you would be forcing the user to grab the images everytime they load the component which will reduce performance.
The problem with cache in an environment where custom software is updated frequently and some users are less savvy is that they will not automatically get critical client-side changes unless they are told specifically to refresh their cache. With all of the decorations in the index.html I have not yet found a reliable solution.
I have designed my Meteor/Cordova app to allow offline use for some functionalities. Images loaded from external sources are being cached while the app is in memory, but once the app is removed from memory or the device is restarted and the data connection is off, the images previously loaded from "https://graph.facebook.com/xxx" are not loaded anymore, but images from other sites such as "https://ucarecdn.com/" are being loaded perfectly.
Any idea why images from graph.facebook.com are not being stored in the app data cache? The image link remains the same after the device is restarted.
I am not sure whether this is the reason but all FB(and Instagram) links to images are signed URLs. They work for a while and then they don't. If you want to link a FB image to view it in another website, eventually it will not load because the link expires (the link contains a token). In this case you will request a new token (which means a different link). I see in FB images come with a 14 days cache policy. I do not know what is the case for the Graph but I'd assume you cannot get a photo by just "https://graph.facebook.com/some_image.jpg", you would need a signed link or eventually you will be returned an error saying that you need a token. Do you get an error? Could you provide a full link to an image? If you can load an image, can you check in a Chrome Dev tools / Network, what is the cacheing policy for the image and the full path (in case it redirects you to some other url).
Think of this: I post something in FB and then FB deletes it for any reason or I want to delete it but ... thousand of users can still see it in various mobile apps or other websites because the image is cached. Well, this should not be the case and this is why social networks expire links to resources. I think in FB T&C is also mentioned that you should not cache or store their images.
Is it possible to force caching of certain Javascript Library files (ie react.min.js, etc.) when navigating between pages of a website that isn't a SPA?
Trying to look at the feasibility of a more componentized structure while not going full on SPA. The website I'm working on oftentimes has people visit a single page and then leave, but in cases where they do stick around, I don't want to have to have them reload each and every library on page load.
Background You Should Understand
There are literally thousands of articles on the web about this topic but here is a very good summary from Make Us Of's Everything You Need to Know About the Browser Cache.
The browser cache is a temporary storage location on your computer for files downloaded by your browser to display websites. Files that are cached locally include any documents that make up a website, such as html files, CSS style sheets, JavaScript scripts, as well as graphic images and other multimedia content.
When you revisit a website, the browser checks which content was updated in the meantime and only downloads updated files or what is not already stored in the cache. This reduces bandwidth usage on both the user and server side and allows the page to load faster. Hence, the cache is especially useful when you have a slow or limited Internet connection.
TL;DR
I don't know if your really looking for a way to force the browser to cache your files or if you just misunderstood how the cache works. In general the browser the visitor is using is the one that makes that decision and handles everything for you. If it sees that a resource is needed that was already accessed in the past it wont request it again, it'll just use its cache. So no, your libraries will not get re-loaded over and over. Just once.
Now if you really do need to force the browser to cache your files take a look at the answer(s) to Caching a jquery ajax response in JavaScript/browser. That should get you on a good path to a solution.
Is there any client-side script that would be able to make changes to a file on the hosts computer? (Intention stated below)
I am creating a packaged app for chrome which can show some online data, and make it available even when offline.
There is a certain thing, for e.g. 'a webpage' i want to show/store (but i cannot get/read its contents due to it being on different origin). To show when online, i can use iframe, but am unable to preserve it for offline.
So i thought i could make an appcache (manifest within the application package) which will cache the file, and on press of an update button a script would run which would make some change to the manifest which would force the cached resource to be reloaded.
I searched a lot, but no results.
Any suggestions as to how it can be done. Or any other way to get it to work?
I don't think so. This could be a huge security problem if it existed.
If you had to, you could send an ajax request to the server to create a file it creates with the current prices, and add it to the appcache file.
Here is a link to another SO quesitob that has a list of APIs you could use to get your stock price.
Webservice to get stock quotes?
Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks
A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.
You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.
You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.