#228 - Web app manifests (for offline usage)

index.html

@@ -8,6 +8,7 @@
 	<meta name="keywords" content="photo, image, picture, transparent, layers, free, edit, html5, canvas, javascript, online, photoshop, gimp, effects, sharpen, blur, magic eraser tool, clone tool, rotate, resize, photoshop online, online tools, tilt shift, sprites, keypoints" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
 	<link rel="icon" sizes="192x192" href="images/favicon.png">
+	<link rel="manifest" href="manifest.json">
 	<!-- Google -->
 	<meta itemprop="name" content="miniPaint" />
 	<meta itemprop="description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />

manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "miniPaint",
+	"short_name": "miniPaint",
+	"start_url": "/",
+	"display": "standalone",
+	"orientation": "landscape",
+	"background_color": "#666d6f",
+	"description": "miniPaint is free online image editor using HTML5.",
+	"icons": [
+		{
+		"src": "images/manifest/48x48.png",
+		"sizes": "48x48",
+		"type": "image/png"
+		},
+		{
+			"src": "images/manifest/72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "images/manifest/96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "images/manifest/144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "images/manifest/168x168.png",
+			"sizes": "168x168",
+			"type": "image/png"
+		},
+		{
+			"src": "images/manifest/192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		}
+	]
+}

service-worker.js

@@ -0,0 +1,64 @@
+// use a cacheName for cache versioning
+var cacheName = 'v1:static';
+
+// during the install phase you usually want to cache static assets
+self.addEventListener('install', function(e) {
+	// once the SW is installed, go ahead and fetch the resources to make this work offline
+	e.waitUntil(
+		caches.open(cacheName).then(function(cache) {
+			return cache.addAll([
+				'./',
+				'./dist/bundle.js',
+				'./images/favicon.png',
+				'./images/logo.svg',
+				'./images/logo-colors.png',
+				'./images/icons/animation.svg',
+				'./images/icons/blur.svg',
+				'./images/icons/bold.svg',
+				'./images/icons/brush.svg',
+				'./images/icons/bulge_pinch.svg',
+				'./images/icons/clone.svg',
+				'./images/icons/crop.svg',
+				'./images/icons/delete.svg',
+				'./images/icons/desaturate.svg',
+				'./images/icons/erase.svg',
+				'./images/icons/external.png',
+				'./images/icons/fill.svg',
+				'./images/icons/gradient.png',
+				'./images/icons/grid.png',
+				'./images/icons/italic.svg',
+				'./images/icons/magic_erase.svg',
+				'./images/icons/media.svg',
+				'./images/icons/menu.svg',
+				'./images/icons/pencil.svg',
+				'./images/icons/pick_color.svg',
+				'./images/icons/refresh.svg',
+				'./images/icons/select.svg',
+				'./images/icons/selection.svg',
+				'./images/icons/shape.svg',
+				'./images/icons/sharpen.svg',
+				'./images/icons/strikethrough.svg',
+				'./images/icons/text.svg',
+				'./images/icons/underline.svg',
+				'./images/icons/view.svg'
+			]).then(function() {
+				self.skipWaiting();
+			});
+		})
+	);
+});
+
+// when the browser fetches a url
+self.addEventListener('fetch', function(event) {
+	// either respond with the cached object or go ahead and fetch the actual url
+	event.respondWith(
+		caches.match(event.request).then(function(response) {
+			if (response) {
+				// retrieve from cache
+				return response;
+			}
+			// fetch as normal
+			return fetch(event.request);
+		})
+	);
+});

src/css/layout.css

@@ -278,6 +278,9 @@ body .sp-preview{
 	filter: var(--menu-icons-filter-active);
 }
 
+/*
+IMPORTANT: any new icon should also must be added on /service-worker.js + its version should be updated !!!
+ */
 .sidebar_left .select:after{ background-image: url('images/icons/select.svg'); }
 .sidebar_left .selection:after{ background-image: url('images/icons/selection.svg'); }
 .sidebar_left .brush:after{ background-image: url('images/icons/brush.svg'); }
@@ -288,15 +291,8 @@ body .sp-preview{
 .sidebar_left .fill:after{ background-image: url('images/icons/fill.svg'); }
 .sidebar_left .media:after{ background-image: url('images/icons/media.svg'); }
 .sidebar_left .shape:after{ background-image: url('images/icons/shape.svg'); }
-.sidebar_left .text:after{
-	background-image: url('images/icons/text.svg');
-	background-size: 16px auto;
-}
-.sidebar_left .gradient:after{
-	background-image: url('images/icons/gradient.png');
-	background-size: 18px 12px;
-	filter: none;
-}
+.sidebar_left .text:after{ background-image: url('images/icons/text.svg'); background-size: 16px auto; }
+.sidebar_left .gradient:after{ background-image: url('images/icons/gradient.png'); background-size: 18px 12px; filter: none; }
 .sidebar_left .clone:after{ background-image: url('images/icons/clone.svg'); }
 .sidebar_left .crop:after{ background-image: url('images/icons/crop.svg'); }
 .sidebar_left .blur:after{ background-image: url('images/icons/blur.svg'); }

src/js/core/base-gui.js

@@ -65,6 +65,13 @@ class Base_gui_class {
 		this.modules = {};
 	}
 
+	init() {
+		this.load_modules();
+		this.load_default_values();
+		this.render_main_gui();
+		this.init_service_worker();
+	}
+
 	load_modules() {
 		var _this = this;
 		var modules_context = require.context("./../modules/", true, /\.js$/);
@@ -140,6 +147,16 @@ class Base_gui_class {
 		this.load_translations();
 	}
 
+	init_service_worker() {
+		if ('serviceWorker' in navigator) {
+			navigator.serviceWorker.register('./service-worker.js').then(function(reg) {
+				console.log('Successfully registered service worker', reg);
+			}).catch(function(err) {
+				console.warn('Error whilst registering service worker', err);
+			});
+		}
+	}
+
 	set_events() {
 		var _this = this;
 

src/js/main.js

@@ -50,9 +50,6 @@ window.addEventListener('load', function (e) {
 	window.FileSave = File_save;
 
 	// Render all
-	GUI.load_modules();
-	GUI.load_default_values();
-	GUI.render_main_gui();
-
+	GUI.init();
 	Layers.init();
 }, false);