✨(service-worker) offline doc management #94

AntoLC · 2024-06-16T11:53:55Z

Purpose

We will be able to manage our documents offline (create / update /delete).
We created a custom WorkboxPlugin to intercept the requests and created a queue system to replay when a connection is found the requests made offline.

Proposal

Demo

scrnli_6_20_2024_10-13-57.PM.webm

Add a new environment variable to enable or disable the service worker in development mode. By default, the service worker is disabled in development mode, it can cause problems when developing the application with the hmr. It can creates useless log in the console as well. We can easily enable it by setting NEXT_PUBLIC_SW_DEACTIVATED to false in the .env.development file. We will use this new var to not use the service worder with the CI as well.

This commit adds the service worker api to the impress app. The service worker api will cache the api calls in the indexdb. We are using the network first strategy to fetch the data. If the network is not available, we will fetch the data from the indexdb. To do that, we create a custom plugin (ApiPlugin).

Add offline docs update to the service worker. We use the Network fisrt strategy, if the network is down, we will update the doc in the indexDB and serve it from there. When the connection is back, we will send the doc to the server.

Export the storage of docs to a separate class `DocsDB` that will be responsible for storing / retrieving / synching docs from indexedDB.

Add offline docs create to the service worker. We use the Network fisrt strategy, if the network is down, we will create the doc in the indexDB and serve it from there. When the connection is back, we will send the doc to the server.

Add offline docs delete to the service worker. We use the Network fisrt strategy, if the network is down, we will delete the doc in the indexDB. When the connection is back, we will remove the doc to the server.

We override the perform_create method of the DocumentViewSet to save the document with the id provided if a id is provided in the request. We do that because in offline mode we will create the document locally and we will need to save it with the id created locally to have our next requests to the server to be able to find the document with the id provided.

We add a buildId to the service worker to force the browser to update the service worker when the buildId changes. Before we were on the tag version, but the browser was not updating the service worker easily on the staging environment.

Firefox does not trigger the request everytime the user leaves the page. Plus the request is not intercepted by the service worker. So we prevent the default behavior to have the popup asking the user if he wants to leave the page, by adding the popup, we let the time to the request to be sent, and intercepted by the service worker (for the offline part). We also add a toast to inform the user that the document has been saved, it will make it more obvious that the document has been saved if a firefox user come back from the popup to the page.

Add unit tests for: - ApiPlugin - RequestSerializer - SyncManager

Add a conf files to the service worker to store the development urls. If someone wants to change the urls, they can do it in the conf file, it is more intuitive than changing the urls in the service worker file.

The service worker is now in the features folder. It is more a feature than a core part of the app.

Create useSWRegister hook, which will be used to register the service worker in the app.

Added: - Manage the document's right (#75) - Update document (#68) - Remove document (#68) - (docker) dockerize dev frontend (#63) - (backend) list users with email filtering (#79) - (frontend) add user to a document (#52) - (frontend) invite user to a document (#52) - (frontend) manage members (update role / list / remove) (#81) - ✨(frontend) offline mode (#88) - (frontend) translate cgu (#83) - ✨(service-worker) offline doc management (#94) - (frontend) Add beta tag on logo (#121) Changed: - Change site from Impress to Docs (#76) - Generate PDF from a modal (#68) - 🔧 (helm) sticky session by request_uri for signaling server (#78) - (frontend) change logo (#84) - (frontend) pdf has title doc (#84) - ⚡️(e2e) unique login between tests (#80) - ⚡️(CI) improve e2e job (#86) - ♻️(frontend) improve the error and message info ui (#93) - ✏️(frontend) change all occurences of pad to doc (#99) Fixed: - Fix the break line when generate PDF (#84) Delete: - Remove trigger workflow on push tags on CI (#68) - (frontend) Remove coming soon page (#121)

