SvelteKit does a great job to avoid full page reloads where possible. However, this can be an issue when the pages should be reloaded, for example when developers uploaded a new version of files.
SvelteKit addresses exactly this via pollInterval. Documentation is here.
However, I don't see any effect setting pollInterval.
(1) As vite updates my local files during development, I visited my production ready test site with a browser (avoiding the effects of vite).
(2) Then I changed the configuration by setting pollInterval to 3000 ms in svelte.config.js like this:
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter()
version: {
pollInterval: 3000
}
}
};
(3) Additionally I changed content on some pages.
(4) Finally I uploaded it all (effectively overwriting the old files).
Result:
The client browser did only see the old (previous) content when browsing the routes, not the new content. Reloading the URLs did not help either. Only after restarting nodejs on the production test site the new content was present in the client's browser.
What am I missing? An example is appreciated.
Related
I'm trying to deploy a create-react-app to a relative path on GitHub pages with a custom domain. E.g. www.example.com/myproject
I'm using react-router-dom, react-router-redux and react-router-bootstrap
I've set homepage to http://www.example.com/myproject in packages.json (tried homepage = "." too) and also configured basename for my history:
...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);
The deployed app works on www.mydomain.com/myproject and I can navigate via the app links.
But I got 404 when I try to enter a path directly (eg. www.example.com/myproject/account) or if I do browser refresh on a subpage.
Long term goal is to configure different relative paths for dev and prod environments as described in this answer but first I just need to make it work in deployment.
Problem: URL gets evaluated on server side
When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can't take action as it is not yet loaded for that page. Now server looks for a route that matches /accounts won't find it (because routing is done on client side) and returns 404.
Solution
If you had control over the server, you can serve index.html for all routes.
This is explained in create react app documentation serving apps with client side routing.
As we don't have that control in case of GitHub pages, We can try these.
Easy Solution
Switch from browserHistory to hashHistory
With this change, your URLs will go from looking like
www.example.com/myproject/account
to
www.example.com/myproject/#/account
So it's a bit messy.
Harder solution
Get GitHub pages to redirect to index.html on all requests. Basically you have to add a 404.html in your build directory with code to redirect to index.html. More on how to do that.
Create React App has documentation around client-side routing in GitHub pages too
The best way to solve the issue is create a copy of index.html and call it 404.html for production build. To make it add this to package.json scripts:
"build": "react-scripts build && cp build/index.html build/404.html"
The reason is because the browser may not have cached the routing code yet so it causes a 404 error if you go to a route other than the index.
Side note if anyone is using ZEIT Now to deploy (although gh-pages would be similar); I managed (after a deal of time) to work out how to fix it. It was a bit of an effort so I decided to make an article on it for anyone else who gets stuck.
https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb
I have a web site, which uses external dll code .
The dll is not part of the web site. (It is Dynamics AX 2012 CIL, but I think this no matter).
The web site has dll, that uses that code in Rest technique (I use MCV4 for VS 2010, and Rest API client tool for chrome).
The code run fines, but when I do some changes, the changes don't reflect on the site (I see the old behavior of code).
I clean all of the history in chrome - same problem.
For my own user: When I installed Firefox + Rest tool for Firefox - things work properly for Firefox (with the changes reflect on the site). For Chrome - still I had the problem.
That happened for specific users (other users - doesn't have any problem at all).
So, I presume that's may be some declarations on web.config that uses caches between the server and the browser.
Am I right? How this the caches between the server and the browser is called?
Is that a problem in chrome, or something I need to declare on web.config (or in C#)?
How can I declare that cache will be refreshed only when I uploaded a new code to site (A specific time stamp on web.config, or something like that)?
The code of mine in webapiconfig.cs (it is MCV4 for VS 2010):
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
FormUrlEncodedMediaTypeFormatter f;
config.Formatters.Clear();
config.Formatters.Add(new JsonMediaTypeFormatter());
f = new FormUrlEncodedMediaTypeFormatter();
f.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/x-www-form-urlencoded"));
config.Formatters.Add(f);
}
}
What shall I write in C# or in output caching IIS configuration, as on site:
http://www.iis.net/learn/manage/managing-performance-settings/walkthrough-iis-output-caching#05
Thanks :)
the DLL runs on the server, therefore it is the SERVER cache you need to clear, not you browser cache.
you're talking C# so I guess you're using IIS
Click on the server name then go to output caching.
Click Add Cache Rule then type the extensions - .dll
and follow the prompts to disable caching for this extension.
I have a versioned cache manifest:
#version = e5b4271
Every time this version changes, my webapp loads the new manifest, but it never loads update files from the server. Even when I clear the browser cache (not the application cache itself), or hit Ctrl+Shift+R to force it to fetch a new version, it still loads the files from the old appcache.
The only way I can get it to update is to clear the browser's application cache in settings, but obviously this is unacceptable because I need it to update for regular users.
Any ideas why this would happen?
Just figured it out. I'm using Flask's development server, and it seems by default (via werkzeug) it sends cache headers for 12 hours for static files. Adding the following to my flask config solved this:
SEND_FILE_MAX_AGE_DEFAULT = -1
If anyone else has this issue, check your server config to make sure cache headers are not sent with static files. You can check this in the network tab in chrome during the first load of the file.
I'm trying to write an HTML5 offline application but can't seem to get Chrome to accept the cache manifest file.
Chrome logs the following output to its console while loading the application:
Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Error event: Manifest fetch failed (-1) http://localhost/cache.manifest
However, if I remove all lines from the manifest file except for the first line (i.e. "CACHE MANIFEST") Chrome accepts the manifest:
Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 0)
Application Cache Cached event
But, as soon as I add a new line to the manifest (even if that next line is empty) Chrome reverts to complaining that the fetch failed.
All files are being served locally from a Windows 7 PC via Python using SimpleHTTPServer on port 80. I've updated the types_map in %PYTHON%/Lib/mimetypes.py with the following line:
'.manifest': 'text/cache-manifest',
The manifest should contain the following:
CACHE MANIFEST
scripts/africa.js
scripts/main.js
scripts/offline.js
scripts/libs/raphael-min.js
favicon.ico
apple-touch-icon.png
To cache a website offline (HTML5) you need to specify all the files needed for it to run. In short specify the site main components needed.
Easy way to create a manifest is in Note Pad.
Note: CACHE MANIFEST needs to be first line and your files will follow after a line space as follows:
CACHE MANIFEST
Scripts/script.js
Content/Site.css
Scripts/jquery-ui-1.8.20.min.js
Scripts/modernizr-2.5.3.js
SESOL.png
Scripts/jquery.formatCurrency-1.4.0.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
http://code.jquery.com/jquery-1.8.2.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Content/themes/images/icons-18-white.png
Controllers/AccountController
Controllers/HomeController
Models/AccountModels
Account/Login
Home/CheckOut
Note2: remove all spaces after each line.
Note:3 you need to follow the exact format FOLDER/File or FOLDER/FOLDER/FILE ect....
Just because you have a manifest file doesnt mean it will load. you need to add the following to the Tag:
<html manifest="~/cache.manifest" type="text/cache-manifest">
Don't forget that after you add this it's cached the first time the page loads. So you need to register a cache event in the 'mobileinit' event.
$(document).on("mobileinit", function () {
//register event to cache site for offline use
cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);
function cacheUpdatereadyListener (){
window.applicationCache.update();
window.applicationCache.swapCache();
}
function cacheErrorListener() {
alert('site not availble offline')
}
}
Download Safari and use the web inspector to find errors.
http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1
Tip: Chrome's developer tools "F12" will show you the errors in the manifest load. ie the files you still need to add.
Hope this helps, covers the entire process. I assuming if you are at this stage in development you new to add these to the mobile init:
$.mobile.allowCrossDomainPages = true; // cross domain page loading
$.mobile.phonegapNavigationEnabled = true; //Android enabled mobile
$.mobile.page.prototype.options.domCache = true; //page caching prefech rendering
$.support.touchOverflow = true; //Android enhanced scrolling
$.mobile.touchOverflowEnabled = true; // enhanced scrolling transition availible in iOS 5
Safari Developer Guide:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4
Have you tried anything like https://manifest-validator.appspot.com/ to validate your manifest?
I've struggled with my manifest file for quite a while, it is really hard to pinpoint what is wrong. Could be something as simple as wrong encoding to an extra line break at the start.
Today I experienced exactly the same problem. After hours of working I came the the key point: the format of manifest file. In short, the file must begin a new line ONLY with ascii(0A), not ascii(0D), or ascii(0D + 0A). Only in this way can I live with Chrome, or I will get a blank page, and the error info in the console window.
According to w3c, (http://www.w3.org/TR/html5/offline.html), in “5.6.3.2 Writing cache manifests”，both 0A, 0D and 0D + 0A are all acceptable. So, my opinion is: Chrome is not compatible with w3c in the point.
Further more, say, if myapp.js is to be cached, it MUST follow the same rule: begins a new line only with ascii(0A), or Chrome will throw the same info in the console windows.
My Chrome is 13.0.782.107
I have now resolved this issue by switching to CherryPy for serving these files :)
If anyone else becomes similarly stuck but wants to keep the server part simple, the following Python may be sufficient for getting started:
import cherrypy
class SimpleStaticServer:
#cherrypy.expose
def index(self):
return '<html><body>Go to the static index page</body></html>'
cherrypy.config.update({
# global
'server.socket_host': '192.168.0.3',
'server.socket_port': 80,
# /static
'tools.staticdir.on': True,
'tools.staticdir.dir': "(directory where static files are stored)",
})
cherrypy.quickstart(SimpleStaticServer())
If you want to visit the "site" from another device, you'll need to use the external IP address (for me this was 192.168.0.3). Otherwise, you can just use '127.0.0.1' for the 'server.socket_host' value. I then point my browser to http://192.168.0.3/index.html to get my static index page.
I have resolved this issue in visual studio for MVC application.
follow below steps:
I have created .appcache file in notepad and copy manifest file content into it.
(you don't need to create .Manifest file OR not create Manifest.cshtml view. just create .appcache file in notepad.)
give reference as
<html manifest="~/example.appcache"> in view
and issue will be resolved
I think the line
CACHE:
is missing in the manifest file (should be the 2nd line, before the list of files.
I am working on a maven project with spring boot and angularjs.
Today I changed some simple html tags and noticed it wont change when testing in localhost.(odd because on Friday it did)
How i route my HTML with angular:
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "./html/homePage.html",
controller : "some-controller"
})
So when changing something in on of my pages it wont change in localhost.(Not hidden or something.Its just my structure from Friday)
I tested and changed homePage.html in homePage1.html. Started again and ofc it wont render anything because the file doesnt exists.
When I moved the somePage.html from my HTML folder and started the project again it rendered the page(but again the page from Friday). Again its rendered a File which isn't even in the folder.
When calling the page static via localhost/html/somePage.html it always shows the old page from last week. (with and without the edited file in path)
What I tried:
Restart Eclipse
restart whole pc
cleaned proejct(via eclipse)
cleaned and reinstalled with maven
updated project via maven
Does someone have a solution? (before i become insane)
I think the problem comes from the cache. Free the cache of the browser and test it again.
Ok Got it.
The error was a mix of eclipse cache and a Plugin.
Noticed that Egit, which wont worked with Spring Boot Suite, magically fixed itself and activated itself.
After resetting the Head of Git and deleting the cache in eclipse the changes are rendered again.