AppCache html5, modifying the manifest file does not update the content of index.html? - html5-appcache

From this link, it says :
Once an application is cached, it remains cached until one of the
following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated
Following the instruction from the internet, for the manifest file I use a version number. When I change the content of the index.html with 01.jpg to 02.jpg - I also changed the version number of the manifest file.
With the steps above, it works within my Win7 Wamp Server Local Host. But once I do the same steps in my web server (after uploading the file to the web server) - it doesn't work.
Can somebody please help me what did I do wrong ?
Document was loaded from Application Cache with manifest http://www.example.com/test/offline.appcache
Application Cache Checking event
Navigated to http://www.example.com/test/
Application Cache NoUpdate event
Above is from the Chrome browser console after I modified the version number of the manifest file (from #01 to #02) and the jpg file (from 01.jpg to 02.jpg) in the index.html file.
The offline.appcache CACHE file list no change, except the version number :
CACHE MANIFEST
# 2017-03-25 version#01
uploads/event.jpg
uploads/baby.jpg
/favicon.ico
NETWORK:
indexPHP.php
The index.html file :
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<img src="uploads/01.jpg">
</body>
</html>
<script type="text/javascript">
function onUpdateReady() {
alert("offline files will be updated");
window.location.reload();
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();}
</script>
the .htaccess file :
AddType text/cache-manifest .appcache
the "tree" :
example.com/.htaccess
example.com/favicon.ico
example.com/test/index.html
example.com/test/offline.appcache
example.com/test/uploads/01.jpg
example.com/test/uploads/02.jpg
Thank you in advanced.

Related

Sass built app/builds/application.css not making it into header

I am using the ruby Gem cssbundling-rails and dart-sass to process Sass in a Rails 7 app (and I am fairly new to Rails).
In the package.json file I define the build:css script:
"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=. --load-path=./node_modules --load-path=./node_modules/#rpf/sauce --load-path=app/assets/stylesheets/"
This appears to be working; I see the results of several Sass files bundled and processed into one CSS file: app/builds/application.css.
However I cannot see how to add this file to my page. We use Slim so I include the line
= stylesheet_link_tag 'application'
in the app/views/components/_head.html.slim file. That results in this fragment in the final HTML:
<link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" />
If I load that file (application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css) into my browser I see it is an empty manifest file which starts
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
and has no files listed below.
What am I missing? How do I load the CSS that was bundled and processed from Sass files into the app/builds/application.css file into my Slim page?
A simple fix is to add
link rel="stylesheet" href="/assets/application.css" type="text/css"
to app/views/components/_head.html.slim instead.

How to setup static page with css in subdirectory in rails public directory

I'm trying to setup jekyll blog in my public/blog directory.
For this question let say I just want to have public/blog directory with index.html and css/site.css with css for this page.
I'm deploying it using capistrano, so I added public/blog to linked_dirs
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
css/site.css:
h1 {
color: red;
}
Now after cap production deploy I can visit domain.com/blog and see Hello World header, but it does not load css file.
I get Failed to load resource: the server responded with a status of 404 (Not Found) error.
Do you know how can I make it work?
It was more a nginx question.
I added this to my site nginx file:
location ^~ /blog/css/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}

BrowserWindow in electron does not open

I just tried to test electron environment for programming with JavaScript on desktop with Windows 10.
So I have an app:
const electron=require("electron");
const app=electron.app;
const BrowserWindow=electron.BrowserWindow;
var mainWindow=null;
app.on("ready",function(){
mainWindow=new BrowserWindow({height:600,width:800});
mainWindow.loadURL("file://"+__dirname+"index.html");
});
and index.html is:
<html>
<head>
<title> MyIndex.html </title>
</head>
<body>
Hello World from Electron!<br>
</body>
</html>
and package.json is:
{
"name":"Electron-Test",
"version":"0.1.0",
"main":"./main.js",
"scripts":{"start":"electron ."}
}
If I run electron . or npm start the application seems to start, but no browser window opens. On console I have to press Ctrl-C to stop the application.
Does anyone know where is the problem?
try to add one more/after file:
you are also missing a / before index.html
app.on("ready",function(){
mainWindow=new BrowserWindow({height:600,width:800});
mainWindow.loadURL("file:///"+__dirname+"/index.html");
});
i saw it in this video, at 3:32 https://www.youtube.com/watch?v=i0AkgNv4U4E

dart-polymer: failed to load resource using core-elements

I want to use the core-scaffold element from the core-elements package. I imported
<link rel="import" href="packages/core_elements/core-scaffold.html">
<link rel="import" href="packages/core_elements/core-header-panel.html">
<link rel="import" href="packages/core_elements/core-menu.html">
<link rel="import" href="packages/core_elements/core-item.html">
into my html file. If i want to run the website i get
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-scaffold.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-header-panel.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-menu.html
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/core_elements/core-item.html
I also use some elements from the page-elements package without any problems...
This is my pubspec.yaml file
name: Test
description: A sample web application
dependencies:
browser: any
polymer: ">=0.15.0 <0.16.0"
core_elements: ">=0.3.0 <0.4.0"
paper_elements: ">=0.4.0 <0.5.0"
transformers:
- polymer
I tried to delete and reload the core-elements package with pub get. But it doesnt help.
ok solved the problem. In the Polymere guide they used "-" in the links. The packages which the dart editor downloads use "_" in the links.
So its not core-header-panel. Its core_header_panel.

Phonegap / iOS - Unable to make inAppBrowser work

I've trying for some days to get inAppBrowser to work in a simple Phonegap App for iOS with no luck.
Nothing happens... No log con the console.log...
What I've done so far is:
Install inAppBrowser using: plugman --platform ios --project /path/to/app --plugin inappbrowser
If I try to install it using
phonegap plugin add
https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
it says it's already installed, so I assume installation is OK.
Add the plugin call in the main config.xml file this way: <gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />
My index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
}
</script>
</head>
<body>
Hello World
</body>
</html>
I understand, on launch, it should open the Apache home, or stay blank (because of Phonegap URL permissions), but it just shows up the "Hello World" text and nothing happens.
Any ideas of what am I doing wrong?
Thanks in advance, and sorry about my poor english!
Make sure you have the following in your config.xml:
I used to have org.apache.cordova.InAppBroweser - maybe from an older version and it caused issues.
Also make sure your config.xml (in your apk file) is created properly.

Resources