[Help wanted] Make this app a true PWA

[davi-jorge-art]

I'm asking for anyone who has ANY development skills (what's not my case) to make a PWA of this app so we all can use it on Android. I've tried it but every time I close the app , when I open again i have to set the "todo.tx" file again... There's a closed issue on this (https://github.com/sodenn/2do-txt/issues/1178) .

My point is that there's "todo.txt" apps with great user friendly GUI's for desktop , but for mobile there's no such a thing... "Markor" and "Ntodo.txt are not examples of "modern GUI's , probably you will agree..

So , the help I can do is what an IA (Gemini from Google) produced....No clue if it's right or wrong...These programs make great mistakes..

Here the code :

"To transform the 2do.txt web application into a "true PWA" on Android, the key changes are focused on implementing the Web App Manifest and the Service Worker. The project is already functional in modern browsers, but the PWA version ensures a native-like user experience, with installation on the home screen, offline functionality, and access to device features.

Here is a step-by-step guide to refactoring the code, focusing on the essential PWA elements.

Step 1: Configure manifest.webmanifest

The manifest.webmanifest file provides the browser with information about the PWA, such as its name, icons, and display behavior.

1. Create the file: In the project's root directory, create a file named manifest.webmanifest.
2. Add the content: Insert the following JSON code, adapting the values as needed.

{
  "name": "2do.txt",
  "short_name": "2do.txt",
  "description": "Task manager compatible with the todo.txt format.",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

    Create the icons folder: Create an assets/icons folder and save the icons in the specified dimensions.

Step 2: Add the Service Worker
The Service Worker is a script that runs in the background and enables features such as file caching and offline functionality.

    Create the file: In the root directory, create a file named sw.js.
    Add the content: This is a simple example that uses a cache-first strategy for static files.

javascript

const CACHE_NAME = '2dotxt-cache-v1';
const urlsToCache = [
  './',
  './index.html',
  './styles.css', // or the name of your CSS file
  './script.js',  // or the name of your JS file
  // Add other static files that the app uses here
  './assets/icons/icon-192x192.png',
  './assets/icons/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Return the item from the cache if it exists
        if (response) {
          return response;
        }
        // Otherwise, make a network request
        return fetch(event.request);
      })
  );
});


Step 3: Register the Service Worker
The Service Worker needs to be registered in your main HTML file (index.html).

    Modify index.html: Add the following JavaScript code to your file, preferably before the closing </body> tag.

html

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('Service Worker registered successfully:', registration.scope);
        })
        .catch(err => {
          console.log('Service Worker registration failed:', err);
        });
    });
  }
</script>


Step 4: Add the manifest reference in index.html
Link the manifest.webmanifest file to your index.html so the browser knows where to find it.

    Modify the <head>: Inside the <head> tag, add the following line:

html

<link rel="manifest" href="/manifest.webmanifest">


Step 5: Implement background sync and notifications (optional)
For a more complete PWA experience, you can implement the Background Sync API to sync tasks when the connection is restored, and the Notifications API to alert the user about tasks.

    Service Worker (sw.js): Add a sync event to handle synchronization.

javascript

self.addEventListener('sync', event => {
  if (event.tag === 'sync-new-task') {
    event.waitUntil(syncNewTask());
  }
});

async function syncNewTask() {
  // Logic to send new tasks to the server
}



    Notifications in sw.js: Add a push event to handle notifications.

javascript

self.addEventListener('push', event => {
  const options = {
    body: event.data.text(),
    icon: './assets/icons/icon-192x192.png',
  };
  event.waitUntil(
    self.registration.showNotification('New Task', options)
  );
});

Step 6: Use the File System API
The original 2do.txt uses local files. The PWA should use the File System Access API to replicate this behavior in compatible browsers, such as Chrome on Android. The implementation can be complex and requires creating new JavaScript code to manage permissions and file reading/writing.

    Add a new JavaScript file (file-system-handler.js).
    Update the main file (script.js) to use the new API instead of relying on native file methods.

Summary of modifications

File                                                     Action                                                          Details
| index.html |                                      Add &lt;link rel="manifest"...&gt;                 | Links the manifest to the HTML. |
| index.html |                                      Add JavaScript code to register the SW        | Enables the Service Worker. |
| **(New)** manifest.webmanifest |     Create file                                                    | Defines the PWA characteristics. |
| **(New folder)** assets/icons/ |        Add icons                                                     | Ensures correct icon display. |

After implementing these changes, the 2do.txt web app will behave like a native app on Android, allowing users to install it directly from the browser and use it with or without an internet connection.
After implementing these changes, the 2do.txt web app will behave like a native app on Android, allowing users to install it directly from the browser and use it with or without an internet connection.
Suggestion for the developer



For a robust and maintainable implementation, I suggest considering a modular approach for handling the PWA features. Instead of placing all the logic directly in sw.js, create separate modules for caching, background sync, and notifications. This will make the code easier to manage and test. Additionally, consider using a PWA framework or library like Workbox to simplify the Service Worker's creation and management, as it handles many common tasks like precaching and runtime caching automatically, reducing boilerplate code and potential errors."