{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/adding-offline-capabilities-with-service-worker-angular/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"86a39015-e6c0-5f10-9f73-819fa8e2e479","excerpt":"In this article i will explain you how you can add offline capabilities using service worker in your angular application.\nService worker is additional thread…","html":"<p>In this article i will explain you how you can add offline capabilities using service worker in your angular application.\nService worker is additional thread other than main javascript thread to handle offline capabilities it cache all the request so that if same request is made it returns from it's cache</p>\n<h4>Step 1 Adding Angular service worker in to your angular application</h4>\n<p>In order to add service worker in your angular application run below command</p>\n<pre><code class=\"language-js\">ng add @angular/pwa\n</code></pre>\n<p>Now when you run below command it will create angular-pwa folder inside build folder</p>\n<pre><code class=\"language-js\">ng build --prod\n</code></pre>\n<h4>Step 2 Check service worker locally</h4>\n<ul>\n<li>In order to check service worker locally in your angular application you need to install lightweight server run below command to install lightweight server</li>\n</ul>\n<pre><code class=\"language-js\">npm install -g http-server\n</code></pre>\n<ul>\n<li>Navigate to the dist folder <strong><em>cd dist/angular-pwa</em></strong> and run below command</li>\n</ul>\n<pre><code class=\"language-js\">http-server -p 8001\n</code></pre>\n<h4>Step 3 Caching Assets for Offline Use</h4>\n<p>Go to <strong><em>ngsw-config.json</em></strong> file this is the main file through which you can configure your service worker and control which assets to cache or which to not</p>\n<p>As you can see i have added some urls to cache under <strong><em>assetsGroups->urls</em></strong> array</p>\n<pre><code class=\"language-json\">{\n  \"index\": \"/index.html\",\n  \"assetGroups\": [\n    {\n      \"name\": \"app\",\n      \"installMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\"/favicon.ico\", \"/index.html\", \"/*.css\", \"/*.js\"],\n        \"urls\": [\n          \"https://fonts.googleapis.com/css?family=Oswald:300,700\",\n          \"https://fonts.gstatic.com/**\"\n        ]\n      }\n    },\n    {\n      \"name\": \"assets\",\n      \"installMode\": \"lazy\",\n      \"updateMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\"/assets/**\"]\n      }\n    }\n  ]\n}\n</code></pre>\n<h4>Step 4 Caching Dynamic Assets &#x26; URLs</h4>\n<p>In order to cache dynamic assets and url's you need to add a new property array in your <strong><em>ngsw-config.json</em></strong> file that is <strong><em>dataGroups</em></strong></p>\n<p>As you can see in below json i have added a new property with name \"dataGroups\" in that array i have added API url</p>\n<pre><code class=\"language-json\">{\n  \"index\": \"/index.html\",\n  \"assetGroups\": [\n    {\n      \"name\": \"app\",\n      \"installMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\"/favicon.ico\", \"/index.html\", \"/*.css\", \"/*.js\"],\n        \"urls\": [\n          \"https://fonts.googleapis.com/css?family=Oswald:300,700\",\n          \"https://fonts.gstatic.com/**\"\n        ]\n      }\n    },\n    {\n      \"name\": \"assets\",\n      \"installMode\": \"lazy\",\n      \"updateMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\"/assets/**\"]\n      }\n    }\n  ],\n  \"dataGroups\": [\n    {\n      \"name\": \"posts\",\n      \"urls\": [\"https://jsonplaceholder.typicode.com/posts\"],\n      \"cacheConfig\": {\n        \"maxSize\": 5,\n        \"maxAge\": \"6h\",\n        \"timeout\": \"10s\",\n        \"strategy\": \"freshness\"\n      }\n    }\n  ]\n}\n</code></pre>","fields":{"slug":"/adding-offline-capabilities-with-service-worker-angular/"},"frontmatter":{"title":"How to add offline capabilities with service worker in angular","date":"April 06, 2022","description":"In this article i will explain you how you can add offline capabilities with service worker in your angular application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/offline-capabilities-service-worker.jpeg"}},"previous":null,"next":{"fields":{"slug":"/aws-serverless-node-restapi-using-serverless-framework/"},"frontmatter":{"title":"AWS Serverless Node Rest API using lambda function, api gateway and serverless framework","date":"April 06, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/serverless-apigateway-node.jpg"}}},"pageContext":{"id":"86a39015-e6c0-5f10-9f73-819fa8e2e479","previousPostId":null,"nextPostId":"361811c6-75ac-583f-ada2-0052ae2cebbc"}},
    "staticQueryHashes": ["3860684146"]}