{"id":1031,"date":"2021-02-04T19:02:15","date_gmt":"2021-02-04T19:02:15","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=1031"},"modified":"2021-04-07T18:06:25","modified_gmt":"2021-04-07T18:06:25","slug":"pwa-cheat-sheet","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/pwa-cheat-sheet\/","title":{"rendered":"PWA cheat sheet"},"content":{"rendered":"\n<p><strong>index.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n    &lt;head>\n        &lt;meta charset=\"UTF-8\">\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        &lt;meta name=\"theme-color\" content=\"#009578\">\n        &lt;title>PWA&lt;\/title>\n        &lt;link rel=\"stylesheet\" href=\"src\/master.css\">\n        &lt;link rel=\"manifest\" href=\"manifest.json\">\n        &lt;link rel=\"apple-touch-icon\" href=\"images\/logo_2.jpg\">\n    &lt;\/head>\n    &lt;body>\n        &lt;h3>Progressive Web App&lt;\/h3>\n        &lt;script src=\"src\/index.js\">&lt;\/script>\n        &lt;h4>Addition&lt;\/h4>\n\n    &lt;label for=\"num1\">Enter 1st Number:&lt;\/label>&lt;br>\n    &lt;input type=\"text\" id=\"num1\" name=\"num1\">&lt;br>\n    &lt;br>\n\n    &lt;label for=\"num2\">Enter 2nd Number:&lt;\/label>&lt;br>\n    &lt;input type=\"text\" id=\"num2\" name=\"num2\">&lt;br>&lt;br>\n\n    &lt;button type=\"button\" name=\"button\" onclick=\"addition()\">Add&lt;\/button>\n\n    &lt;div>\n        &lt;h4>Result: &lt;span id=\"res\"> &lt;\/span>&lt;\/h4>\n    &lt;\/div>\n\n    &lt;script>\n        function addition() {\n            var x = parseInt(document.getElementById(\"num1\").value);\n            var y = parseInt(document.getElementById(\"num2\").value);\n\n            var z = x + y;\n\n            document.getElementById(\"res\").innerHTML = z;\n        }\n    &lt;\/script>\n\n    &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><strong>manifest.json<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"name\": \"PWA demo\",\n    \"short_name\": \"PWA\",\n    \"start_url\": \".\",\n    \"background_color\": \"#6dcdb1\",\n    \"theme_color\": \"#009578\",\n    \"display\": \"standalone\",\n    \"icons\": &#91;\n        {\n            \"src\": \"images\/logo_2.jpg\",\n            \"sizes\": \"512x512\",\n            \"type\": \"image\/jpg\"\n        },\n        {\n            \"src\": \"images\/logo_1.png\",\n            \"sizes\": \"512x512\",\n            \"type\": \"image\/png\"\n        }\n    ]\n}<\/code><\/pre>\n\n\n\n<p><strong>sw.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>self.addEventListener(\"install\", e => {\n    \/\/ console.log(\"Install decode!\");\n    e.waitUntil(\n        caches.open(\"static\").then(cache => {\n            return cache.addAll(&#91;\".\/\", \".\/src\/master.css\", \".\/images\/logo_2.jpg\"]);\n        })\n    );\n});\n\n\nself.addEventListener(\"fetch\", e => {\n    \/\/ console.log(`Intercepting fetch request for: ${e.request.url}`);\n    e.respondWith(\n        caches.match(e.request).then(response => {\n            return response || fetch(e.request);\n        })\n    );\n});<\/code><\/pre>\n\n\n\n<p><strong>src\/index.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (\"serviceWorker\" in navigator) {\n    navigator.serviceWorker.register(\"sw.js\").then(registration => {\n        console.log(\"SW Registered!\");\n        console.log(registration);\n    }).catch(error => {\n        console.log(\"SW Registration failed!\");\n        console.log(error);\n    })\n}<\/code><\/pre>\n\n\n\n<p><strong>src\/master.css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n    background: #eeeeee;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>index.html manifest.json sw.js src\/index.js src\/master.css<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[29],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":2,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1036,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions\/1036"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}