Image-sequencer: Move towards a progressive web app on the demo

[tech4GT]

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 😄

• [x] manifest.json
• [x] cache static assets for offline use
• [ ] Improve responsiveness of the design
• [ ] Move saving sequences to indexedDB API (possibly making it optional for user to store it using any api, currently this is done using localStorage API)

[gitmate[bot]]

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]]

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]

love this!

On Sun, Sep 2, 2018 at 9:57 AM gitmate[bot] [e-mail]
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]

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

[tech4GT]

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]

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

[Mridul97]

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

[tech4GT]

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]

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]

Okay! will do that.

[Mridul97]

I have made a manifest.json file. Please see it, is it fine ?

[tech4GT]

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

[Mridul97]

Thanks! @tech4GT :-)

[Mridul97]

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]

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]

Okay Thanks!

[Mridul97]

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 ?

[tech4GT]

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]

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

[Mridul97]

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.

[tech4GT]

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

[Mridul97]

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]

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

[Mridul97]

I will open a pull request. Thanks!

[tech4GT]

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]

Yes, I will do that.

[Mridul97]

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