Disable auto delete of local storage

programming web dev
1

I like to create PWAs with local storage.

I don’t want the browser to auto delete the local storage.
Even indexedDB gets deleted after seven days of inactivity!

I wished PWA got the same treatment as local apps on a mobile device!

Any tips?

2

Hi Wayne! Store the data in the cloud AND local storage. If the local storage gets cleared, fetch the latest copy from the cloud. Would that work?

Cheers,
Kirupa :unibrow:

3

Hey mate,

From what I can tell there is some form of persistence with this this API.

I’m not 100% on this because I use the file system for my personal apps and don’t really care about persisting data on web pages with SW’s.

Here’s my little snippet for a basic File System API (works in chrome and edge).

Have a play with that and get a feel for it… :slightly_smiling_face:

export
    class FS {
    static #currentFolder
    static #currentFile

    static async openFolder() {
        try { FS.currentFolder = await window.showDirectoryPicker({ mode: "readwrite", startIn: "desktop" }) }
        catch (err) { return "cancelled" }

    }

    static async openFile(fileName) {
        if (FS.#currentFolder == null) await FS.openFolder()
        try {
            let fileHandle = await FS.#currentFolder.getFileHandle(fileName)
            let blob = await fileHandle.getFile()
            let text = await blob.text()
            return text
        }
        catch { return "not found" }
    }

    static async createFile(newName) {
        if (FS.#currentFolder == null) await FS.openFolder()
        try {
            for await (const [name, handle] of FS.#currentFolder.entries()) {

                if (name == newName) { return alert('file name in use') }
            }
            let newFile = await FS.#currentFolder.getFileHandle(newName, { create: true });
            return newFile
        }
        catch { return "failed" }
    }

    static async saveFile(fileName, data) {
        let fileHandle;
        try {
            for await (const [name, handle] of FS.#currentFolder.entries()) { if (name == fileName) { fileHandle = handle; break } }
            if (!fileHandle) return
            let writableStream = await fileHandle.createWritable();
            await writableStream.write(data);
            await writableStream.close();
        }
        catch { "failed" }
    }

    static async deleteFile(fileName) {
        try { await FS.#currentFolder.removeEntry(fileName) }
        catch { "failed" }
    }
}
4

I can’t store to the cloud because I want to avoid gdpr rules :sweat_smile:

I can’t find what StorageManager is. Is it storing files on device?

6

From what I can tell navigator.storage returns a read only object called StorageManager

This Object allows you to:

  • estimate() : “query” how much data your origin has been allowed on the device for localStorage, caches, indexedDB sessionStorage ect

  • persist() : request permission to persist data from your origin

  • persisted(): boolean if your origins data is persisted

  • getDirectory() : access the file system directory for various operations

The code below should persist your data unless the user clears their history/ storage ect

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then((persistent) => {
    if (persistent) {
      console.log("Storage will not be cleared except by explicit user action");
    } else {
      console.log("Storage may be cleared by the UA under storage pressure.");
    }
  });
}

TBH I haven’t tested it because I just use the file system…

1 Like
7

Thank you! I will give it a try

9

It’s very sad how pwa never take off as I wanted. I have to write a native app to be able to store simple data for offline or use the cloud which violates GDPR

1 Like
10

With Apple backtracking a bit with PWAs in the EU, the PWA shine continues to wear off.

11

Can you by any chance speed me up to join project idx? I’m on a waiting list :pray:

12

PM me the email address you used to sign-up and I’ll see what I can do.

13

There might be another option to use a PWA with IOS file sytem.

This guy built a doodle app and published to APP store with a single html file using capacitor JS…

Capacitor also has a file system API…

14

Hello wayne ,
PWAs can’t fully prevent browsers from deleting local storage or IndexedDB after inactivity. To improve persistence, use service workers, request user permission for persistent storage (navigator.storage.persist()), and regularly engage users to reset inactivity timers. However, PWAs still don’t get the same treatment as native apps.