From 36760495a9200bcfe62a83549c83f19e36833ebd Mon Sep 17 00:00:00 2001 From: Offroaders123 <65947371+Offroaders123@users.noreply.github.com> Date: Wed, 26 Jan 2022 12:03:05 -0800 Subject: [PATCH] PWA Support for Piskel! Hey there! I really love using Piskel, and I thought the user experience could be even stronger if Piskel was also installable as a PWA directly from the browser. These additions also include support for offline use, using a Service Worker. This is a key part of what makes PWAs so cool. You can also install this on desktop, thanks to modern browser releases, so Piskel will also be able to open in it's own app window just like a native app can! Testing this out on Localhost seemed to work great for both `grunt play` and `grunt serve`, however I'm not sure what else is part of your build process for pushing to the main site. I imagine if it works locally with Grunt, than it shouldn't have an issue with the main site. About two versions away from now, with version 99, Chromium browsers will be adding support for the Window Controls Overlay display mode, for PWAs, and this allows the web app to take up even more space of the window at once. You can also enable which areas should or shouldn't be draggable for the title bar. I also added support for that feature with these additions, so that will also look very futuristic! Feel free to learn more about the upcoming API on this article by the Google team at web.dev: https://web.dev/window-controls-overlay/ Thanks for working on such a great app over the years! I'm happy I gotten to the point in programming where I can finally be able to contribute to it :) --- Gruntfile.js | 4 ++++ src/img/app-192.png | Bin 0 -> 341 bytes src/img/app-512.png | Bin 0 -> 943 bytes src/index.html | 1 + src/manifest.webmanifest | 23 +++++++++++++++++++++++ src/piskel-boot.js | 3 +++ src/service-worker.js | 18 ++++++++++++++++++ src/templates/debug-header.html | 10 +++++++++- 8 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/img/app-192.png create mode 100644 src/img/app-512.png create mode 100644 src/manifest.webmanifest create mode 100644 src/service-worker.js diff --git a/Gruntfile.js b/Gruntfile.js index ef614e330..384ab0182 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -217,6 +217,8 @@ module.exports = function(grunt) { // dest/js/piskel-packaged-min.js should have been created by the uglify task {src: ['dest/tmp/js/piskel-packaged-min.js'], dest: 'dest/prod/js/piskel-packaged-min' + version + '.js'}, {src: ['dest/tmp/index.html'], dest: 'dest/prod/index.html'}, + {src: ['src/manifest.webmanifest'], dest: 'dest/prod/manifest.webmanifest'}, + {src: ['src/service-worker.js'], dest: 'dest/prod/service-worker.js'}, {src: ['src/logo.png'], dest: 'dest/prod/logo.png'}, {src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/prod/js/lib/gif/gif.ie.worker.js'}, {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/prod/', filter: 'isFile'}, @@ -229,6 +231,8 @@ module.exports = function(grunt) { {src: ['dest/tmp/index.html'], dest: 'dest/dev/index.html'}, {src: ['src/piskel-script-list.js'], dest: 'dest/dev/piskel-script-list.js'}, {src: ['src/piskel-style-list.js'], dest: 'dest/dev/piskel-style-list.js'}, + {src: ['src/manifest.webmanifest'], dest: 'dest/dev/manifest.webmanifest'}, + {src: ['src/service-worker.js'], dest: 'dest/dev/service-worker.js'}, {expand: true, src: ['js/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'}, {expand: true, src: ['css/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'}, {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/dev/', filter: 'isFile'}, diff --git a/src/img/app-192.png b/src/img/app-192.png new file mode 100644 index 0000000000000000000000000000000000000000..705260636e3b699488edf51bf3f907afcbae9524 GIT binary patch literal 341 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UE7>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8prB%aPlzj!{{R2KOx=IcghTwUT`Uh+m{&71H8FkFWZ193&?C-ZS+N{s z0(VJ}Uoc216x5d0UIhwo^K@|xshIQj&PGlqM}fABTba+FxFNR2;f7ewK@j5cT^p3j zJXzM_LgVenwJ-TUTg?bE3r@Nnbd25Td_5BbLwrK{i)+V{1ERCHU%u7w?`M2N6eG}F z1Q6qX!V2VlZY&On)_2U^%Z4h=aE$d6(3pmw2Xt4g{k~wET{A)}h$Y7D^Shq8KQq@M jih!S6e9z$N>gTe~DWM4f=2dMU literal 0 HcmV?d00001 diff --git a/src/img/app-512.png b/src/img/app-512.png new file mode 100644 index 0000000000000000000000000000000000000000..fffa64b82f4eee49d65bc7be3d22d09924cc0972 GIT binary patch literal 943 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7+9Er6kFKIlR%2GILO_J@#aaLdLW0hz$3Dl zfq`2Xgc%uT&5-~KDhBw3xB}__|NqO>{TEF*#P8b0@_>bTH8WEa(^pM~{R#{{;tZA* z%Rwe^mjw9*gOox+ZCUMA1_ovUPZ!6KiaBpD7zVO9inw0f*ubijz{nkOfJtn_2C*xkX*|%`J}uZI^)D&cKkvAJD&oIe?#dT=4CORmR@0W;uJm z+i`%+U|{%Qf8fdIaCQr4D1Tt7bvzrQ8D24#l8vvm_b0yIdmf0_Cl0Jv&}=_o% +
navigator.serviceWorker.register("service-worker.js")); + /** * See @Gruntfile.js => after build, @@version is replaced by the build version */ diff --git a/src/service-worker.js b/src/service-worker.js new file mode 100644 index 000000000..60dbc6093 --- /dev/null +++ b/src/service-worker.js @@ -0,0 +1,18 @@ +self.Piskel = { + version: 0.152, + cache: true +} +self.addEventListener("activate",event => { + event.waitUntil(caches.keys().then(versions => Promise.all(versions.map(cache => { + if (cache !== Piskel.version) return caches.delete(cache); + })))); + event.waitUntil(clients.claim()); +}); +self.addEventListener("fetch",event => { + event.respondWith(caches.match(event.request).then(response => { + return response || fetch(event.request).then(async response => { + if (Piskel.cache) caches.open(Piskel.version).then(cache => cache.put(event.request,response)); + return response.clone(); + }); + })); +}); \ No newline at end of file diff --git a/src/templates/debug-header.html b/src/templates/debug-header.html index c59f4684b..0f203386f 100644 --- a/src/templates/debug-header.html +++ b/src/templates/debug-header.html @@ -5,13 +5,21 @@ .fake-piskelapp-header { position: relative; + left: env(titlebar-area-x); + top: env(titlebar-area-y); text-align: center; + max-width: env(titlebar-area-width); height: 40px; + max-height: env(titlebar-area-height); line-height: 40px; font-size: 24px; - background: black; + background: #2d2d2d; color: gold; z-index: 100; + -webkit-app-region: drag; + } + .fake-piskelapp-header > * { + -webkit-app-region: no-drag; } .piskel-name.piskel-name-saving {