viliusle#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);