I'm looking to declare an offline file that I can use for an iPad site. I believe I must be missing something in the setup as it doesn't seem to work correctly as I understand it. Here is what I have...
index page:
<!doctype html>
<html lang="en" manifest="/cache.appcache">
.htaccess
AddType text/cache-manifest .appcache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
cache.appcache
CACHE MANIFEST
CACHE:
/index.php
/img/img.jpg
/img/img#2x.jpg
/inc/script.php
/inc/styles.php
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
FALLBACK:
Here are the steps I go through:
I navigate to the page and confirm that there are no errors and that
the url to the cache.appcache along with the items inside it are
linked correctly.
I navigate through the sites pages to confirm everything is
functioning as expected. No errors seen.
I turn off the Ethernet.
I am able to move through pages I previously setup, however, if I
hit refresh the pages all break and I can't get back to the site.
I may be misunderstanding how this is supposed to work for "offline" mode, but this seems incorrect to me.
Related
I have attempted two different implementations of #font-face. The first one is below.
#font-face {font-family: ISL_Jupiter;
src: url("http://4d3dpuzzles.com/jupiter.woff"), url("http://4d3dpuzzles.com/jupiter.woff2"), url("http://4d3dpuzzles.com/jupiter.eot"), url("http://4d3dpuzzles.com/jupiter.ttf") format('truetype');
}
The second one is using generated statements from the Online Web Fonts website.
#import url(http://db.onlinewebfonts.com/c/e9de18b32b456d7a7d03814ffa458b50?family=ISL_Jupiter);
#font-face {font-family: ISL_Jupiter;
src: url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.eot");
src: url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.eot?#iefix") format("embedded-opentype"),
url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.woff2") format("woff2"),
url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.woff") format("woff"),
url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.ttf") format("truetype"),
url("http://db.onlinewebfonts.com/t/e9de18b32b456d7a7d03814ffa458b50.svg#ISL_Jupiter") format("svg");
}
Both implementations display the embedded fonts properly on Safari, Firefox, Chrome and Opera (Mac) with URLs starting with www and those that don't. When I display my websites on my Windows laptop using IE, Edge and Firefox they only appear when the link doesn't start with www. If they start with www the Times New Roman font displays. For some reason when I try accessing my website without www on Chrome it automatically adds www so I don't know if the embedded fonts are working without www.
Note: This is my first time using a Windows computer in ten years. That one ran XP so I need help with Windows specific software and configuration changes.
I've seen some questions regarding font-face not working at all with www and suggesting that people should make changes in Apache to redirect the alias to the one they want to use. In my case I would redirect all the pages of www.example.com to example.com. However I only have this problem on Windows computers. I don't want to run into a problem with too many redirects. I currently have the following in my vhosts file for all of my websites.
<VirtualHost *:80>
ServerName example.com
ServerAlias www.example.com
.......
</VirtualHost>
How do I get my #font-face statements to work in Windows with URLs starting with www? Is this possible?
Since I did not get an answer for this using font-face or Apache I will move on. I will make sure that all of our materials mention the URL without the www and leave it at that.
I decided to revisit this issue since I started having problems with using #font-face with subdomains because of recent browser security implementations. I really did not want to mess with Apache if at all possible but decided to try again using variations of what's in this blog post for using cross domain fonts.
https://zinoui.com/blog/cross-domain-fonts
Attempt 1
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
<IfModule mod_headers.c>
<FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Attempt 2
<FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
In both cases I ended up where my subdomain first would crash with a 500 server error. After I refreshed the screen the subdomain would display with the browser default font.
In order to solve my original problem and the new ones I found I decided to implement OnlineWebFonts, a third-party tool. I normally try to avoid tools like this since there is a chance the company may go out of business but it has been around for several years do I went ahead and used the tool. The fonts show up in Windows using the www prefix along with showing up for all of my websites using subdomains.
So I was reading in the joomla wiki but could not find any further details than general talk.
So what I basically want to change is what is being loaded. For the simple main page of my blog joomla loads a a truckload of files, and a a big part is not cached. I want to introduce a caching mechanism and remove the things I am sure I don't need.
So what I in detail want to know is where is:
<jdoc:include type="head"/>
implemented?
If a tool exists to realize the caching in a easier fashion than actually writing it myself, i'd be very thankful as well. I am talking about caching pictures, css and javascript files by setting expire to in one year. Afterwards invalidating the cached files by adding a version number to the request string.
I am citing RedEye from the joomla forums:
"The file is in /libraries/joomla/document/html/renderer/head.php
But don't change this file, make an override. Copy it somewhere (your template folder for example) and include the file in your template index.php"
I'll have a go at this as soon as I finished what I started in the meantime
I find the JCH Optimize plugin works really well in combining, minimizing, and caching JavaScript and CSS files. There's a free and paid version of it. You can have it just cache the main Joomla core and template files, or you can have it do some or all of the extensions that you have in your install too. You can exclude certain files if you run into a problem. You may have to play with the plugin order and put this one towards the bottom of the list so that it loads later and grabs most of the files to optimize.
For images: If you're using an Apache web server, you can add ExpiresByType rules in the .htaccess file or httpd.conf or a conf.d file. I wouldn't include the css and js files here because I would let JCH Optimize handle them. Most of my sites have changing content so I don't typically set that very far in the future. Here's some sample code you could use.
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive - covers html, etc
ExpiresDefault "access plus 3 minutes"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
</IfModule>
For more reading, see the Apache docs on it.
Finally, jQuery can be sourced from Google using another handy free extension called jQuery Easy. You can even set it to load jQuery securely (https). Sorry, I don't have enough points to post a link.
When a browser requests a jpg and the server returns the data but not as a reference to a jpg file but rather sends the jpg data itself, is it possible for the browser to cache the data?
For example:
http://www.somewebsite.com/image/abc
This uri returns jpg data. Is there some way to get the browser to cache the data it receives to avoid having to request it again?
I just attempted to debug your example but received an Account Suspended. Webmaster, please, contact support. page!
So as I am working blind can I suggest researching the header('Expires: SOME DATA HERE') function in PHP (I assume you are using PHP).
If the solution does not lie there you can also use .htaccess to set the headers using
<IfModule mod_expires.c>
ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
</IfModule>
This example taken from http://www.robertwent.com/blog/servers-and-hosting/45-set-expires-headers-in-htaccess
Ultimately it is the headers that tell the browser how you advise the content is cached. What the browsers actually does can sometimes be surprising.
In my country internet speed is very low thus web developers are sharp in minimizing sent data through http.
I have website with same files in all pages such as css,jquery,javascript,... I need to load those files once for all pages. I use ajax in form submitation and other actions but when a page going to redirect speed is very low.
I think to use ajax in page navigation but there is a problem with ajax loaded javascripts in all pages.
thanks
You want this: http://code.google.com/p/minify/
Also, follow these best practices to speed up your site: http://code.google.com/speed/page-speed/docs/rules_intro.html
If you are hosting on apache, you could place .htaccess file in your webroot, which sets the expiration date to far future values. The disadvantage is, that you need to use version control if you change your JS or CSS.
This is .htaccess content:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>
Your CSS and JS could be linked like this:
<script type="text/javascript" src="scripts/js/jquery.1.7.0.min.js"></script>
<link rel="stylesheet" media="screen" href="scripts/css/styles-2011-11-03.css" />
Everytime you make changes to your CSS or jquery version update the filename.
If you would like to speed up your whole site alot, take a look at the great html5boilerplate and download Firefox/Chrome Plugins yslow and google pagespeed (if you have access to that).
In HTML5, some meta elements do not validate (yet?) like:
<meta http-equiv="x-ua-compatible" content="ie=emulateie7;chrome=1">
<meta http-equiv="imagetoolbar" content="no">
Are Conditional Comments an appropriate solution here resp. will meta elements still work as expected?
<!--[if IE]><meta http-equiv="x-ua-compatible" content="ie=emulateie7;chrome=1"><![endif]-->
<!--[if lt IE 7]><meta http-equiv="imagetoolbar" content="no"><![endif]-->
Using a .htaccess file instead of meta elements (not always possible unfortunately), would this be the right way to go?
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
# BrowserMatch MSIE ie OR?
BrowserMatch MSIE emulate_ie7
# Header set X-UA-Compatible "IE=EmulateIE7" env=ie OR?
Header set X-UA-Compatible "IE=EmulateIE7" env=emulate_ie7
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>
Thanks!
Personally for the "x-ua-compatible" tag, i went for the .htaccess directive. I followed the html5boilerplate template:
# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------
# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
<IfModule mod_headers.c>
# Because X-UA-Compatible isn't sent to non-IE (to save header bytes),
# We need to inform proxies that content changes based on UA
Header append Vary User-Agent
# Cache control is set only if mod_headers is enabled, so that's unncessary to declare
</IfModule>
You can register additional pragma directives:
Extensions to the predefined set of pragma directives may, under certain conditions, be registered in the WHATWG Wiki PragmaExtensions page.
Conformance checkers are then required to recognise them:
Conformance checkers must use the information given on the WHATWG Wiki PragmaExtensions page to establish if a value is allowed or not: values defined in this specification or listed on the aforementioned page must be accepted, whereas values not listed in either this specification or on the aforementioned page must be rejected as invalid.
That may be hard work though, don't know if there's any reason why these headers haven't been listed before but I guess you'll find out if you try it :)
Your .htaccess looks OK according to the MS docs, there may be some variations depending on what version of Apache you're on, but probably the best way to check is to try it and see.