publiclab / image-sequencer

A pure JavaScript sequential image processing system, inspired by storyboards
https://sequencer.publiclab.org
GNU General Public License v3.0
110 stars 210 forks source link

Move towards a progressive web app on the demo #326

Open tech4GT opened 6 years ago

tech4GT commented 6 years ago

We should add progressive elements to the demo, going with the recent trend. I have listed some basic elements below please feel free to suggest more 😄

gitmate[bot] commented 6 years ago

GitMate.io thinks the contributors most likely able to help are @jywarren, and @ccpandhare.

A possibly related issue is https://github.com/publiclab/image-sequencer/issues/126 (Move configuration options in demo from "add step" to each step's info area).

gitmate[bot] commented 6 years ago

GitMate.io thinks the contributors most likely able to help are @jywarren, and @ccpandhare.

A possibly related issue is https://github.com/publiclab/image-sequencer/issues/126 (Move configuration options in demo from "add step" to each step's info area).

jywarren commented 6 years ago

love this!

On Sun, Sep 2, 2018 at 9:57 AM gitmate[bot] notifications@github.com wrote:

GitMate.io https://gitmate.io thinks the contributors most likely able to help are @jywarren https://github.com/jywarren, and @ccpandhare https://github.com/ccpandhare.

A possibly related issue is #126 https://github.com/publiclab/image-sequencer/issues/126 (Move configuration options in demo from "add step" to each step's info area).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/326#issuecomment-417932678, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ4xUDZErn7Qwhzy5NxvFYs6DRWrYks5uW-OjgaJpZM4WWnn2 .

Mridul97 commented 6 years ago

I want to work on this issue. Can I work on this issue ?

tech4GT commented 6 years ago

Yes @Mridul97 this would be great, we need to finalize on some ideas though, maybe you can start with adding a manifest and caching static assets with a network first strategy and then we can where we can go from there. Thanks!

Mridul97 commented 6 years ago

Sure! I will start with adding a manifest and caching static assets with a network first strategy.

Mridul97 commented 6 years ago

What will be the theme color for manifest.json file ?

tech4GT commented 6 years ago

Isn’t the dominant colour of the page automatically picked? I’m sorry if I don’t make sense here, I’m a little out of touch from this.

tech4GT commented 6 years ago

Oh i got it! You’re right can you use a color picker to get the exact colour of the save sequence button. Thanks!

Mridul97 commented 6 years ago

Okay! will do that.

Mridul97 commented 6 years ago

I have made a manifest.json file. Please see it, is it fine ? screenshot 35 screenshot 36 screenshot 37

tech4GT commented 6 years ago

This looks very promising @Mridul97 Way to go!! Thanks!

Mridul97 commented 6 years ago

Thanks! @tech4GT :-)

Mridul97 commented 6 years ago

Hey, could you please tell me to cache assets for offline use, first do I have to set up service worker or it has to be done without using service worker?

tech4GT commented 6 years ago

We would need a service worker definitely or else the data will be flushed if the user clears browser cache. So Just cache all the assets like html, css, js, images an so on. Basically the idea here is to cache everything that is currently being served by the server, so that in case of network outage these files can be used. Please also try to flush these cache files if we get fresh data from the network. You can read more about this https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

Mridul97 commented 6 years ago

Okay Thanks!

Mridul97 commented 6 years ago

Hey, I have cache all the assets on install event of the service worker and as you said to use network first approach, the service worker will first send request to network and only if it fails then service worker will take response from the cache. Please see it. Is it fine ? screenshot 40 screenshot 41 screenshot 42 screenshot 43

tech4GT commented 6 years ago

This looks awesome @Mridul97 just one more thing, don't you think we should update the cache version if the files are changed? Just a thought.

Mridul97 commented 6 years ago

Yes, we should update the cache version if the files are changed. I will do it. Thanks!

Mridul97 commented 6 years ago

Hey, I have made changes to update the cache. When any of the files are changed, we also change the static cache name from something like 'image-sequencer-static-v1' to 'image-sequencer-static-v2'. This creates a new version of the service worker and we delete the old caches on the activation of this new version of service worker. Please take a look. ss_2 ss_3

tech4GT commented 6 years ago

This looks pretty good! One doubt though, the cache will update to V3 and so on right?

Mridul97 commented 6 years ago

Yes, we will change the staticCacheName to 'image-sequencer-static-v3' and it will save this cache and delete all the other old caches. I mean we have to manually change the value of staticCacheName const.

tech4GT commented 6 years ago

This is great work!! Please open a pull request so that I can look at the diff. Thanks Mridul! Way to go!!

Mridul97 commented 6 years ago

I will open a pull request. Thanks!

tech4GT commented 6 years ago

Actually we have to be careful with this stuff!! We don't want someone to be stuck with an old version of cache, especially someone with no technical knowledge. So please allow edits from maintainers. Thanks!

Mridul97 commented 6 years ago

Yes, I will do that.

Mridul97 commented 6 years ago

I have made a pull request #331. Please take a look. Thanks!