Homework

[WFZ1]

https://task-management-27b61--pr1-homework-uwgpanvs.web.app/

[github-actions]

Visit the preview URL for this PR (updated for commit 973f4d3):

https://task-management-27b61--pr1-homework-49szfegd.web.app

_{(expires Sat, 24 Aug 2024 12:59:22 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 29827e39a627e7164342d391b4d03f179eb5a8f1}

[NikitaKatrenko]

Привіт! Такий от бажок знайшов в оффлайн режимі, це не критично загалом
https://github.com/WFZ1/task-management-pwa/assets/8337456/05dcf037-937a-4ad6-8f70-63ccf5a91f48

[NikitaKatrenko]

Код гарно структурований, відповідає практикам гарного коду, присутній error handling. По за вашим бажання, можна додати версіонування кешу, спробувати різні стратегії кешування та додати fallback сторінку для вашого PWA. Дякую за вашу роботу!

[NikitaKatrenko]

По бажанню, workbox можна більше сконфігурувати:

додати prechache для shell app

workbox: {
  globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2,woff}"],
  precacheManifest: [
    { url: '/offline.html', revision: null },
    { url: '/styles/offline.css', revision: null },
  ],
 }

Додати fallback page:

workbox: {
  globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2,woff}"],
  navigationPreload: true,
  navigateFallback: '/offline.html',
}

а також імплементувати декларативно різні типу кешу для запитів та асетів:

workbox: {
  globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2,woff}"],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/api\.example\.com\//, // Match your API requests
      handler: 'NetworkFirst',
      options: {
        cacheName: 'api-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 5 * 60, // 5 minutes
        },
      },
    },
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/, // Match image files
      handler: 'CacheFirst',
      options: {
        cacheName: 'image-cache',
        expiration: {
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        },
      },
    },
  ],
}

[WFZ1]

А що робить prechache? Як він відрізняється від стандартної поведінки що є зараз?
fallback page це гарна ідея

[NikitaKatrenko]

вибач за затримку, prechache дозволяє робити запит на закешовані ресурси перед тим як піти до нетворк запиту, як онлайн так і офлайн, це дозволяє закешувати усі ассети потрібні для роботи застосунка в оффлайні

[WFZ1]

Привіт! Такий от бажок знайшов в оффлайн режимі, це не критично загалом https://github.com/WFZ1/task-management-pwa/assets/8337456/05dcf037-937a-4ad6-8f70-63ccf5a91f48

Привіт, так я про нього в курсі, але це схоже на те як працює офлайн режим з firebase
https://www.loom.com/share/d8c376c762264ee3a9a3a68663d159b7?sid=2290ac58-e3c1-44d9-9de7-6953589ef58e

Chat GPT say:

The behavior you're observing is due to the way the updateDoc function works when offline. When you call updateDoc while offline, it doesn't immediately throw an error or resolve the promise; instead, it tries to perform the update and syncs when the connection is restored. This causes the code after the await updateDoc call to be delayed until the operation is either successful or fails after coming back online.

NikitaKatrenko Ти про це щось знаєш? Як фіксити таку поведінку? Чи треба її взагалі фіксити, бо звучить ніби ОК, але візуально так собі виходить)

[akhudiakov97]

Гарна робота, з мого боку аппрув !

[NikitaKatrenko]

Привіт! Такий от бажок знайшов в оффлайн режимі, це не критично загалом https://github.com/WFZ1/task-management-pwa/assets/8337456/05dcf037-937a-4ad6-8f70-63ccf5a91f48

Привіт, так я про нього в курсі, але це схоже на те як працює офлайн режим з firebase https://www.loom.com/share/d8c376c762264ee3a9a3a68663d159b7?sid=2290ac58-e3c1-44d9-9de7-6953589ef58e

Chat GPT say:

The behavior you're observing is due to the way the updateDoc function works when offline. When you call updateDoc while offline, it doesn't immediately throw an error or resolve the promise; instead, it tries to perform the update and syncs when the connection is restored. This causes the code after the await updateDoc call to be delayed until the operation is either successful or fails after coming back online.

NikitaKatrenko Ти про це щось знаєш? Як фіксити таку поведінку? Чи треба її взагалі фіксити, бо звучить ніби ОК, але візуально так собі виходить)

Розібрались на лекції 👍