如何在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