├── 00HelloWorld ├── README.md ├── output.png ├── service-worker.js ├── index.html └── app.js ├── 01CacheFiles ├── style.css ├── output.png ├── README.md ├── app.js ├── index.html └── service-worker.js ├── 02AppIcon ├── style.css ├── README.md ├── service-worker.js ├── images │ ├── ic_launcher1.png │ ├── ic_launcher2.png │ ├── ic_launcher3.png │ ├── ic_launcher4.png │ └── ic_launcher5.png ├── app.js ├── index.html └── manifest.json ├── 03CacheOnly ├── style.css ├── README.md ├── app.js ├── index.html └── service-worker.js ├── 04NetworkOnly ├── style.css ├── README.md ├── service-worker.js ├── app.js └── index.html ├── 05Cache-Fallback-Network ├── style.css ├── README.md ├── app.js ├── index.html └── service-worker.js └── README.md /00HelloWorld/README.md: -------------------------------------------------------------------------------- 1 | ##### Result: 2 | ![alt tag](output.png) -------------------------------------------------------------------------------- /01CacheFiles/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: aqua; 3 | } -------------------------------------------------------------------------------- /02AppIcon/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: darkcyan; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /03CacheOnly/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: darkcyan; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /04NetworkOnly/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: darkcyan; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /05Cache-Fallback-Network/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: darkcyan; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /02AppIcon/README.md: -------------------------------------------------------------------------------- 1 | ##### References: 2 | - https://developers.google.com/web/fundamentals/web-app-manifest/ 3 | -------------------------------------------------------------------------------- /03CacheOnly/README.md: -------------------------------------------------------------------------------- 1 | ##### References: 2 | - https://jakearchibald.com/2014/offline-cookbook/#cache-only 3 | -------------------------------------------------------------------------------- /00HelloWorld/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/00HelloWorld/output.png -------------------------------------------------------------------------------- /01CacheFiles/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/01CacheFiles/output.png -------------------------------------------------------------------------------- /04NetworkOnly/README.md: -------------------------------------------------------------------------------- 1 | ##### References: 2 | - https://jakearchibald.com/2014/offline-cookbook/#network-only 3 | -------------------------------------------------------------------------------- /02AppIcon/service-worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("activate", function(e) { 2 | console.log("[ServiceWorker] Activate"); 3 | }); -------------------------------------------------------------------------------- /00HelloWorld/service-worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("activate", function(e) { 2 | console.log("[ServiceWorker] Activate"); 3 | }); 4 | -------------------------------------------------------------------------------- /02AppIcon/images/ic_launcher1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/02AppIcon/images/ic_launcher1.png -------------------------------------------------------------------------------- /02AppIcon/images/ic_launcher2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/02AppIcon/images/ic_launcher2.png -------------------------------------------------------------------------------- /02AppIcon/images/ic_launcher3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/02AppIcon/images/ic_launcher3.png -------------------------------------------------------------------------------- /02AppIcon/images/ic_launcher4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/02AppIcon/images/ic_launcher4.png -------------------------------------------------------------------------------- /02AppIcon/images/ic_launcher5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadMohsin/Progressive-Web-App/HEAD/02AppIcon/images/ic_launcher5.png -------------------------------------------------------------------------------- /05Cache-Fallback-Network/README.md: -------------------------------------------------------------------------------- 1 | ##### References: 2 | - https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network 3 | -------------------------------------------------------------------------------- /01CacheFiles/README.md: -------------------------------------------------------------------------------- 1 | ##### References: 2 | - https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#caches 3 | 4 | ##### Result: 5 | ![alt tag](output.png) 6 | -------------------------------------------------------------------------------- /04NetworkOnly/service-worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("activate", function(e) { 2 | console.log("[ServiceWorker] Activate"); 3 | }); 4 | 5 | self.addEventListener('fetch', (event) => { 6 | event.respondWith(fetch(event.request)); 7 | }); 8 | -------------------------------------------------------------------------------- /00HelloWorld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /01CacheFiles/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /02AppIcon/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /03CacheOnly/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /04NetworkOnly/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /00HelloWorld/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("./service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /05Cache-Fallback-Network/app.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker 3 | .register("service-worker.js") // service worker file location 4 | .then(function() { 5 | console.log("Service Worker Registered Successfully"); 6 | }) 7 | .catch(function(error) { 8 | console.error("Something goes wrong while registering service worker"); 9 | console.log(error); 10 | }); 11 | } else { 12 | console.log("Service Worker is not available"); 13 | } 14 | -------------------------------------------------------------------------------- /01CacheFiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |

Hello World

15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /02AppIcon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | myApp 8 | 9 | 10 | 11 | 12 | 13 |

Hello World

14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /04NetworkOnly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | myApp 8 | 9 | 10 | 11 | 12 |

Network only Call

13 |

14 | Ideal for: Things that have no offline equivalent, such as analytics pings, non-GET requests. 15 |

