vuex clear persistent state only once in a pwa - vue.js

i have a setup where i was using the vuex-persistedstate module to save user settings inside my localStorage.
Now i want to wipe the localStorage only once for the next release. it should be a one time thing to be sure that all users have a clean localStorage for the next release.
instead of telling all users to clear there caches manually i am searching for a way to do it automatically.
my own idea was to use my PWA "Update Available" feature, which triggers the PWA serviceWorker to cache the application and then should do a localStorage.clear() once but that's not working somehow.
the localStorage will not be cleared with that try, all the old data still exists on users machines.

You could add your app version in the localStorage.
Then, when they launch your app, you can compare the current version value (in the JS) with the version value they have in the storage. If it's different, ten you call localStorage.clear() automatically

One alternative I would do is to call an api for version compare.
If the client's version is < than the server stated version.
Then call localStorage.clear().

Related

Updating content in a static Nuxt website

I've built multiple sites with Nuxt SSR, but never touched the static part.
As far as I know, upon build-time, Nuxt automatically executes all API calls and caches them.
If I want to make a blog with a static Nuxt site, how would I update the content? Is it only possible when I rebuild the app?
Seems unnecessary to rebuild everything every time I add a new blog post. With SSR I just reload the page.
Also wanted to note that I have a Strapi.js backend running on a VPS and I usually make changes weekly. Nuxt's docs state that I need to push my changes to the main repo branch but there's no changes on the frontend.
Does this also mean that the headless cms should be local only?
The whole point of having a static build is to have all the generated files with no additional server Node.js server needed. It reduces heavily the costs, removes a point of failure, discard any notion of server charge (amount of users at the same time on your app) and probably some other advantages yeah.
Downside, you indeed need to actually yarn generate the whole app again if it's something that was added/changed in the codebase. Usually it's pretty fast and there are also incremental builds if I do remember properly (you will not regenerate all the 99 old blog posts but only the 100th, the new one).
Headless CMS like Strapi usually work with a webhook: you add a new CMS article or alike, Strapi will notify your JAMstack platform to rebuild your app. Even if no front-end code was changed, you can force to build it with the new data coming from the headless CMS' API.

how to handle a user with old vue code in memory and new release out?

Anyone got a way they handle this..
1 you build and release the frontend to prod
2 users visit the site and use the app
3 you build and release to prod a bug fix to page A, the built chunks that were affected from the new code now have a new file hash (from webpack)
4 the user is still on your site, so no need to refresh, but clicks a link to page A, but hadn't previously been to page A. Now the app throws an error as it tries to fetch a link that requires
a chunk that doesn't exist anymore..
I'm configuring the pwa setup so the app will know when a new update is available... But it feels like this scenario will not be completely fixed with a pwa manifest alone. Also new to the pwa stuff.
Another idea i was toying with was to make use of the apps socket connections and push a message to all apps to refresh.. but this feels overkill
Make sure you check the Service Worker registrations. It sounds to me like this might be the issue.

Automatically update Vue site / PWA with new release

I have a Vue app that is used both in the browser and as a PWA. I would like to ensure users receive the latest version whenever updates have been pushed to the server.
I am using Nginx, Django and vue-cli along with #vue/cli-plugin-pwa.
Currently when I npm run build and then push the new version to the server, users get the old version of the app (in browser as well as PWA on their phones). To get the new version they do a hard refresh in the browser or for the PWA they close the app and reopen it again.
Is there a way to ensure a version check is done every time the app is loaded so that the new version is retrieved?
In the end I found this excellent article which covers how to display a notification when an update is available. The user is then able to click the notification which updates the app.
https://dev.to/drbragg/handling-service-worker-updates-in-your-vue-pwa-1pip

Determine whether app has been previously installed

I'm about to implement some unlock-functionality In-App-Purchase in an app. The client would like the functionality to be available the first two weeks after installing the app, and then go away until the user pays up.
I need the app to determine whether it has been previously installed, deleted, and installed again. If I can't do that users can just reinstall the app and get two more weeks for free.
Any ideas?
It seems all data is deleted when the app itself is deleted, which kind of limits my options. There is a server backend to the app. Is my best option to log something there or is there another way?
You can make use of the keychain in iOS. It will not be removed even if you uninstall the app. But you have to make sure you use the same provisioning profile across different versions of your application.
And, have a look at this utility

How can I make a Mac App Store app check for updates?

Within my app, how can I make it check if there is an update available in the Mac App Store, and tell the user about this?
As an example, Sparrow does this.
Charcoal Design has an open source component that does that: iVersion.
But it requires you to add a file in your server for your application to read.
Whenever you update the version, just change the information in your server, and iVersion will show the user that a new version is available.
You could also scrape Apple's servers to read the version of your app, but there is chance that your app may be rejected for doing that.
Basically, Sparrow does not need to ask the App Store. It can just compare its bundle string to the newest version on their website.