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.
Related
I am trying to write a powershell script to read a webpage which uses javascript on it and get the output. webpage source code is something like below but the page itself in browser has a form as a result of javascripts. I need to get the form by powershell but so far not successful as Invoke-WebRequest or Invoke-RestMethod just get the content which refers to the js.
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content=noindex><link rel=icon href=/websellingbooking/favicon.ico><title>Loading</title><link rel=stylesheet href=/websellingbooking/css/custom.css nonce="nonce-GzB2v2o2sBKmQkE5xM+0cPpjQ+rO8KyK/kI1DdxAQUY=" type=text/css><link href=/websellingbooking/css/app.4975c048.css rel=preload as=style><link href=/websellingbooking/css/bulks-sellerss.67fb10ba.css rel=preload as=style><link href=/websellingbooking/js/app.0c50239a.js rel=preload as=script><link href=/websellingbooking/js/bulks-sellerss.08a611c4.js rel=preload as=script><link href=/websellingbooking/css/bulks-sellerss.67fb10ba.css rel=stylesheet><link href=/websellingbooking/css/app.4975c048.css rel=stylesheet></head><body><div id=app></div><script src=/websellingbooking/js/bulks-sellerss.08a611c4.js></script><script src=/websellingbooking/js/app.0c50239a.js></script></body></html>
A) There is no HTML form in the source. If you have control over the websites, it might be an option to write complete HTML pages/templates including the form. That way, all elements are downloadable.
B) The Chromium browser can be used in a headless way, which means without a graphical user interface. Thus one can request a website on a server-environment and get a fully rendered snapshot of the page, as it was loaded in Chromium.
See also: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
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!
Background
I have a React app that was generated with create-react-app.
It is a set of UI forms that are intended to be presented modally inside a hosting website. The hosting website provides a JS callback to be invoked upon completion.
Motivation
I want to be able to distribute this small React app as a standalone "vanilla" JS module, that can then embedded in any HTML page.
What I have now is running npm run build and getting a full website with my app - but that's not what I need. A desirable output should be a simple .js file, that can be imported to a other's websites (that are not necessarily built with React). Braintree's JS SDK is a very good example of what I need.
Example usage in hosting website
<head>
<!-- loading MyModule -->
<script src='https://cdn.mydomain.com/mymodule.js' some-parameter='param-provided-by-hosting-website'></script>
</head>
<body>
<div id="mymodule-container"></div>
<!-- rest of hosting website... -->
<script>
// this will present a "full screen" UI component and call callback upon completion
MyModule.presentUI(
function callback() {
console.log('MyModule completed');
}
);
</script>
</body>
Putting aside all of the internal structure and consideration, how do I bundle my React app (including its .css files) as one .js file that runs inside another website?
UPDATE
So apparently running npm run build outputs, among other things, a static/main*****.js file, which is all of the JS contents. The index.html file is actually a good example of how to use that .js file as a module:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<title>My Hosting App</title>
<link href="/static/css/main.1695e3be.css" rel="stylesheet">
</head>
<body>
<div id="my-module-container"></div><script type="text/javascript" src="/static/js/main.0b4c7736.js"></script>
</body></html>
Now what's left to ask is how to load the .css (from built-generated static/main******.css file with the .js file, without making the hosting website also add a <link> tag to the RSS (like in the output index.html. Basically making this happen inside the generated .js file.
I cannot say how this can be achieved without having some sort of 'standard' API, that all your modules can follow.
We have tried to do something similar with FrintJS (https://frint.js.org), with the concept of 'regions'.
You define certain areas where you want your Apps (modules according to your question) to mount themselves on, and they can be loaded asynchronously on demand via separate <script> tags.
You can read more here:
https://frint.js.org/guides/regions/
https://frint.js.org/guides/code-splitting/
I am having two JSP files in my main application whereas one is MAIN.jsp and another one is CSS & JS import.jsp file.
MAIN.jsp is the main page of main application.The import.jsp file will import the CSS and JS of partner application in MAIN.jsp file which is used for support the few functionality with main application as partner.
But all the application (Main and Partner) are deployed in same server. So basically the host name of both the application will not change but context root alone will get change.
i have used jsp import tag to import the import.jsp in MAIN.jsp like mentioned below code.
MAIN.jsp
<html>
<head>
<c:import url="resourceImport/import.jsp">
</head>
<body>
</body>
</html>
import.jsp
<html>
<head>
<link url="http://hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="http://hostName/DifferentContext/sample.js" > </script>
</head>
<body>
</body>
</html>
Currently i have hard coded the partner HTTP URL in import.jsp for load all the resource in MAIN.jsp file. But moving forward we are planing to run the application in HTTP and HTTPS environment.
So how can i make it dynamic way of getting protocol in import.jsp file. I have tried following methods to get the protocol dynamically but its not working.
Method 1:
Removing Protocol and make it relative URL
<head>
<link url="//hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//hostName/DifferentContext/sample.js" > </script>
</head>
Method 2
Removing Protocol and Host name and make it relative URL
<head>
<link url="//DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//DifferentContext/sample.js" > </script>
</head>
So could you please anyone help me to get resolve this issue.
If there is anything that makes it worth to use https (and these days there is), I'd opt for less hassle and just go https everywhere.
No more worries, no accidental information leak and protocol change. Easier maintenance and no later update will inadvertently bring back a wrong protocol link.
Check HSTS as an option to force compliant browsers to not bother with any http connection attempt in the future.
That being said, relative links are another way to stay in the same protocol and probably beneficial: You rarely want to hard code domain names into your applications - Depending on the programming style that you're using in your app, you might want to use page-relative links (../DifferentContext/example.css) or server-relative (/DifferentContext/example.css). Protocol relative is fine as well, but hardcodes the domain name.
Yet another option is to make that location completely configurable. This way you can decide later (provided that you've changed all occurrences to the configured value): ${config.theOtherAppBaseUrl}/example.css. With this, you can try out all the different options yourself and within 10 minutes. And change your mind later, when you come to the conclusion that it's worth to go https everywhere.
(Note: You have an issue in your question's code: The last link refers to //DifferentContext...., which would assume that DifferentContext is a hostname - this is a protocol relative URL)
I've found many explanations about caching, some of them even have examples but, it is kind of foggy to understand it and how to use it. I've tried to use it many times, but I've failed (I want to improve speed, I want only the necessary to be loaded from the server). Can you help me to make this page below be saved in the browser's cache, If possible give me an explanation or a different way on how to do it (it can be JS too!)?
P.S.: It can be Appcache if you give me a suitable example for this page ;).
Thanks in advance.
My Appcache file's name: offline.appcache.
CACHE MANIFEST
/style.css
http://sistema.agrosys.com.br/sistema/labs/CSS_HTML/html1.html
<!DOCTYPE html>
<html lang="en" manifest="/offline.appcache">
<head>
<meta name="viewport" content="width=device-width" />
<title>page1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="testing_class">Test</div>
<div class="testing_clas">Test</div>
<div class="testing_cla">Test</div>
<div class="testing_cl">Test</div>
<div class="testing_c">Test</div>
<div class="testing_">Test</div>
</body>
</html>
Reconsider using AppCache. Using it doesn't necessarily imply that your site will work offline. Basically, here are the steps that AppCache takes, regardless of the browser connection status:
Asks the server for the manifest file.
If the manifest file hasn't changed, it serves the local files.
If the manifest file has changed, it downloads the new files, saves them and then serves them.
Since you mention that
I want to improve speed, I want only the necessary to be loaded from the server
AppCache is a perfectly valid solution.
EDIT: A quick example of using AppCache:
In the beginning of your original HTML:
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="example.appcache">
<head>
You just need the "manifest" in the tag. Then, the example.appcache file would be:
CACHE MANIFEST
CACHE:
http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.4/jquery-ui.js
NETWORK:
*
http://*
https://*
Just include in the CACHE section whatever static content your site uses.
You can also put a version number or date in the manifest file to make sure the browsers gets the new content when needed.
Caching is used to avoid redownloading files that are reused very often (across several pages or several sessions), but it targets mainly those files that fall under the category of "assets" (CSS, javascript, images, etc.), and which are expected to remain frozen. However, the content of webpage (the HTML) is NOT expected to remain frozen (eg. search results, etc.), and is usually reasonable in size, so there's no real reason to bother caching it (who still has a 56k connection really ?).
Then, there is the case of HTML "static pages", but usually those pages contain only text, and text is very light (unless you have a full book) compared to other media, so most people don't bother about it.
Now if you really want to "cache" the HTML, well it's exactly the same as keeping an offline version, so why not Appcache ?.