Clear parts of local storage after deployment

[nhp]

What is the motivation for adding / enhancing this feature?

There should be a possibility for targeted local storage flushing. Like after a deployment or rebuild this could be needed to have the current information available at the client side. Right now it is up to the user to do so and that is not really helpful for getting updated stuff out to the browser. If the user completely throws their local storage we need to take care of not accidentally clearing the cart information.

What are the acceptance criteria

• remove targeted stuff from local storage
• remove everything beside session information

Can you complete this feature request by yourself?

• [ ] YES
• [x] UNSURE
• [ ] NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [x] This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [ ] (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Additional information

According to w3c this is intended behavior as the user or the application is responsible for the local storage only. There is no TTL intended, but there are different options we found: https://stackoverflow.com/questions/2326943/when-do-items-in-html5-local-storage-expire but nothing seems "ready to use"

[dennisotugo]

+1

[grimasod]

I'm going to look into this. After a release, we often get enquiries from users who can't add items to the cart and experience other issues. Sometimes it's fixed by simply reloading the page. Other times we have to instruct them to clear their browser cache, which is not ideal.

As a first step, I'm thinking of showing an error alert with a button to reload the page. The message would be something like:

A new version of this website is available. Please click the button below to reload and update to the latest version.

[dennisotugo]

@pkarw How do you think this should be handled?

[grimasod]

This is a complicated issue. Even for just updating the service worker. See: https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68

There's a possible solution for that, but it requires the completion of vuestorefront/vue-storefront#1589

[filrak]

Imho we can easily use Web Push or even API endpoint to inform users about new version and react accordingly. For sure it's a feature that we need in 1.11

[pkarw]

Related to storageQuota cleaning mechanism we already have in here: https://github.com/DivanteLtd/vue-storefront/blob/3d1d81c0e1aebfcdeda97ea7fec58b6d3ab8ef29/core/store/lib/storage.ts#L63

[pkarw]

Reopening, details: https://forum.vuestorefront.io/t/issue-clear-local-storage-after-deployment/589?u=pkarw

[pkarw]

We probably need to add a feature - kind of kill switch which is clearing out the localStorage; not sure how it should work; maybe - setting a localStorage hash with the current build number or hash - then in VS startup (app.ts) let’s check if it changed - if so: let’s programmatically clear the storage

[haelbichalex]

vuestorefront/vue-storefront#3650