How to store offline Storage permanent data inside browser in Progressive Web Apps?

Question

Is it Possible to store permanent data in offline Storage inside browser? If any solution is there then help me so that i can solve my problem. I read Some Tutorial but that is not useful me . Thanks in Advance!

Answer 1

Let's get right to the point with a general recommendation for storing data offline:

• For the network resources necessary to load your app while offline, use the Cache API (part of service workers).
• For all other data, use IndexedDB (with a promises wrapper).

I'll tell you how to use both after i tell you the storage limits per browser.

• Chrome supports use of <6% of free space
• Firefox supports use of <10% of free space
• Safari supports use of <50MB
• Internet Explorer 10 supports use of <250MB
• With Edge it depends on volume size

A working example of a service worker using the cache api is

var CACHE_VERSION = 1;

// Shorthand identifier mapped to specific versioned cache.
var CURRENT_CACHES = {
  font: 'font-cache-v' + CACHE_VERSION
};

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.values(CURRENT_CACHES);

  // Active worker won't be treated as activated until promise
  // resolves successfully.
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!expectedCacheNames.includes(cacheName)) {
            console.log('Deleting out of date cache:', cacheName);

            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(

    // Opens Cache objects that start with 'font'.
    caches.open(CURRENT_CACHES['font']).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log('Found response in cache:', response);

          return response;
        }

        console.log('Fetching request from the network');

        return fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());

          return networkResponse;
        });
      }).catch(function(error) {

        // Handles exceptions that arise from match() or fetch().
        console.error('Error in fetch handler:', error);

        throw error;
      });
    })
  );
});

[Source and Explanation]

And i'm not sure about how to use IndexedDB Some other ways are

• The File System API which is only for Chrome 13+, Edge, Firefox 50+ and Opera 15+ [Tutorial]
• Web Storage (eg LocalStorage and SessionStorage) is synchronous, has no Web Worker support and is size and type (strings only) limited. [Tutorial]
• There are other but those aren't widely supported and are very difficult