Using the Application Cache I can easily make my web application available offline and it works perfectly. The problem I am encountering is that I have recently started using a .htaccess file to rewrite urls from
http://www.example.com/?/page
to
http://www.example.com/page
After loading the 'homepage' in principal everything still works (as all pages are loaded through Ajax), but local bookmarks and the like do not work. Is there any way to add this functionality with a simple service worker, whilst still relying on the Application Cache for the rest of the offline functionality (thus allowing Firefox and Safari to fall back on the Application Cache, whilst Chrome and Opera would work perfectly offline).
Browsers that support service workers* use the presence of a service worker as a trigger to disable App Cache functionality for pages under the service worker's scope. See Is Service Worker intended to replace or coexist with Appcache?
I understand how using a service worker for something like rewriting URLs is independent from the offline use case, and therefore shouldn't interfere with App Cache, but there's no flag that you can use to say "Hey, this is a service worker that plays nicely with App Cache, so let me use both."
* This applies to Google Chrome. As other browsers add support for service workers, they might have different policies with regard to App Cache.
Related
I need to create an application which will be ran on the browser (local only, not hosted online). I will need to use a lightweight database which has a physical file (eg SQLite3, so I can have a .db file).
Also, just to mention:
I cant use IndexedDB alone to save the data because clearing browser data would clear the entire "database".
I also wouldn't be able to use electron since the bundle is too big. I need the browser for its portability
Also cant use PouchDB, since due to security constraints, online sync (CouchDB, etc) is not possible. Then it would be 100% stored in IndexedDB, which brings me back to my point on bullet 1
My question is - is there a way to create an offline web application build with VueJS frontend + NodeJS backend? I only need NodeJS because SQLite only works on the Node environment.
Deployment is preferably in .html only (is there any way that is possible, and access only using the file protocol file://)? Otherwise, I may consider using a local web server (localhost) - I'm not sure though if it is possible to serve an html file without any installations (node, python, etc), so I would still have to check all my options about this.
Any thoughts?
I am still new to this so please bear with me! There is very limited info online that talks about a 100% offline web application. Thanks a lot!
I have a react web app that's hosted through Azure App Service and it gets updated fairly frequently, however the browsers accessing the app seem to be caching the javascript/html files fairly aggressively, and so I have to constantly hard refresh/empty cache, as well as tell users of the app to do the same. I'd like to avoid end users having to manually clear their cache whenever a change goes out, is there a way for App Service to tell clients to invalidate their cache? I tried looking up how to set the Cache-Control header for App Service but it doesn't seem possible, does the app need to be behind an Application Gateway or an Azure CDN instance in order to do this? Is there a recommended approach for forcing clients to pull down the latest changes when a deployment goes through?
Whilst you can control CDN caching by purging the cache on deployment, this won't clear any local browser cache.
In order to solve this problem without disabling caching entirely, you need to implement some logic in your front end to cache bust the local cache.
The basic principle is as follows:
Deploy a publicly accessible file which contains the version number of the most recent deployed version.
In your front end code (javascript for example) fetch this file and compare the version number with the version embedded in the front end files. If the versions differ, delete the local cache and force the page to reload.
There are few libraries out there that help. For example, if your front-end is a React app, you could consider using react-cache-buster
I'm building a static web app using React. Does Azure offer a service that allows one to embed a function into my Javascript code that loads a small value into clients' browsers. The values are not in the code, but controlled via the Azure UI.
That is, in the portal I'd create some configuration that states value = 1 and then I'd add Javascript code like if (azure_switch('app/value')) == '1' {...} to my app.
My goal is to have kill switch for portions of the App that could be controlled without pushing code changes. For my simple kill switch, I could build my own using app configurations and a new Azure function, but I'm curious if something like this already exists.
Also, if the function in the browser was context aware, it could also be used to control rollouts, or so that developers see a newer version of certain features.
Application settings: are available as environment variables to the backend API of a static web app.
https://learn.microsoft.com/en-us/azure/static-web-apps/application-settings
Here's the only solutions I've come up with (don't know if they're the adequate though):
Server-side updates:
Version every client request and have the proxy route to the
appropriate server version.
Cient-side updates:
Notify the client over a websocket connection to re-inject the
script/style tags after X number of idle minutes thereby invoking 2
ajax requests for updated JS/CSS files and refresh the HTML of the
page.
I don't know if this is something that shouldn't be a priority in the early stages of the app and I should just take the entire app down for "scheduled maintenance" in the early hours of the morning.
For SEO purposes, the front page's HTML is sent by the server along with the single JS/CSS file.
I think the Right Thing (tm) is to make build your single page application in a way where it consumes RESTful API which is public quality. In other words, think about it as if you are publishing your API to the world and when making changes make them backwards compatible. I think this is not as hard as it might think and will leave you with a cleaner system. Certainly better than building a complex versioning and live patching scheme!
If you are deploying to a tomcat server, you can simply overwrite the .js and .css files in the correct "deployed" location....
copy files to /your/deployed/app/location/webapp/js, etc this is a quick and easy way to "hot deploy" a new JS / CSS w/o taking the server down..... however if you have backend support that also needs to be updated, that may require a restart of the tomcat service. in which case something like Jenkins might help. http://www.tomcatexpert.com/blog/2012/03/21/integrating-jenkins-and-apache-tomcat-continuous-deployment
I've been trying to do some CRUD operations to a local drive using chrome extensions.
I understand i won't be able to access the local file system directly, a sandboxed environment will do.
LocalStorage worked for data upto 5 mb. I'll be needing more.
I've found that setting "unlimitedStorage" won't grant more to the LocalStorage.
"unlimitedStorage"
Provides an unlimited quota for storing HTML5 client-side data, such as databases and local storage files. Without this permission, the extension or app is limited to 5 MB of local storage.
Note: This permission applies only to Web SQL Database and application cache (see issue 58985). Also, it doesn't currently work with wildcard subdomains such as http://*.example.com.
see chrome extension docs
I've then tried to use the FileSystemApi.
But it turned out that only chrome apps can use this api.
As far as i know I'm left with 4 other options:
WebSQL, which is deprecated.
IndexedDB, which looks promising
Application cache, referenced in the notes of the unlimitedStorage description.
Storage api, Which seems to be available for both extensions and apps
I've got a hunch that indexedDb will allow some form of CRUD. I'm reluctant to use WebSQL as it's deprecated and i've yet to find information about the Application cache, although i doubt that storing data for extensions is within the boundaries of its intended purpose.
Is it possible for chrome extensions to save, load and delete files on the local file system?
Am i misinformed about the LocalStorage Limitations or the use of the fileSystem Api in chrome extensions?
Will IndexedDB fulfill my needs?
Try with Cordova, Capacitor or similars.
In the browser, run the code in your test area, if you want to use your sandbox you need to run the application on the device (iOS, Android, Windows, Linux, etc.) and use native resources inside the sandbox, dont forget request permission.
If you work with ionic v4 you can use capacitor and mostest important is you can build for native app from web components to have your sandbox into native device!
Capacitor:
https://capacitor.ionicframework.com/docs/apis/filesystem/
Cordova:
https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html