{"version":3,"sources":["webpack:///./src/content/Service_worker_caching_strategies.mdx"],"names":["h","layoutProps","MDXLayout","MDXContent","components","props","width","require","isMDXComponent","name","inject","$mdxComponents","default","computed","this","render","createElement","mdx","bind"],"mappings":"6HAEIA,E,6CAMEC,EAAc,GAGdC,EAAY,UAClB,SAASC,EAAT,GAGG,IAFDC,EAEC,EAFDA,WACGC,EACF,iCACD,mBAAsBJ,EAAtB,GAAuCI,EAAvC,mBAA0DD,EAA1D,QAA8E,gBAA9E,mBACS,sBADT,0DAGmB,OAHnB,+BAGsC,OAAS,CACvC,KAAQ,mBAJhB,8CAMmB,OANnB,+BAMsC,OAAS,CACvC,KAAQ,yBAPhB,oDASmB,OATnB,+BASsC,OAAS,CACvC,KAAQ,iBAVhB,sCAaS,iBAbT,mCAeQ,uBAfR,2/CA+BoF,MA/BpF,8DAgCS,uBAhCT,yCAkCQ,uBAlCR,uZAwC6C,MAAQ,CAC/C,KAAQ,qDAzCd,uyBAmDc,CACVE,MAAO,QApDX,WAqDUC,EAAQ,QArDlB,QAqD2E,OArD3E,IAqDsF,yBArDtF,YAqD2H,4CArD3H,4UA2Dc,CACVD,MAAO,QA5DX,WA6DUC,EAAQ,QA7DlB,QA6DgE,OA7DhE,IA6D2E,2BA7D3E,YA6DkH,iCA7DlH,6RAkEc,CACVD,MAAO,QAnEX,WAoEUC,EAAQ,QApElB,QAoEiE,OApEjE,IAoE4E,4BApE5E,YAoEoH,kCApEpH,8QAyEc,CACVD,MAAO,QA1EX,WA2EUC,EAAQ,QA3ElB,QA2E+D,OA3E/D,IA2E0E,0BA3E1E,YA2EgH,gCA3EhH,0BA6ES,eA7ET,iCA+EQ,uBA/ER,kVAmFqG,MAnFrG,0YAyFc,CACVD,MAAO,QA1FX,WA2FUC,EAAQ,QA3FlB,QA2FiF,OA3FjF,IA2F4F,oCA3F5F,YA2F4I,0CA3F5I,mOA6FwF,MAAQ,CAC1F,KAAQ,qDA9Fd,yBAmGFJ,EAAWK,gBAAiB,EAEb,cACbC,KAAM,MACNC,OAAQ,CACNC,eAAgB,CACdC,QAAS,kBAAM,iBAAO,OAG1BC,SAAU,CACRT,WADQ,WAEN,OAAOU,KAAKH,mBAGhBI,OAZa,SAYNC,GAEL,OADAhB,EAAIiB,OAAIC,KAAK,CAAEF,gBAAeZ,WAAYU,KAAKV,aACxCD,EAAW,CAAEC,WAAYU,KAAKV","file":"js/chunk-2d0c932a.6fd2c7ce.js","sourcesContent":["// vue babel plugin doesn't support pragma replacement\nimport { mdx } from '@mdx-js/vue'\nlet h;\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\n\n\nconst layoutProps = {\n \n};\nconst MDXLayout = \"wrapper\"\nfunction MDXContent({\n components,\n ...props\n}) {\n return \n

Table of contents:

\n
    \n
  1. {`Introduction`}
    2. \n
  2. {`Caching strategies`}
    3. \n
  3. {`Conclusion`}
    4. \n
\n

\n Introduction\n ↑ go up\n

\n

{`When it comes to debates on how the cache should be handled on the Web? or what is best caching strategy ?\nA caching strategy is common way or a pattern if you prefer for answering to a common problem such as: What\nshould we do just right after receiving a response from a server? Should we keep it cached in memory\nor should we do something else?`}

\n

{`Different ideas and opinions can be based in general on what people has discovered in their experiences,\nwhile investigating the subject or when they were directly trying deal with it.`}

\n

{`On my side I like to think that, it's always a good idea to check by curiosity, how big techs companies\nare solving these common problems and issues. If a pattern is already existing and used somewhere by large\ncompanies, the same pattern could fit or not to your current use case. Why reinventing the wheel ?`}

\n

{`The thing is that for handling cache issues, there is no magical recipe and even big techs companies\nare constantly improving themselves in order to provide a coherent cache solution to their users.`}

\n

{`In this post, I will try to bring you more visibility, on how a service worker in your application\nwill help you to have more control on the user experience you want to offer to your users or customers.`}

\n

{`If you are landing by mistake on this post and you don't know what is a service worker, you will find\nthe big picture and some interesting use cases in my other post: `}{`Progressive Web Applications in 2021`}

\n

\n Caching strategies\n ↑ go up\n

\n

{`Since developers were trying to solve some common use cases when they were dealing with the cache,\nsome bright people from Google decided to put on the table a set of libraries answering to most\nfrequent situations that developers will have to take care about in their web applications\nand more particularly in PWA.`}

\n

{`The project is called `}{`Workbox`}{` and inside it you'll find some caching strategies based on most\ncommon pattern. These caching strategies are called workbox strategies and they are providing most\ncommon caching strategies to use in an easy and nice way.`}

\n

{`Stale While Revalidate`}

\n

{`This strategy is focused on providing the quickest answer to your users by trying to throw what you\nhave potentially put yourself in the cache. If no cache, it will fallback to the network and then\nyou will have something to put in the cache that you can use the next time as described above.`}

\n

{`Important detail on this strategy is that regardless of the age of the cached response, the cache\nis going to be revalidate each time after each request in order to keep it fresh for the next user.`}

\n \"stale\n
\n

{`Cache First`}

\n

{`A bit simpler than the previous one, if there is something in the cache, it will be used and no network\ncall will be happening in order to update the cache. Of course, if there is nothing cached a network call\nwill occur in order to have something ready on the next call.`}

\n \"cache\n
\n

{`Network Only`}

\n

{`Quite easy to guess, you are relying each time on the network because you need to show something specific\nto your users that can't be cached. So if you are working on such use cache, this standard strategy is your way to go.`}

\n \"network\n
\n

{`Cache Only`}

\n

{`This strategy is not suitable for most frequent applications workflow or scenario. Everything that you\nwill provide to your users will be picked from the cache which must pre-filled before in a pre-caching step.`}

\n \"cache\n
\n

\n Conclusion\n ↑ go up\n

\n

{`You will have the opportunity to define or customise your own strategy by for example extending one\nof the existing strategies with specific steps that suits the user experience you are working on.`}

\n

{`An interesting strategy that could be built to reproduce a well know one `}{`not provided in workbox strategies\nis cache network race strategy`}

\n

{`Cache Network Race`}

\n

{`According to some applications or services the user device has to run + the performance of the device hardware,\na network request in some case might be the quickest thing. Keeping in mind that we will potentially grab data\nthat is already cached in the device.`}

\n \"Cache\n

{`These wonderful ready to use caching strategies are among a lot of others set of libraries provided by Workbox.\nHere is the link again just in case you forgot to click on it previously. `}{`Workbox project`}

\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n\nexport default {\n name: 'Mdx',\n inject: {\n $mdxComponents: {\n default: () => () => ({})\n }\n },\n computed: {\n components() {\n return this.$mdxComponents()\n }\n },\n render(createElement) {\n h = mdx.bind({ createElement, components: this.components })\n return MDXContent({ components: this.components })\n }\n}\n "],"sourceRoot":""}