Added offline capabilities.

This commit is contained in:
Tobias Blum
2017-02-18 22:28:42 +01:00
parent 99ff69d233
commit 51c87aab7c
5 changed files with 44 additions and 10 deletions
+4 -4
View File
@@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html manifest="offline.appcache">
<head> <head>
<!--Import Google Icon Font--> <!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css--> <!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
@@ -144,8 +144,8 @@
</style> </style>
<!--Import jQuery before materialize.js--> <!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">(function($){ <script type="text/javascript">(function($){
$(function(){ $(function(){
+13
View File
@@ -0,0 +1,13 @@
CACHE MANIFEST
# Explicitly cached 'master entries'.
# index.html
http://code.jquery.com/jquery-2.1.1.min.js
http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js
http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css
http://fonts.googleapis.com/icon?family=Material+Icons
# Resources that require the user to be online.
NETWORK:
*
+10 -2
View File
@@ -18,6 +18,12 @@ gulp.task('html', function() {
.pipe(connect.reload()); .pipe(connect.reload());
}); });
gulp.task('appcache', function() {
gulp.src(src_dir + '*.appcache')
.pipe(gulp.dest('build'))
.pipe(connect.reload());
});
gulp.task('connect', function() { gulp.task('connect', function() {
connect.server({ connect.server({
@@ -29,10 +35,11 @@ gulp.task('connect', function() {
gulp.task('watch', function() { gulp.task('watch', function() {
gulp.watch(src_dir + '*.htm', ['html']); gulp.watch(src_dir + '*.htm', ['html']);
gulp.watch(src_dir + 'js/*.js', ['html']); gulp.watch(src_dir + 'js/*.js', ['html']);
gulp.watch(src_dir + '*.appcache', ['appcache']);
}); });
gulp.task('upload', ['html'], function() { gulp.task('upload', ['html', 'appcache'], function() {
var url = 'http://192.168.0.40/edit'; var url = 'http://192.168.0.40/edit';
var options = { var options = {
url: url, url: url,
@@ -49,7 +56,8 @@ gulp.task('upload', ['html'], function() {
}); });
var form = r.form(); var form = r.form();
form.append('data', fs.createReadStream(__dirname + "/" + build_dir + '/index.htm'), {filename: '/index.htm', contentType: "application/octet-stream"}); form.append('data', fs.createReadStream(__dirname + "/" + build_dir + '/index.htm'), {filename: '/index.htm', contentType: "application/octet-stream"});
form.append('data', fs.createReadStream(__dirname + "/" + build_dir + '/offline.appcache'), {filename: '/offline.appcache', contentType: "application/octet-stream"});
}); });
gulp.task('default', ['html']); gulp.task('default', ['html', 'appcache']);
gulp.task('serve', ['watch', 'connect']); gulp.task('serve', ['watch', 'connect']);
+4 -4
View File
@@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html manifest="offline.appcache">
<head> <head>
<!--Import Google Icon Font--> <!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css--> <!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
@@ -144,8 +144,8 @@
</style> </style>
<!--Import jQuery before materialize.js--> <!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">@@include('js/script.js')</script> <script type="text/javascript">@@include('js/script.js')</script>
</body> </body>
</html> </html>
+13
View File
@@ -0,0 +1,13 @@
CACHE MANIFEST
# Explicitly cached 'master entries'.
# index.html
http://code.jquery.com/jquery-2.1.1.min.js
http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js
http://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css
http://fonts.googleapis.com/icon?family=Material+Icons
# Resources that require the user to be online.
NETWORK:
*