I was wondering how you can handle files with variables in the url like
www.mysite.com?id=myvariable
I can't possibly have to store every possibility?
I used these variables because when the users are online they should be able to share their social media.
Kind regards
If you want these pages to work offline as is then yes, you have to store every possibility. You surely can't expect the browser to guess what all the possibilities are?
If you want to use dynamic data in your offline app then request it with AJAX and keep it in local storage. Don't store your data in pages, keep the pages static.
If you need to have bookmarkable URLs for different bits of your app that use different data on the same page then use the History API.
Related
I am kind of new in web development, I wanted to create a Vuejs app of dota 2, there will be a grid of cards, in each card will be hero profile, I have all these heroes data locally in a json file with img path include, problem us there are so many images about 100 heroes and each have 4 ability so 100 hero avatar + 400 abilities it's kind of huge. Should I deploy these images to my hosting server or change img path to fetch from dota2.com ? Which is better and faster ? What effect on client side? My problem is I don't know if the client load images on the go or they need to download all 500 images first for my website to work.
If I am using url fetch, it mean my website is static or dynamic? Can I publish it to GitHub or need Firebase to hosting it?
Static or dynamic refers to whether the data is constant or changes given a set of conditions. It seems that you have a list of images based on a field of Valve's API result set. I would suggest using those images for at least the following reasons:
A site as popular as valved more likely has caching across multiple regions. This means that if you are in Montana and the user is in Thailand there might be a copy of the image in a server closer to them than your single server; unless you also implement something similar of course.
You will not have to pay for the bandwidth which you are potentially authorized to use given you are using their API and they are given you a specific URL. You should read their terms and conditions.
If the image of the character changes it will update accordingly.
it is possible to serve multiple versions of the images based on the device. For instance a different image may be served for a mobile device than a desktop computer.
Note that the 3rd reason could be though of as being dynamic but it is not on your side. It is static in the sense that you will always use the image retrieved from the API. Also, consider the negative side effect of your json file if Valve changes an image. You should consider recreating the json file every so often.
The client side will be the same either way - a request will be issued for each image to either your server or the Valve server. The speed at which the image is served will be the determining factor.
I have a couple of questions about offline storage in HTML5. It's not an area I am that familiar with so I was hoping someone could shed some light.
I want to develop a web based system (for mobile) that a user could potentially use offline. Obviously the first time they'd use it (and any time they need to sync data thereafter), internet access would need to be required.
Some text data would need to be downloaded in json format. Basically this will be a list of certain items that will appear in auto-complete forms in the app (ie. even if the user is offline and they want to enter a type of animal for example, they'd type in "Gir" and "Giraffe", being one of the items downloaded in that json list, would appear in the auto-complete box.
I would like the user to be able to take photos at certain points. This would need to be saved internally, such that when internet access is available it can be synced/uploaded to some web server.
Could someone tell me if what I am thinking of is achievable?
Thanks
Use a cache manifest to keep offline portions of your app cached. You can also store key/value data in Local Storage, including text and blobs (which you should be able to convert to photos).
This demo (and its documentation) may be a useful resource for offline photo storage.
I've read a lot about the new Sessionstorage possibility but nowhere have I heard about the idea to save everything like images (base64), html, css a.s.o. for the single session. Is there a reason not to do this? If a user goes back to a page everything will load within milliseconds. I can see why not to use Localstorage but as its a single session it should not be harmful and only give a little boost to speed when the users are surfing a big site.
SessionStorage should be used for storing session data. Images aren't session data.
For the storing of images, styles, scripts etc. use HTTP caching.
What if you change your stylesheets or images? The sessionStorage wouldn't know they were changed. Visitors are stuck with old data.
if you want to save Image use Manifest not SessionStorage.
In Manifest file you can cache what you want this may be a solution for you.
You may be interested by reading this article
http://diveintohtml5.info/offline.html
I need an offline caching system where my app can store about 0.5 MB of data. It is preferred that there is no interaction required by the user, but small amount of user interaction might be acceptable
Currently, Microsoft's Silverlight is being used to store data offline. It is a large download for the plugin, and not installed as standard on most machines.
I have been considering cookies - but they are far too volatile. I can imagine numerous reasons someone might clear their browser cache and lose all their data.
I am not sure about HTML 5 storage, and how volatile it is in practice.
I have been looking into flash, which is installed on over 97% of windows computers. It seems I can load data from a user selected file, and save data to a user selected file.
My questions...
How big is the microsoft silverlight plugin download (in MB) for windows? (I think about 8mb, but did not get clear answer from the internet)
How can users accidentally (or deliberately without realizing the consequence) clear their HTML 5 storage on common browsers?
Is there a way to get flash to store or load data from local files without user interaction?
Is there another alternative I have not considered?
Well you could use Flash shared Object storage, which will allow between 0 and unlimited space. Check this settings panel for details of your own settings to get a better idea of what I mean.
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html
Of course this does mean that the user will have to allow third party flash content to be stored locally, which is the default. Also the default storage space is 100KB, with the user being prompted to allow for a larger amount unless they have previously increased the default themselves. So that's a small draw back, but still workable.
I am not sure how you would access the shared object from within a silverlight app, as I have only used it via a Flash swf. I will do some digging around using javascript and get back to you on that.
Also there is another post that may help you:
Javascript bridge to Flash to store SO "cookies" within flash
It sounds like what you need is isolated storage.
I use it with all my silverlight apps and it couldn't be easier to use. With only a few calls you can store and retrieve data programatically.
Edit: I was thinking that your app is already programmed in Silverlight. What is your app programmed in? Is it simply HTML/CSS at the moment?
We have several images and PDF documents that are available via our website. These images and documents are stored in source control and are copied content on deployment. We are considering creating a separate image server to put our stock images and PDF docs on - thus significantly decreasing the bulk of our deployment package.
Does anyone have experience with this approach?
I am wondering about any "gotchas" - like XSS issues and/or browser issues delivering content from the alternate sub-domain?
Pro:
Many browsers will only allocate two sockets to downloading assets from a single host. So if index.html is downloaded from www.domain.com and it references 6 image files, 3 javascript files, and 3 CSS files (all on www.domain.com), the browser will download them 2 at a time, with the other blocking until a socket is free.
If you pull the 6 image files off onto a separate host, say images.domain.com, you get an extra two sockets dedicated to download your images. This parallelizes the asset download process so, in theory, your page could render twice as fast.
Con:
If you're using SSL, you would need to either get an additional single-host SSL certificate for images.domain.com or a wildcard SSL certificate for *.domain.com (matches any subdomain). Failure to do so will generate a warning in the browser saying the page contains mixed secure and insecure content.
You will also, with a different domain, not send the cookies data with every request. This can increase performance.
Another thing not yet mentioned is that you can use different web servers to serve different sorts of content. For example, your static content could be served via lighttpd or nginx while still serving your dynamic content off Apache.
Pros:
-load balancing
-isolating a different functionality
Cons:
-more work (when you create a page on the main site you would have to maintain the resources on the separate server)
Things like XSS is a problem of code not sanitizing input (or output for that matter). The only issue that could arise is if you have sub-domain specific cookies that are used for authentication.. but that's really a trivial fix.
If you're serving HTTPS and you serve an image from an HTTP domain then you'll get browser security alert warnings pop up when you use it.
So if you do HTTPS, you'll need to buy HTTPS for your image domain awell if you don't want to annoy the hell out of your users :)
There are other ways around this, but it's not particularly in the scope of this answer - it was just a warning!