search

jwplayer / ott-web-app

Reference implementation for JWP-powered apps
Apache License 2.0
69 stars 52 forks source link

Feat / reload site on update #475

Closed ChristiaanScheermeijer closed 3 months ago

ChristiaanScheermeijer commented 3 months ago

Description

This small configuration change will ensure users will always use the latest version of the web app. Before, you need to visit the site, close it or clear the cache to ensure the latest version is used.

This is because the PWA will wait until a suitable moment to activate the "waiting" next version of the deployment. On many occasions, publishers (and we) want to be able to deploy fixes immediately.

Read more about this here:

https://vite-pwa-org.netlify.app/guide/auto-update.html

CC: @langemike

github-actions[bot] commented 3 months ago

Visit the preview URL for this PR (updated for commit 97de0d5):

https://ottwebapp--pr475-feat-reload-site-wit-7m5ki8t4.web.app

(expires Thu, 25 Apr 2024 16:42:49 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: c198f8a3a199ba8747819f7f1e45cf602b777529

langemike commented 3 months ago

The SW caused a quite aggressive cache, which could only be circumvented by hard-refreshing. When a new version has been released we want our users to immediately see these changes. Therefore I think auto-reload is a good approach.

The auto-reload will only happen when users visit the website in a new window/tab and not during their visit in the active tab. I approve.

AntonLantukh commented 3 months ago

@langemike hm, are you sure the current active tab won't be refreshed if we call registerSW again? Do we also need to 'reregister' sw or can we just leave the body function empty, like onNeedRefresh: () => {}?

The disadvantage of using this behavior is that the user can lose data in any browser windows/tabs in which the application is open and is filling in a form.

Btw, pretty nice implementation with react hooks (custom prompt is used): https://vite-pwa-org.netlify.app/frameworks/react.html#prompt-for-update

langemike commented 3 months ago

hm, are you sure the current active tab won't be refreshed if we call registerSW again? Do we also need to 'reregister' sw or can we just leave the body function empty, like onNeedRefresh: () => {}?

I could not find an easy answer to that while reading the docs and source code. I'm not too familiar with ServiceWorkers and I reasonably assumed that in-memory JS code will not cause onNeedRefresh to be called within a active session. Of course we need to verify this.

ChristiaanScheermeijer commented 3 months ago

@AntonLantukh the SW is only refreshed when opening the page, we don't periodically poll for new versions in active sessions. This means that losing data is limited to the following scenario:

  1. Open a new tab and navigate to ott-web-app
  2. Click the sign-up button and fill in the form
  3. new version is released
  4. Open a second tab and navigate to ott-web-app
  5. The second tab sees the new SW version and reloads all pages
  6. The first tab is refreshed, and the form data is lost

So I think that:

  1. Users can ignore the reload page modal and still be using an outdated version (which may contain bugs)
  2. The sign-up form isn't massive, and we assume that people don't leave it stale
  3. When the sign-up form is emptied due to a refresh, the user can fill it in pretty quickly