Force clear cache in OpenUI5 - javascript

I have created an OpenUI5 app and I want to relase a new version daily.
But I found some problems:
Not always on the client browser is loaded the last version of javascript (I have a label that show the version and to see the last number is requred a manual refresh by F5)
I have a JSon file that i use to bind a menu. If I modify it, on the client browser it remains in cache and also with F5 not load the new version. The solution is clear data of browser (...)
Now I have this meta-tags on my index page:
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
Is there a way to force the reload of all content always? (or when I modify the version number?)

This really depends on what server you are using to serve the content and whether you can set the headers when it serves the various JS files to the client. Unfortunately this is probably just disabling the cache all the time.
There is also a built in concept called "Cache-buster" which is documented here - OpenUI5 Cache Buster. This does something clever and puts a timestamp or version number in the url which is read from a config file. If you are hosting on an ABAP stack then this is built in for you and easy to enable, if you aren't it's still easy to manually implement.

I have solved my problem using ONLY
<meta http-equiv="cache-control" content="no-cache" />
as show in this post:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

Related

How to clear cached versions of website on users Browsers?

I have a very simple HTML/CSS/JS website. When ever I make changes to it, to see the updated version I have to manually clear my cache on mobile or hard reload on PC.
Is there a way of clearing cache for your site on users browsers? I have had a look around but I seem to only find of instances of clearing server cache and libraries that I don't know have to use yet. Many thanks in advance for your help!
Browsers will cache:
the html files
the JS files
the CSS files
It's probably best to do this on the server side, but you can first try doing it on the client side as described below.
To make sure the latest html file is used, you could try adding this within the <head> of your html files:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
To make sure the latest version of "mycode.js" is used, append a new value to the file (e.g. the timestamp it was last edited):
<script src="mycode.js?v=123456789"></script>
Same thing to make sure the latest "mystyle.css" file is used:
<link rel="stylesheet" type="text/css" href="mystyle.css?v=123456789">

Why every production deployment has need to clear the browser cache

Every new production deployment need to clear cache in react js.
When you access a web site like
http:// mysite.com/index.html
if a cached copy of the file index.html is present on the browser cache it returns that copy. Unluckly that copy has pointers to the old javascript and css files that are already cached on the browser. So also if your javascript files changed their names you will always get the old cached copy with the old name.
You can solve this problem informing the browser that the index.html must not be cached. Otherwyse you need to manually clear the cache. This can be done adding
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
to your index.html.

How can I prevent Word from caching JS API Code?

I am developing a Microsoft Word Add-in in Office JS API. The add-in allows a document author or editor to select regions of text and create tags that associate the regions with index entries. The tags are hidden Ooxml strings. A second step iterates through the document body (also footnotes) and generates an index (with page number placeholders) at the end of the document. The final step is implemented in VSTO (C#), which again goes through the document and resolves the page number placeholders with actual page numbers (since JS API doesn't have access to them).
FWIW I'm using Word 2016 (Version 1908, Build 11929.20114 Click-to-Run) -- our organization uses Office 365, and the Word JS API 1.1 requirement set. The html, js and css code is hosted on a webserver -- there is a manifest xml file in a directory on the user's C: drive which points back to the webserver URL and that C: directory location is added to the Word>Options>Trust Center>Trust Center Settings> Trusted Add-in Catalogs list as \\localhost\C$\directory name. Then the add in is sideloaded from the Developer tab's Add-ins>Shared Folder list.
Clarification: this is what the manifest.xml file looks like:
<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:type="TaskPaneApp">
<Id>e69eaa23-19f3-48fd-9f8e-694eb013e434</Id>
<Version>1.0.0.0</Version>
<ProviderName>Microsoft</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="PSU Indexing V2" />
<Description DefaultValue="Manage and create document indexes." />
<Hosts>
<Host Name="Document"/>
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://psuindexer.la.psu.edu/PSUIndexerV2/home.html" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>
One problem I'm having is that Word caches a very old version of the JS API code. I have gone into Internet Explorer (version 11.592.18362.0) and changed the Internet Options>General>Browsing History>Settings> and specified "Check for newer versions of stored pages: Every time I visit the webpage". On the advice at https://github.com/OfficeDev/office-js/issues/632, I added meta http-equiv tags to the HTML as follows:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
But the behavior is weirder than that. I can install the add in, modify the html and javascript on the website, and click the Reload button in the add-in and the pages are refreshed and the code is updated. But if I close the document and re-open it, it seems to have a cached version of very old code (ie. from yesterday). Reload doesn't fix the problem -- the only thing I can do is:
1) Close the add-in
2) Remove the location from trusted add-in catalogs
3) Close Word and reopen it
4) Add the location back into trusted add-in catalogs again
5) Close Word and reopen it again
6) Add the add in back from Developer>Add-ins>Shared Folder
Then it will work with the latest code again just fine, until I close the word document, at which point upon reopening it it has yesterday's version again.
Can anyone explain what's going on here, or how I can fix it? The current situation would be unacceptable to me if I were an end-user.
This is getting too complicated to handle comments, so I'll use an answer and delete this later.
Since it seems to be document-specific, let's try a couple of things:
Reproduce the caching, so you've got a doc open that is using a version of the add-in that you know is older than the the current version. Save that file under a different name. Then reopen the file and the add-in. Is it using the old or new version?
As in #1, save a copy of the file that is using the old version. Then go through your 3 step clean-up process so you've got a new document that's using the latest version. Save a copy of that. Add .zip to the end of both file names. (docx files are zip format.) Unzip them both. Then use a "diff"ing tool and see if there are any difference that might explain the caching.

