Looking for high-level guidance as I'm not sure where I'd even start w/ this.
I'm making a web app where most (if not all) of my users will have installed a Chrome extension I've written.
What I'd like to do is include large libraries in the Chrome Extension, and have the web app load the libs from the extension when the user visits a site.
e.g., both the extension & web app use React (same version).
When user visits www.mywebapp.com, the extension would inject the React library into the page and skip downloading the script.
Is this possible and/or advisable?
That's probably not a good idea, because you don't directly control updates of your extension. And the two have to be more or less in sync.
Suppose you need to update your site. Then you want to update the extension as well. That's at mercy of Google, and takes time. It's best if such updates are fully controlled by your web app server.
There are much better mechanisms to speed up (subsequent) load time by using client-side caches such as ApplicationCache. Here are a few resources to start:
A Beginner's Guide to Using the Application Cache # HTML5Rocks
Your first offline web-app # Google Developers
Application Cache is a Douchebag (for some gotchas)
Related
I know that the most Iconic feature of PWA are
Service Worker: which make user can use the app offline from cached resources
Add To Home Screen: With this feature, user can add a shortcut of the app on their mobile home screen, to get a experience like interacting with a Native App(But there still a huge different, in my opinion)
etc.
However, I can do like all of them on about 6/7 years ago by using the HTML5 technology at that time, I know that service worker comes recently but there also was "HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications." can do similar things.
Is there anyone can explain what's the difference between PWA and HTML5 webapps? or they are just the in term of same? or a similar concept but different implementation? or PWA is the (next gen/extension) of HTML5 webapp?
I might have some misunderstanding on PWAs, since I am new to this term, Thanks.
If keep it simple PWA is ordinary site with 3 additional features.
responsive design - site should look well on all devices
manifest.json - site must have general description about itself stored in manifest.json
caching - site must work offline
I believe 1 and 2 is easey. And 3 is realy what PWA is all about. So the question is: how we can provide offline support?
First problem is how we can get our initial .html .css and .js files without internet connection? Answer is: we should use service worker or App Cache. But App Cache has a lot of problems and probably will be deprecated, in other hand service worker under developement and become better each month. You can read more about their difference here.
Second problem is how we can get server data without internet connection? We should store most vital data somwhere. But after we get our .js file from cache we have access to Local Storage, Indexed DB etc. So we can store vital data in any of this storage while we online and get it back from them when we offline. It is totally up to you how you will handle that.
I believe there no cleare and strict defentiton for PWA and HTML5 webapp (at least for now). So you can asume it is the same but today PWA is more common word.
Cloudrail seems perfect to simplify interaction of a web page with e.g. google drive or other cloud service.
And this may be due to my lack of understanding and lack of knowledge of web development and Node.js, but can cloudrail be used serverless?
Or in other words can cloudrail be used on a stand-alone html page on a local computer (i.e. served by the filesystem instead of a server) and be made to access google drive or even work with an off-line mode while on a stand-alone html page (which may later sync with google drive)?
The reason being I would like to design a simple mobile app that accesses the cloud (fine so far) that is mirrored as a simple portable web page that can sit anywhere (desktop/laptop/mobile/USB stick) and is not served by any server but simply loaded from the local filesystem.
If not cloudrail, what other technology might I need to achieve this?
I don't think you can use it as a standalone website the way you describe it. You might be able to realize your use case though by e.g. using CloudRail's Nodejs SDK with Electron. This allows you to create an application very similar to a website with Javascript while still giving your users just one file that runs pretty much everywhere.
I am about to start, working on a offline web application using HTML5, indexed db.
I have been reading a lot about it. But I got little confused thinking if the user deletes the cache of the browser, my app cache would also got deleted. And then there would be no way to use the application offline, until we got connected to internet, and browser creates a fresh cache.
Is this assumption true..or Is there a way to protect the app cache from getting deleted accidentally.
No. There isn't.
This is a normal behaviour which is similar to mobile apps. If users've removed their native apps, they need to redownload them whenever they want to reuse those apps. Appcache is not a silver bullet for the case.
I want to develop a offline web app which will work on multiple platform(PC,Android). This is a basically a product display web app so that each product will have image,video,details of product etc. For development of this web app HTML5 is the choice. I will copy web app files to each device so that I could run it offline. But here I need a back-end so that I could delete outdated product and add new products(which will have details,image,video). Is there anyway so that I could add/delete product from one device and copy these files to all other devices.
I have come across HTML Appcache, using this i can build normal php site and using manifest i can store it in browser appcache for offline viewing. But this requires internet connection in each device and access the web app through browser.
I would like to know if there is any other way I could do this without keeping files in web server.
I think something like PhoneGap is probably what you're looking for (Apache Cordova)
Also be aware that app store policies may end up dooming your app if it doesn't look and feel native. Expect Apple to be very strict about this.
Is it possible to build an application inside in browser? An application means:
1 Where there is connection (online mode) between the browser and an remote application server:
the application runs in typical web-based mode
the application stores necessary data in offline storage, to be used in offline mode (2)
the application sync/push data (captured during offline mode) back to the server when it is resumed from offline mode back to online mode
2 Where there is no connection (offline mode) between the browser and an remote application server:
the application will still run (javascript?)
the application will present data (which is stored offline) to user
the application can accept input from user (and store/append in offline storage)
Is this possible? If the answer is a yes, is there any (Ruby/Python/PHP) framework being built?
Thanks
Yes, that is possible.
You need to write the application in Javascript, and detect somehow whether the browser is in offline mode (simplest is to poll a server once in a while). (Edit: see comments for a better way to detect offline mode)
Make sure that your application consists of only static HTML, Js and CSS files (or set the caching policy manually in your script so that your browser will remember them in offline mode). Updates to the page are done through JS DOM manipulation, not through the server (a framework such as ExtJS http://www.extjs.com will help you here)
For storage, use a module such as PersistJS ( http://github.com/jeremydurham/persist-js ), which uses the local storage of the browser to keep track of data. When connection is restored, synchronize with the server.
You need to pre-cache images and other assets used, otherwse they will be unavailable in offline mode if you didn't use them before.
Again: the bulk of your app needs to be in javascript, a PHP/Ruby/Python framework will help you little if the server is unreachable. The server is probably kept as simple as possible, a REST-like AJAX API to store and load data.
The "Let's Take This Offline" chapter in Mark Pilgrim's (online) book Dive Into HTML5 is a very nice overview of writing offline web apps with HTML5 technologies.
Note: Since Mark Pilgrim's original Dive Into HTML5 link seems to be down.
Copies can now be found here among other places.
Jake Archibald wrote "The offline cookbook". A modern (9 December 2014) and nice approach with ServiceWorker:
http://jakearchibald.com/2014/offline-cookbook/
The answer in 2018 is to leverage the service worker, and to build a Progressive Web App:
https://developers.google.com/web/progressive-web-apps/
i was looking for this also, i found out abt HTML5 Offline Web Apps. havent tried it tho
Users of typical online Web applications are only able to use the applications while they have a connection to the Internet. When they go offline, they can no longer check their e-mail, browse their calendar appointments, or prepare presentations with their online tools. Meanwhile, native applications provide those features: e-mail clients cache folders locally, calendars store their events locally, presentation packages store their data files locally.
Have a look at Google Gears, http://code.google.com/apis/gears/. Although they have been phased out in favour of HTML5. However, it seems that what is being pushed as HTML5 is Google Gears.