"Offline ready" message box after user login in Incognito mode (Chrome)

Nandhini-Subramaniya · 13 September 2024 13:27

I'm encountering an issue where, after a successful user login, a message box appears stating that the app is "offline ready." This only happens when using Chrome in Incognito mode. I would like to investigate where this message is coming from and how to resolve it. Any suggestions or guidance on this would be appreciated.

joepavitt · 14 September 2024 11:04

It comes from:

github.com

FlowFuse/node-red-dashboard/blob/cd436fbcd7b4b04c9142c6df68d88595baf2607a/ui/src/components/PWABadge.vue#L42


      
              return {
                  period: 60 * 60 * 1000, // check for updates every hour
                  swActivated: false,
                  offlineReady: false,
                  needRefresh: false,
                  updateServiceWorker: null
              }
          },
          computed: {
              title () {
                  if (this.offlineReady) { return 'App is offline ready' }
                  if (this.needRefresh) { return 'New content available, click on reload button to update.' }
                  return ''
              }
          },
          created () {
              const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
                  immediate: true,
                  onRegisteredSW: (swUrl, r) => {
                      if (this.period <= 0) return
                      if (r?.active?.state === 'activated') {

Which in turn is imported to our App here:

github.com

FlowFuse/node-red-dashboard/blob/cd436fbcd7b4b04c9142c6df68d88595baf2607a/ui/src/App.vue#L16


      
                  </div>
                  <router-view v-else-if="!status" />
                  <div v-else class="nrdb-placeholder-container">
                      <div class="nrdb-placeholder">
                          <img src="./assets/logo.png">
                          <h1>Node-RED Dashboard 2.0</h1>
                          <!-- eslint-disable-next-line vue/no-v-html -->
                          <p :class="'status-' + status.type" v-html="status.msg" />
                      </div>
                  </div>
                  <PWABadge />
              </v-app>
          </template>
          
          <script>
          import { mapState } from 'vuex'
          import { markRaw } from 'vue' // eslint-disable-line import/order
          
          import PWABadge from './components/PWABadge.vue'
          import DashboardLoading from './components/loading.vue'
          import DebugView from './debug/Debug.vue' // import the Debug View for a Dashboard

It's all driven by our "Progressive Web App" Service Worker, but I find the badge quite a distraction. The "need to refresh" can be useful, but the offline ready piece, less so, and I'm open to removing it.

Topic		Replies	Views
What is "Offline Ready" in DB-2 dashboard Dashboard dashboard-2	7	149	14 August 2025
Dashboard Sidebar Not Working in Chrome Dashboard node-red-dashboard	6	205	8 October 2023
Dashboard 2.0 PWA: Service Worker prevents authentication redirect when session expires Dashboard dashboard-2	26	295	20 April 2026
Node red dashboard not loading after a couple of days Dashboard dashboard-2	10	197	9 May 2025
Node red UI work only in incognito mode General docker	5	226	6 September 2023

"Offline ready" message box after user login in Incognito mode (Chrome)

Related topics