Web Push API: how best to present the required javascript files when porting to the server?

I've been delving into the emerging PUSH API and manage to register the service-worker as expected. In broad lines I follow the Mozilla recipes for this.
Generally speaking, you will create two javascript files; one for the service worker that you want to register, and one to perform the actual registration - lets call this index.js-, which in my case includes a registerWorker() function. I include an html file (say push.html) that calls this function on-load, so that browser that calls this html file will register the service worker. So far this all works fine in the development environment.
The problems start when I want to port this to my server. If I port the service-worker and the index.js to my server (e.g an Apache 2 server), I suddenly get a message telling me that the serviceworker is not in the navigator. I've been trying different strategies, but so far without succes.
My question therefore is; what is the best way to put the required javascript files on the server in order to achieve the above?
Edit:
I'll add the push.html file below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Push Notification - ServiceWorker Cookbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="registerServiceWorker(12)">
<script src="./js/index.js"></script>
</body>
</html>
As far as I can see, the only difference is that I call this file from localhost in the dev environment, and http://{myserver}:{myport}// from the server. I would not expect any different behaviour unless maybe it has something to do with SSL requirements or CORS filters...
Edit 2:
ok..I found the most probable cause, based on this post:
Can't find serviceWorker in navigator anymore
When putting the code on the server, https support is required!

retrieving cached pages

I have a simple website created using JavaScript and jQuery. The website contains 4 web pages and is hosted on a web server. The issue is I want to be able to navigate through these 4 pages when I don't have access to the server (no wifi or otherwise). The way I'm linking the pages (if that has an effect) is using
window.location.href="page1.html";
the click function for one of the buttons on the home page is as so
$("#btnOne").click(function() {
window.location.href="page1.html";
return false;
});
I thought of using post but on the jQuery website it says "Pages fetched with POST are never cached"
Is there an effective way to accomplish what I want; having the pages cached into the browser so its available to use offline?
CACHE MANIFEST
# 01-AUG-13 215
CACHE:
css/stylesheet.css
css/custom-theme/jquery.mobile-1.3.2.min.css
home.html
page1.html
page2.html
js/jquery-1.9.1.min.js
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
Sounds like what you want is the HTML5 appcache:
<html manifest="example.appcache">
...
</html>
Which lets you specify a manifest for your site and dictate what pages should be cached etc.
In the manifest file you indicate what resources you want to be cached...
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
There's some great detailed information over on HTML5 Rocks as well as some technical gotchas you might run into.
Save the four html files and any required "resource" (javascript, css, images, etc) files on your local machine. When you want to use your site off line, open the landing page on your local. Most operating systems, when you open (click on) and html file will run your default browser and render that page. Links will be followed to the additional pages. This works for sites that are static (eg. html) on the server side. They can be dynamic on the browser side.

Categories

Resources