16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App 2 | 3 | ##### Learn PWA in baby steps 4 | 5 | ###### Code editor 6 | - Visual Studio Code (https://code.visualstudio.com/download) 7 | 8 | ###### Chrome plugin for local server 9 | - ApplicationWeb Server for Chrome (https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb) 10 | 11 | ###### References: 12 | - https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ 13 | - https://developers.google.com/web/fundamentals/architecture/app-shell 14 | - https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers 15 | - https://jakearchibald.com/2014/offline-cookbook/ 16 | -------------------------------------------------------------------------------- /03CacheOnly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | myApp 8 | 9 | 10 | 11 | 12 |

Cache only Calls

13 |

14 | Ideal for: Anything you'd consider static to that "version" of your site. 15 | You should have cached these in the install event, so you can depend on them being there. 16 |

17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /05Cache-Fallback-Network/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | myApp 8 | 9 | 10 | 11 | 12 |

Cache, falling back to network

13 |

14 | Ideal for: f you're building offline-first, this is how you'll handle the majority of requests. 15 | Other patterns will be exceptions based on the incoming request. 16 |

17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /03CacheOnly/service-worker.js: -------------------------------------------------------------------------------- 1 | var cacheName = 'demo-app'; 2 | var filesToCache = [ 3 | '/', 4 | '/app.js', 5 | '/style.css', 6 | '/index.html', 7 | ]; 8 | 9 | self.addEventListener("activate", function(e) { 10 | console.log("[ServiceWorker] Activate"); 11 | }); 12 | 13 | self.addEventListener('install', function(e) { 14 | console.log('[ServiceWorker] Install'); 15 | e.waitUntil( 16 | caches.open(cacheName).then(function(cache) { 17 | console.log('[ServiceWorker] Caching app shell'); 18 | return cache.addAll(filesToCache); 19 | }) 20 | ); 21 | }); 22 | 23 | self.addEventListener('fetch', (event) => { 24 | // If a match isn't found in the cache, the response 25 | // will look like a connection error 26 | event.respondWith(caches.match(event.request)); 27 | }); 28 | -------------------------------------------------------------------------------- /05Cache-Fallback-Network/service-worker.js: -------------------------------------------------------------------------------- 1 | var cacheName = 'demo-app'; 2 | var filesToCache = [ 3 | '/', 4 | '/app.js', 5 | '/style.css', 6 | '/index.html', 7 | ]; 8 | 9 | self.addEventListener("activate", function(e) { 10 | console.log("[ServiceWorker] Activate"); 11 | }); 12 | 13 | self.addEventListener('install', function(e) { 14 | console.log('[ServiceWorker] Install'); 15 | e.waitUntil( 16 | caches.open(cacheName).then(function(cache) { 17 | console.log('[ServiceWorker] Caching app shell'); 18 | return cache.addAll(filesToCache); 19 | }) 20 | ); 21 | }); 22 | 23 | self.addEventListener('fetch', (event) => { 24 | event.respondWith(async function() { 25 | const response = await caches.match(event.request); 26 | return response || fetch(event.request); 27 | }()); 28 | }); 29 | -------------------------------------------------------------------------------- /01CacheFiles/service-worker.js: -------------------------------------------------------------------------------- 1 | var cacheName = 'demo-app'; 2 | var filesToCache = [ 3 | '/', 4 | '/app.js', 5 | '/style.css', 6 | '/index.html', 7 | ]; 8 | 9 | self.addEventListener("activate", function(e) { 10 | console.log("[ServiceWorker] Activate"); 11 | }); 12 | 13 | self.addEventListener('install', function(e) { 14 | console.log('[ServiceWorker] Install'); 15 | e.waitUntil( 16 | caches.open(cacheName).then(function(cache) { 17 | console.log('[ServiceWorker] Caching app shell'); 18 | return cache.addAll(filesToCache); 19 | }) 20 | ); 21 | }); 22 | 23 | self.addEventListener('fetch', function(e) { 24 | console.log('[ServiceWorker] Fetch', e.request.url); 25 | e.respondWith( 26 | caches.match(e.request).then(function(response) { 27 | return response || fetch(e.request); 28 | }) 29 | ); 30 | }); -------------------------------------------------------------------------------- /02AppIcon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Demo test app", 3 | "short_name": "myApp", 4 | "start_url": "/index.html", 5 | "icons": [ 6 | { 7 | "src": "/images/ic_launcher1.png", 8 | "type": "image/png", 9 | "sizes": "48x48" 10 | }, 11 | { 12 | "src": "/images/ic_launcher1.png", 13 | "type": "image/png", 14 | "sizes": "96x96" 15 | }, 16 | { 17 | "src": "/images/ic_launcher2.png", 18 | "type": "image/png", 19 | "sizes": "144x144" 20 | }, 21 | { 22 | "src": "/images/ic_launcher3.png", 23 | "type": "image/png", 24 | "sizes": "192x192" 25 | }, 26 | { 27 | "src": "/images/ic_launcher4.png", 28 | "type": "image/png", 29 | "sizes": "256x256" 30 | }, 31 | { 32 | "src": "/images/ic_launcher5.png", 33 | "type": "image/png", 34 | "sizes": "512x512" 35 | } 36 | ], 37 | "display": "standalone", 38 | "scope": ".", 39 | "orientation": "any", 40 | "backgroung_color": "#e8023f", 41 | "theme_color": "#1b26c6", 42 | "description": "This is my sample app for home icon" 43 | } 44 | --------------------------------------------------------------------------------