Added: - 🛂(frontend) Manage the document's right (#75) - ✨(frontend) Update document (#68) - ✨(frontend) Remove document (#68) - 🐳(docker) dockerize dev frontend (#63) - 👔(backend) list users with email filtering (#79) - ✨(frontend) add user to a document (#52) - ✨(frontend) invite user to a document (#52) - 🛂(frontend) manage members (update role / list / remove) (#81) - ✨(frontend) offline mode (#88) - 🌐(frontend) translate cgu (#83) - ✨(service-worker) offline doc management (#94) - ⚗️(frontend) Add beta tag on logo (#121) Changed: - ♻️(frontend) Change site from Impress to Docs (#76) - ✨(frontend) Generate PDF from a modal (#68) - 🔧(helm) sticky session by request_uri for signaling server (#78) - ♻️(frontend) change logo (#84) - ♻️(frontend) pdf has title doc (#84) - ⚡️(e2e) unique login between tests (#80) - ⚡️(CI) improve e2e job (#86) - ♻️(frontend) improve the error and message info ui (#93) - ✏️(frontend) change all occurences of pad to doc (#99) Fixed: - 🐛(frontend) Fix the break line when generate PDF (#84) Delete: - 💚(CI) Remove trigger workflow on push tags on CI (#68) - 🔥(frontend) Remove coming soon page (#121)

AntoLC self-assigned this Jun 16, 2024

AntoLC force-pushed the feature/offline-docs-saving branch from b27973b to 85a8da5 Compare June 17, 2024 09:22

AntoLC added enhancement improve an existing feature frontend feature add a new feature labels Jun 17, 2024

AntoLC changed the title ~~Feature/offline docs saving~~ ✨(service-worker) offline doc management Jun 17, 2024

AntoLC force-pushed the feature/offline-docs-saving branch 9 times, most recently from 4fe7c85 to 1029aef Compare June 25, 2024 13:53

AntoLC force-pushed the feature/offline-docs-saving branch 6 times, most recently from 6033ab8 to 834cae8 Compare June 26, 2024 15:08

AntoLC added 9 commits June 28, 2024 10:55

✨(service-worker) add offline docs update

0c555de

Add offline docs update to the service worker. We use the Network fisrt strategy, if the network is down, we will update the doc in the indexDB and serve it from there. When the connection is back, we will send the doc to the server.

♻️(service-worker) add DocsDB to store docs in indexedDB

de2c8ff

Export the storage of docs to a separate class `DocsDB` that will be responsible for storing / retrieving / synching docs from indexedDB.

✨(service-worker) add offline docs create

7db7a90

Add offline docs create to the service worker. We use the Network fisrt strategy, if the network is down, we will create the doc in the indexDB and serve it from there. When the connection is back, we will send the doc to the server.

✨(service-worker) add offline docs delete

977b184

Add offline docs delete to the service worker. We use the Network fisrt strategy, if the network is down, we will delete the doc in the indexDB. When the connection is back, we will remove the doc to the server.

🔧(frontend) add a buildId to service worker

52fa72d

We add a buildId to the service worker to force the browser to update the service worker when the buildId changes. Before we were on the tag version, but the browser was not updating the service worker easily on the staging environment.

AntoLC added 4 commits June 28, 2024 10:55

✅(service-worker) add unit tests

630b8dc

Add unit tests for: - ApiPlugin - RequestSerializer - SyncManager

🔧(service-worker) add conf file with dev urls

48157ec

Add a conf files to the service worker to store the development urls. If someone wants to change the urls, they can do it in the conf file, it is more intuitive than changing the urls in the service worker file.

🚚(service-worker) move service worker to features

3b2be32

The service worker is now in the features folder. It is more a feature than a core part of the app.

♻️(service-worker) create useSWRegister hook

d33538f

Create useSWRegister hook, which will be used to register the service worker in the app.

AntoLC force-pushed the feature/offline-docs-saving branch from 834cae8 to d33538f Compare June 28, 2024 08:55

AntoLC enabled auto-merge (rebase) June 28, 2024 09:01

AntoLC merged commit 9c19b22 into main Jun 28, 2024

AntoLC deleted the feature/offline-docs-saving branch June 28, 2024 09:07

AntoLC mentioned this pull request Jul 2, 2024

🔖(major) major release to 1.0.0 #123

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

✨(service-worker) offline doc management #94

✨(service-worker) offline doc management #94

Uh oh!

AntoLC commented Jun 16, 2024 •

edited

Loading

Uh oh!

Uh oh!

✨(service-worker) offline doc management #94

✨(service-worker) offline doc management #94

Uh oh!

Conversation

AntoLC commented Jun 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Proposal

Demo

Uh oh!

Uh oh!

AntoLC commented Jun 16, 2024 •

edited

Loading