search

1j01 / jspaint

🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras
https://jspaint.app/about
MIT License
7.17k stars 560 forks source link

Offline support with a Service Worker #109

Open 1j01 opened 6 years ago

1j01 commented 6 years ago

The key thing here is to make sure the service worker and the path to the service worker can be changed easily in the future. Refreshing should always get you the newest version if you're online.

maxjf1 commented 3 years ago

Analyzing the app in lighthouse, the following problems are found in the PWA session. By adding the service worker and fixing some icons (there are some great icons generators) it should work

image

1j01 commented 3 years ago

Icons are not a problem. Service workers are a huge foot-gun. I've never heard of pleasant experiences with them. It's easy to leave users on an old version of an app, breaking the refresh button and requiring users to close every tab of the app before they can get it to update, or even leaving them stranded forever, with a cached service worker that can't update itself. It requires a lot of thought, and frankly I don't know if anyone's solved the core issues with service workers.

maxjf1 commented 3 years ago

Icons are not a problem. Service workers are a huge foot-gun. I've never heard of pleasant experiences with them. It's easy to leave users on an old version of an app, breaking the refresh button and requiring users to close every tab of the app before they can get it to update, or even leaving them stranded forever, with a cached service worker that can't update itself. It requires a lot of thought, and frankly I don't know if anyone's solved the core issues with service workers.

I never write an SW from scratch, but used a lot the ones generated by React CRA for instance, and i never had those problems. I think it can be automatically done by webpack, with some configuration. You will only mess it up if you don't undestand it well to use.

About leaving users in a old version of the app and closing every tab of the app to update, normally SW warns you when it has updated, and its your choice how to handle the window update. You can Display a poupo that refreshes the window when clicked, or if your app allow it, just refresh the window (if no data will be lost).

About using a cached version forever, it only happens if you mess the versioning generated in the SW (normally it doesn't happen). What normally happens is turning the development mode very exausting when cache enabled (just add a tag for development to disable it)

justingolden21 commented 3 years ago

Hey just stepping in to say I love this project, +1 to the PWA idea

LiquidITGuy commented 2 years ago

@maxjf1 the default mode of create react app and vue cli have this problem.

@1j01 with custom service worker (handly written) we can use network first for static assets instead of stale while revalidate to prevent all the things you previously explain

maxjf1 commented 2 years ago

@maxjf1 the default mode of create react app and vue cli have this problem.

@1j01 with custom service worker (handly written) we can use network first for static assets instead of stale while revalidate to prevent all the things you previously explain

i've created many PWAs with CRA. the only problem i've found is icons size. For this, i use an icon generator that generate all icons and a manifest.json file. Them it's just a matter of putting the icons on the public file and updating the manifest.json, there is no need to rewrite service workes, CRA SW works perfectly