Enabling Persisted Storage for your web app on Chrome

According to Google Developer Docs, Chrome grants persistent storage permissions if any of these are satisfied:
  • The site has been bookmarked in the browser and there are less than 5 bookmarks.
  • The site has high engagement in the browser.
  • The site is added to home screen.
  • Push notifications are enabled for the site.
We will use the last two options to get the permission.
  1. Adding our app to home screen.

    • To enable adding our site to homescreen, first add a manifest file - manifest.json to the root.
          "short_name": "OCR GT",
          "name": "OCR GT",
          "icons": [
              "src": "favicon.png",
              "type": "image/png",
              "sizes": "64x64"
              "src": "awecode-512.png",
              "type": "image/png",
              "sizes": "512x512"
          "start_url": "/",
          "background_color": "#3367D6",
          "display": "standalone",
          "scope": "/",
          "theme_color": "#3367D6"
      Change the values as per your requirement. Link the manifest file from your index.html. Add the following within the head tag.
      <link rel="manifest" href="manifest.json">
    • Note: Do not use loadLanguages() with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above.

      Add a service worker with the file sw.js (following sample from Google Chrome's Github)
      const PRECACHE = 'precache-v1';
      const RUNTIME = 'runtime';
      const PRECACHE_URLS = [
        './', // Alias for index.html
      self.addEventListener('install', event => {

            .then(cache => cache.addAll(PRECACHE_URLS))
      self.addEventListener('activate', event => {
        const currentCaches = [PRECACHE, RUNTIME];
          caches.keys().then(cacheNames => {
            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
          }).then(cachesToDelete => {
            return Promise.all( => {
              return caches.delete(cacheToDelete);
          }).then(() => self.clients.claim())
      self.addEventListener('fetch', event => {
        // Skip cross-origin requests, like those for Google Analytics.
        if (event.request.url.startsWith(self.location.origin)) {
            caches.match(event.request).then(cachedResponse => {
              if (cachedResponse) {
                return cachedResponse;
              return => {
                return fetch(event.request).then(response => {
                  // Put a copy of the response in the runtime cache.
                  return cache.put(event.request, response.clone()).then(() => {
                    return response;
      Register the service worker from your app:
      if ('serviceWorker' in navigator) {
    • Now, open your app in Chrome, open Dev Tools -> Application tab -> Manifest, click on Add to homescreen. DevTools Add to Homescreen
      Image Courtesy: Google
  2. Enable push notifications

    • Click on the info icon or the Secure lock icon before the URL in the address bar. Then click on the Site Settings. Chrome Site Settings
    • And allow push notifications.
      Chrome Allow Push Notifications
  3. Ask Chrome for the persisted storage permissions.

    if ( && => {
        if (granted)
          console.log("Storage will not be cleared except by explicit user action");
          console.log("Storage may be cleared by the UA under storage pressure.");
Now, your web app should print "Storage will not be cleared except by explicit user action" on the console.