Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Offline behaviour discussion #2750

Open
jchapelle opened this issue Sep 20, 2019 · 36 comments
Open

Offline behaviour discussion #2750

jchapelle opened this issue Sep 20, 2019 · 36 comments

Comments

@jchapelle
Copy link

jchapelle commented Sep 20, 2019 •
edited

Describe the solution you'd like
Guys, it seems the offline configuration of the boilerplate is not working as expected :

  1. Buggy app can be cached by service worker and served by your browser even if you deploy a new version (see this for more explanations)
  2. Version V of an app can be cached by service worker and served by your browser even if you deploy a new version V+1
  3. Lazy loading of module is not compatible with offline mode (if error are not handled properly or if all the scripts are not prefetched) - (see this for more explanations)

Could you please describe the behaviour you would like ? From that point, I can implement a new version of sw or contact the backers of OfflinePlugin to find the proper configuration (which I already began to do in this this, this and this.

Here is my personal feeling :

  1. I would like all script to be prefetched. This would allow the app to work properly in offline mode and usage of lazy load
  2. I would like an general error boundary to catch errors at the top level of the app. This is smoother than having a blank screen when we have rendering error (which occurs when a script is lazy loaded and we have no network connection).
  3. I would like the index.html file to not be cached by service worker. This would allow to load the last version of a deployed app, even if a previous has been cached by sw and sw are not deactivated
  4. Finally, I would like a mechanism to detect new deployment and reload the app as soon as a ew vresion has been deployed. This is a bit out of scope but I think this mechanism is very important with spa and CI/CD way of working
This was referenced Sep 20, 2019
Closed
Closed
@jchapelle
Copy link
Author

jchapelle commented Sep 20, 2019 via email

@gretzky
Copy link
Member

gretzky commented Sep 20, 2019

Just wanted to say that I'm definitely open to having this discussion here (how to improve caching/code splitting/offline for rbp) but I also want to throw it out there that any offline-plugin specific issues/questions should be opened over on that repo, and maybe linked here? Mostly wanted to say this bc we can discuss all we want, but if the main problems @jchapelle and others are finding are bc of offline-plugin, there's not much we can do.

@jchapelle
Copy link
Author

jchapelle commented Sep 20, 2019 via email

@jeffyamada
Copy link

Getting the same issues - and it's a bit of a problem, so I'm in the process of turning it off for the project. I'll touch back again later today after we're done working through the issue myself. Even if we can't change anything in this repo, I agree with @jchapelle that we should probably know what the issues are, the preferred behavior, and possibly the preferred configuration that's set as the default on RBP.

TBF, I'm only getting caught up on these details because this is the first time It's caused any issues for us and we've launch numerous sites with RBP (So thanks for all the hard work everyone!)

@jchapelle
Copy link
Author

jchapelle commented Sep 22, 2019 via email

@julienben
Copy link
Member

I've disabled it as well because it created too many issues.

I think the simplest way to deal with all the complications around offline behavior would be for us to switch to workbox-webpack-plugin.

It's used by create-react-app (=> MANY users), supported by Google, supports several types of caching strategies and decent documentation.

Any thoughts on this idea? Would anyone like to give it a go?

Small addendum: I'm not sure of the details but I believe a good offline strategy also requires some server/header configuration so we should remember to update our deployment guides + sample configs (Apache/NGINX/other?) if necessary.

@jchapelle
Copy link
Author

jchapelle commented Sep 22, 2019 via email

@jeffyamada
Copy link

Yep, spent the last few days removing it. I was seeing some unexpected behavior after removing it though, so it's been a bit of a minefield so I too will be disabling it until I feel more confident we have the control we need and updated deployments will be visible to users.

@julienben
Copy link
Member

Unexpected behavior? I'm assuming the issue is some of your users had a service worker already installed? When you remove it, you need to also ensure that you unregister existing users' service worker.

https://create-react-app.dev/docs/making-a-progressive-web-app

@jeffyamada
Copy link

Yep, that's exactly what was happening. I dropped code directly into index.html to unregister them, but it seemed that index.html wasn't updating either so the only way those users could see the update was with a hard refresh. Some users were reporting a blank screen, which I found difficult to replicate or explain. It's been fun.

@julienben
Copy link
Member

😣

It's interesting to notice that CRA made PWA/offline support an opt-in feature because of the caveats.

@jeffyamada
Copy link

Yeah. That seems wise. I haven't had time to dig into this as deeply as I'd like, but oddly we've never had major issues with it in the past, nor really heard users complain that the site wasn't refreshing or updating etc. My hunch right now is that in the more recent versions or updates when we're deploying fresh versions of our RBP site it's not auto refreshing. Sorry if my understanding of all this sounds vague, I've spent more time tinkering and not enough pouring through release notes.

@arianitu
Copy link

Is there any more documentation on this? We've been deploying our app in our staging environment and noticed the browser never picks up any changes. Sorry if I'm de-railing a conversation where everyone already knows about OfflinePlugin, but I verified the reason why our site never uncached on deploys was because of this OfflinePlugin.

I went into "Service Workers" and hit "Update on reload" and sure enough the latest version of the web app loaded.

I'm now disabling and removing offline capabilities since our app will never work offline (nor do we want it to.) But... for someone coming to this project and just doing a normal deployment of their app, this OfflinePlugin totally breaks that?

Can someone help here, what's the right way to Deploy a react-boilerplate app and makes sure the cache gets cleared. I've seen people link to the OfflinePlugin (https://github.com/NekR/offline-plugin/blob/master/docs/updates.md).

But that's not really helpful.. do I need to add the above to do a deploy of our app?

@arianitu
Copy link

From the documentation, it appears that if you have no tabs of the app open, and then open a new tab, it should update? So to uncache:

  1. Close all tabs of your app
  2. Load your site

The above does not work for us. We have no tabs open at all and the only way to load a new version is in an incognito window. What are we doing wrong?

@jchapelle
Copy link
Author

jchapelle commented Sep 25, 2019 via email •
edited

@jhaankit
Copy link

I am in development phase and facing all the above mentioned issue with offline configuration.

As a workaround, i have excluded index.html from caching and then service worker is updating fine on new deployment. But the feature of offline is not working because of it.
Code to exclude: excludes: ['.htaccess', 'index.html'], in webpack.prod.babel.js

I am also experiencing the blank page issue sometimes, as mentioned by @jeffyamada.
It happens rarely on page-reload.

@jchapelle
Copy link
Author

jchapelle commented Sep 25, 2019 via email

@jhaankit
Copy link

For me it is working and app cache is updating on every new build.
Only thing is that, offline does not work as index.html (startup page) is not cached now. (i have excluded the "index.html").
All the old cache storage (as shown in screenshot) is getting cleaned up once the tab is closed.

Screenshot-sw

@lsanders
Copy link
Contributor

It took me a while, but I think I've finally got it properly invalidating AWS cloudfront with some pretty minor tweaks (mainly this guide and getting the deployment to set the proper cache-control on sw.js when it's not hosted at the root).

But I'm not even entirely sure that's the right approach. Would it make sense to handle updates in a saga and how would the offline-plugin support that. I'm thinking some simple banner "A new version is available, click here to reload".

Would love to hear other approaches!

@Can-Sahin
Copy link
Member

Can-Sahin commented Sep 28, 2019 •
edited

@julienben @jchapelle and others...

I really have NO TROUBLES with the Offline App feature. It's the feature i am currently using the most.

I publish a new version (i am not even updating package.json version) and website is updated as expected either when

  • When user reloads (cmd + r) not force reload.
  • Closes the tab and browses the url.

The only time it isnt gets updated is when user nagivates in the app which isn't a problem at all. So what are you guys trying to achieve ? Aren't these fine ?

My config:

OfflinePlugin with options

responseStrategy: 'network-first',

S3 / Cloudfront hosting cache management and invalidations
My custom deployment script
which really does all the work.

Are you trying these things ?

This was referenced Oct 8, 2019
Closed
Closed
@Mujaddadi
Copy link

We also disabled the offlinePlugin due to cache issues.

@t3db0t
Copy link

t3db0t commented Jan 6, 2020

So I finally got a chance to work on this and @Can-Sahin 's suggestions worked perfectly, I can reload the tab and the new version presents as desired!! It seems like react-boilerplate needs to update its implementation of offline-plugin to incorporate these relatively small corrections...

@Can-Sahin
Copy link
Member

I can also make the pull request. I was actually waiting for someone to try my settings to verify or to feedback. @julienben do you think a quick pull request I do for this until workbox plugin? So that v5 could provide better offline plugin experience.

@t3db0t
Copy link

t3db0t commented Jan 6, 2020

I think this would be a nontrivial inclusion into v5. Honestly I don't think we can claim "offline first" in the features the way it is currently delivered, since it simply doesn't do the thing that people are naturally expecting. @Can-Sahin , if you make a PR I'm happy to do another test of that!

@t3db0t
Copy link

t3db0t commented Jan 6, 2020

Also, @Can-Sahin , can offline-plugin be used to detect a new version while the user is using the app, without refreshing? In other words, to show a "New Version" banner that gives the user the option to reload.

@Can-Sahin
Copy link
Member

Can-Sahin commented Jan 6, 2020 •
edited

@t3db0t I dont know for now. Service worker needs to request sw.js and other files from server again for that while you are navigating in the application. So you have to trigger yourself. I haven't tried yet but update() functions are probably used for that. https://github.com/NekR/offline-plugin/blob/master/docs/runtime.md

Edit: It's mentioned here at the bottom

@tmfrnz
Copy link

tmfrnz commented Jan 8, 2020

@jeffyamada did you find a solution to force unregistering existing service workers?

Yep, that's exactly what was happening. I dropped code directly into index.html to unregister them, but it seemed that index.html wasn't updating either so the only way those users could see the update was with a hard refresh. Some users were reporting a blank screen, which I found difficult to replicate or explain. It's been fun.

We are also considering to removing the offline plugin. In addition to the minor problem with new versions of our app (only available on hard reload or after closing all tabs), we are specifically struggling with a domain name change. For new visitors the 301 redirect properly works but for returning visitors the service worker does not get or ignore it.

Also open to keep offline support and migrate the service worker to the new domain (as described here) and any other solutions/workarounds/ideas - thanks!

@jeffyamada
Copy link

@tmfrnz sorry for the late reply, only just noticed you hit me. Yep, we've turned it off on several projects so far. We've been discussing it more lately for yet another project and from what I understand the biggest thing we need is for it to NOT cache index.html, which would allow us to then have the fresh css/js loaded. Unfortunately we just haven't had the time to figure out how to configure it to avoid index.html (or even completely confirm that it's caching index.html?)

