Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

42
Views
pwa static page limit

I have a pwa that is intended for use in areas with poor connectivty. When I cache less than 100 pages/assets, the SW registers and the pages are cached and everything works.

When I exceed the 100 pages/assets the SW fails to register. (Close on 2000 pages)

The total file sizes that I am trying to cache is 20mb, so it is not a disk space issue.

None of the literature that I find indicated that there is an asset limit as such.

Is there a page limit?

Here is my working code:

const app_version = '2';
const staticCacheName = 'site-static-v2';
const dynamicCacheName = 'site-dynamic-v1';
const assets = [
'/',
'/index.html',
'/library.html',
'/view_offline.html',
'/player.html',
'/json.js',
'/content.js',
'/js/app.js',
'/js/ui.js',
'/js/materialize.min.js',
'/css/styles.css',
'/css/h5p.css',
'/css/materialize.min.css',
'/img/dish.png',
'https://fonts.googleapis.com/icon?family=Material+Icons',
'https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2',
'/pages/fallback.html',
//HERE IS WHERE I WANT TO ADD THE OTHER 1990 odd pages in the same method
];

// install event
self.addEventListener('install', evt => {
  console.log('service worker installed');
  evt.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log('caching shell assets');
      cache.addAll(assets);
    })
  );
});
7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Providing an offline experience does not necessarily equate to making sure the entire website/app is available offline. No. Instead, we should strive to preserve the most common interactions and core functionality (Application Shell). If the user makes a request outside the contents of our existing cache (while offline), then display an appropriate message.

But, if you insist on having content from over 2k pages available offline, then you should consider creating an Aggregate Page that is pre-updated (on the server side) with information from a pre-determined scope of pages. With this method, you will only need to cache a single page as apposed to thousands.

Alternatively, you can store the text content of many pages in an offline database like IndexedDB. See a tutorial from Google here: https://www.youtube.com/watch?v=VNFDoawcmNc

Having a ridiculously sized cache can also suffer performance losses on slower devices. It is recommended to use lazy-loading to maintain quick loading app. Remember, we don't need to load the entire site the first time a user visits your home page.

Additional Information

The storage limit for PWA: https://stackoverflow.com/questions/58591353/how-much-can-a-pwa-store#:~:text=The%20global%20limit%20is%20calculated,a%20maximum%20of%202%20GB.

Best practices for improving your PWA’s client-side performance: https://dev.mobify.com/v1.x/how-to-guides/categories/performance/client-side-performance

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs