Add the 'Periodic Sync' page

public/service-worker.js

@@ -47,5 +47,8 @@ self.addEventListener('fetch', event => {
 })
 
 self.addEventListener('periodicsync', event => {
-  if (event.tag === 'revalidate-assets') event.waitUntil(preCache())
+  if (event.tag === 'revalidate-assets') {
+    event.waitUntil(preCache())
+    new BroadcastChannel('main').postMessage({ syncTime: new Date().toISOString() })
+  }
 })

src/App.jsx

@@ -10,8 +10,9 @@ const LoremIpsum = lazy(() => import(/* webpackChunkName: "lorem-ipsum" */ 'page
 const Pokemon = lazy(() => import(/* webpackChunkName: "pokemon" */ 'pages/Pokemon'))
 const PokemonInfo = lazy(() => import(/* webpackChunkName: "pokemon-info" */ 'pages/PokemonInfo'))
 const WebVitals = lazy(() => import(/* webpackChunkName: "core-web-vitals" */ 'pages/WebVitals'))
+const PeriodicSync = lazy(() => import(/* webpackChunkName: "periodic-sync" */ 'pages/PeriodicSync'))
 
-const pages = [Home, LoremIpsum, Pokemon, PokemonInfo, WebVitals]
+const pages = [Home, LoremIpsum, Pokemon, PokemonInfo, WebVitals, PeriodicSync]
 const routes = pagesManifest.map(({ path }, ind) => {
   const Element = pages[ind]
 

src/index.jsx

@@ -18,3 +18,5 @@ createRoot(document.getElementById('root')).render(
     </Suspense>
   </BrowserRouter>
 )
+
+new BroadcastChannel('main').onmessage = ({ data }) => localStorage.setItem('syncTime', data.syncTime)

src/pages-manifest.json

@@ -45,5 +45,11 @@
     "path": "/web-vitals",
     "title": "Web Vitals",
     "description": "This page specifies the values of core web vitals."
+  },
+  {
+    "chunk": "periodic-sync",
+    "path": "/periodic-sync",
+    "title": "Periodic Sync",
+    "description": "This page specifies the time of the last periodic background sync."
   }
 ]

src/pages/PeriodicSync.jsx

@@ -0,0 +1,48 @@
+import { Meta } from 'frontend-essentials'
+import { css, cx } from '@emotion/css'
+
+import pagesManifest from 'pages-manifest.json'
+import Title from 'components/common/Title'
+import Info from 'components/common/Info'
+
+const { title, description } = pagesManifest.find(({ chunk }) => chunk === 'periodic-sync')
+
+const WebVitals = () => {
+  const { syncTime } = localStorage
+
+  return (
+    <div>
+      <Meta title={`${title} | Client-side Rendering`} description={description} />
+
+      <Title>{title}</Title>
+
+      <Info className={style.info}>{description}</Info>
+
+      {window.matchMedia('(display-mode: standalone)').matches ? (
+        <span className={style.syncTime}>
+          Last sync time:{' '}
+          {syncTime
+            ? `${new Date(syncTime).toLocaleDateString('en-GB')} ${new Date(syncTime).toLocaleTimeString()}`
+            : 'Never'}
+        </span>
+      ) : (
+        <span className={cx(style.syncTime, style.alert)}>App not installed.</span>
+      )}
+    </div>
+  )
+}
+
+const style = {
+  info: css`
+    margin-top: 20px;
+  `,
+  syncTime: css`
+    display: block;
+    margin-top: 20px;
+  `,
+  alert: css`
+    color: red;
+  `
+}
+
+export default WebVitals