@tmfrnz
Copy link

tmfrnz commented Jan 29, 2020

Thank you @jeffyamada for getting back to me. What would be the best way (or any way) to disable and remove the offline plugin AFTER it already being deployed to and running in users' browsers? Thanks

@jeffyamada
Copy link

@tmfrnz that's what makes this issue so painful - there's no way we found to update it. It seems they time out after a couple weeks for people who have visited previously though. Essentially index.html caching means that everything else was cached as well:(

@jeffyamada
Copy link

Oh, I should probably add that you can loop through and unregister the service workers - like this: https://stackoverflow.com/questions/33704791/how-do-i-uninstall-a-service-worker

@tmfrnz
Copy link

tmfrnz commented Jan 29, 2020

Thanks! I'll have a go at unregistering those SWs and disable the offline support. Planning a bigger update and have experienced some blank screens on our dev site (due to inconsistent resources being cached by the SW) so fingers crossed we can make it work. Only wish offline support was disabled by default and a warning included about enabling it... Thanks again - much appreciated

@tmfrnz tmfrnz mentioned this issue Feb 19, 2020
Closed
@Lalitj03
Copy link

Lalitj03 commented Mar 9, 2020

@julienben @jchapelle and others...

I really have NO TROUBLES with the Offline App feature. It's the feature i am currently using the most.

I publish a new version (i am not even updating package.json version) and website is updated as expected either when

  • When user reloads (cmd + r) not force reload.
  • Closes the tab and browses the url.

The only time it isnt gets updated is when user nagivates in the app which isn't a problem at all. So what are you guys trying to achieve ? Aren't these fine ?

My config:

OfflinePlugin with options

events: true,
responseStrategy: 'network-first',

Install script

OfflinePluginRuntime.install({
  onUpdateReady: () => {
    // Tells to new SW to take control immediately
    OfflinePluginRuntime.applyUpdate();
  },
});

S3 / Cloudfront hosting cache management and invalidations
My custom deployment script
which really does all the work.

Are you trying these things ?

This seems to have worked for me.

@jchapelle
Copy link
Author

Great ! I don't have time to test these right know but I'm pretty sure you all found the solution ;-)

@Can-Sahin Can-Sahin mentioned this issue Mar 10, 2020
Closed
@bbar
Copy link

bbar commented May 15, 2020

Here's my config for using the default responseStrategy of 'cache-first'.

#2873 (comment)

@Enase
Copy link

Enase commented Dec 3, 2020

Looks like offline-plugin is not supported anymore NekR/offline-plugin#491

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests