quran / quran.com-frontend

quran.com frontend
https://quran.com
MIT License
990 stars 361 forks source link

web progressive app, service workers , why not? #608

Closed ATouhou closed 3 years ago

ATouhou commented 7 years ago

Assalamu aleykoum. Have you considered making a web progressive app with service workers? Since it's revolving around an API, it seems like a no-brainer to initiate that, as soon as there is ressources for it and sync it with the web frontend? And service workers and storing page images after first loading them unless hash is differentiating seems like the way to go? What do you guys think?

naveed-ahmad commented 7 years ago

@ATouhou +1 for PR :)

mmahalwy commented 7 years ago

+1

mmahalwy commented 7 years ago

I think it'd be great to store surahs since that's the homepage. Let's wait till v3 api

ATouhou commented 7 years ago

The app itself would not have to be updated so often, if the statics already comes shipped, but checks on server if, the server has a newer version or not. Also we would have an app, that have all the ressources collected at one place

mahmoudfelfel commented 7 years ago

Any updates here, is there anyone working on this? I can start working on it, it is straight forward with this webpack plugin https://github.com/goldhand/sw-precache-webpack-plugin By default, it uses a cache-first strategy where it will cache all the assets so the second load will be almost instant, and whenever we have a new update it will download the new assets in the background and use them for the next visit of the website. We can start with caching the assets for a better load time, then later start caching even the actual data with a network-first caching, so it will try to hit the network first but if the user is offline, it will fallback to the cached data.

ATouhou commented 7 years ago

Serviceworker: It should just use the cacheFirst, then meanwhile get the real feed from the API. If the data is not the same (maybe version number or checksum) then there could be a little prompt saying "Site has updated, do you want to reload? " then reload the page (with js) dynamically or just reload the page dynamically and seamlessly without the prompt PWA: Add the HTML for PWA, then we have an offline-first version of the site available as an "app"

mahmoudfelfel commented 7 years ago

@ATouhou the sw-precache webpack plugin handles the versioning of the sw file. And let's make it on steps as you're saying, first cache the assets to make the second visit quicker, then store the data itself from the API to have a full offline version. Will start working on it, and open a PR soon Insha'a Allah.

mmahalwy commented 7 years ago

@mahmoudfelfel please take it! Would love your help and I don't have much knowledge in this.

agungsb commented 7 years ago

I see that the service worker has been registered to the application, but the progressive web application feature is not working properly. Is this issue still opened? If yes, I would love to help by opening a PR soon. In syaa' Allah.. 😄