service worker

Author: Terrycoco

Diff for: README.md

@@ -15,8 +15,8 @@ In addition, I have added setup for:
 - persistent storage of redux store across pages and browser refreshes
 - material-ui (with customized theme)
 - SASS
-- service worker registration at root scope
-- module aliases (relative paths normally not needed)
+- service worker registration at root scope for offline capability
+- module aliases (relative paths not needed in modules)
 - file compression
 
 ## To Install
@@ -30,6 +30,10 @@ In addition, I have added setup for:
  git init
  git remote set-url origin http://github.com/[YOUR GITHUB NAME]/[YOUR GITHUB NEW REPOSITORY]
  
+
+ test it out:
+ npm run dev
+
 ```
 
 
@@ -51,6 +55,7 @@ my-app/
   .babelrc
   .gitignore
   manifest.json
+  my-service-worker.js
   next.config.js
   postcss.config.js
   routes.js
@@ -173,5 +178,8 @@ Any time that you want to "age" the redux store to make sure that these values w
 I don't like using relative paths if I don't have to (I hate trying to remember ../../..)!  So I set up in the .babelrc file at the root all the aliases for different folders.  If you add a folder to your project, add it in there too.
 
 ## Service Worker
-Using webpack's SWPrecache Plugin, I set up a service worker at root for PWA support.  It is automatically registered on every page load through the Layout component.  Be sure to customize the manifest.json file at the root with your project specifics.
+I set up a service worker at root (my-service-worker.js).
+1. Any time that you add a page, add the url to the cache of the my-service-worker.js file in the install event and change the version number.
+2. Be sure to customize the manifest.json file at the root with your project specifics, such as your project name and icons.
+
 

Diff for: my-service-worker.js

@@ -0,0 +1,169 @@
+/* Instructions from :
+https://css-tricks.com/serviceworker-for-offline/
+*/
+
+var version = 'v1::';
+
+//install event
+self.addEventListener("install", function(event) {
+	console.log('service worker installing....');
+	event.waitUntil(
+		/* The caches build-in is a promise-based API that helps you to cache responses,
+		as well as finding and deleting them.
+		*/
+		caches
+		/* You can open a cache by name, and this method returns a promise.  We use
+		 a versioned cache name here so that we can remove old cache entries in
+		 one fell swoop later, when phasing out an older service worker.
+		 */
+		 .open(version + 'fundamentals')
+		 .then(function(cache) {
+		 	/* After the cache is opened, we can fill it with the offline fundamentals.
+		 	The method below will add all resources we've indicated to the cache,
+		 	after making HTTP requests for each of them
+		 	*/
+		 	return cache.addAll([
+		 		'/',
+		 		'/about'
+		 	]);
+		 })
+		 .then(function() {
+		 	  console.log('Service worker installed');
+		 })
+	);
+});
+
+//fetch event
+self.addEventListener("fetch", function(event) {
+	console.log('sw fetching...');
+	/* We should only cache GET requests, and deal with the rest of the methods on the 
+	client side, by handling failed POST requests etc.
+	*/
+	if (event.request.method !== 'GET') {
+		/* if we don't block the event as dhown below, then the requesst will go to
+		the network as usual.
+		*/
+		console.log('SW: fetch event ignored', event.request.method, event.request.url);
+		return;
+	}
+
+	/* Similar to event.waitUntil in that it blocks the fetch event on a promise.
+	 Fulfillment result will be used as the response, and rejection will end in a 
+	 HTTP response indicating failure.
+	*/
+	event.respondWith(
+    caches
+    /* This method returns a promise that resolves to a cache entry matching
+     the request. Once the promise is settled, we can then provide a response
+     to the fetch request.
+    */
+    .match(event.request)
+    .then(function(cached) {
+    	/* Even if the response is in our cache, we go to the network as well.
+    	This pattern is known for producing "eventually fresh" responses,
+    	where we return cached responses immediately, and meanwhile pull
+    	a network response and store that in the cache.
+    	Read more:
+    	 https://ponyfoo.com/articles/progressive-networking-serviceworker
+    	 */
+    	 var networked = fetch(event.request)
+    	 // We handle the network request with success and failure scenarios.
+    	 .then(fetchedFromNetwork, unableToResolve) 
+    	 // We should catch errors on the fetchedFromNetwork handler as well.
+    	 .catch(unableToResolve);
+
+    	 console.log('SW: fetch event ', cached ? '(cached}' : '(network)', event.request.url);
+       return cached || networked;
+
+       function fetchedFromNetwork(response) {
+       	/* We copy the response before replying to the network request.
+       	 This is the response that will be stored on the ServiceWorker cache.
+       	 */
+       	 var cacheCopy = response.clone();
+
+       	 console.log('SW: fetch from network.' , event.request.url);
+
+       	 caches
+       	 //We open a cache to store the response for this request.
+       	 .open(version + 'pages')
+       	 .then(function add(cache){
+       	 	/* We store the response for this requst.  It'll later become
+       	 	available to caches.match(event.request) calls, when looking
+       	 	for cached responses.
+       	 	*/
+          cache.put(event.request, cacheCopy);
+       	 })
+       	 .then(function() {
+       	 	 console.log('SW: fetch response stored in cache.', event.request.url);
+       	 });
+
+       	 // Return the response so that the promise is settled in fulfillment.
+       	 return response;
+       }
+
+       /* When this method is called, it means we were unable to produce a response
+       from either the cache or the network.  This is our oppotunity to produce
+       a meaningful response even when all else fails.  It's the last chance, so
+       you probably want to display a "Service Unavailable" view or a generic
+       error response.
+       */
+       function unableToResolve() {
+       	/* There's a couple of things we can do here:
+       	- Test the Accept header and then return one of the 'offlineFundamentals'
+       		e.g: 'return caches.match('/some/cached/image.png')
+       	- You should also consider the origin.  It's easier to decide what
+       		"unavailable" means for requests against your origins than for requests
+       		against a third party, such as an ad provider
+       	- Generate a Response programmatically, as shown below, and return that.
+       */
+       console.log('SW: fetch request failed in both cache and network');
+
+       /* Here we're creating a response programmatically.  The first parameter is the
+        response body, and the second one defines the options for the response.
+        */
+       return new Response('<h1>Service Unavailable</h1>', {
+       	 status: 503,
+       	 statusText: 'Service Uavailable',
+       	 headers: new Headers({
+       	 	 'Content-Type': 'text/html'
+       	 })
+       });
+      }
+    })
+	);
+});
+
+//activate event
+self.addEventListener("activate", function(event) {
+	/* Just like with the install event, event.waitUntil blocks activate on a promise.
+	Activation will fail unless the promise is fulfilled.
+	*/
+	console.log('SW: activating...');
+
+	event.waitUntil(
+		caches
+		/* This method returns a promise which will resolve to an array of available
+		  cache keys.
+		*/
+		.keys()
+		.then(function(keys) {
+			// We return a promise that settles when all outdated caches are deleted.
+			return Promise.all(
+				keys
+				.filter(function (key) {
+					// Filter by keys that don't start with the latest version prefix.
+					return !key.startsWith(version);
+				})
+				.map(function(key) {
+					/* Return a promise that's fulfilled
+					when each outdated cache is deleted.
+					*/
+					return caches.delete(key);
+				})
+			);
+		})
+		.then(function() {
+			console.log('SW: activate completed');
+		})
+	);
+});

Diff for: next.config.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const glob = require('glob');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 
 module.exports = {
   webpack: (config, { dev }) => {
@@ -33,19 +32,6 @@ module.exports = {
       }
     );
 
-    config.plugins.push(
-      new SWPrecacheWebpackPlugin({
-        verbose: true,
-        staticFileGlobsIgnorePatterns: [/\.next\//],
-        runtimeCaching: [
-          {
-            handler: 'networkFirst',
-            urlPattern: /^https?.*/
-          }
-        ]
-      })
-    )
-
 
 
 

Diff for: offline/registerSW.js

@@ -5,7 +5,7 @@ export default async function registerSW() {
       try {
         const registration = await navigator.serviceWorker.getRegistration('/');
         if (!registration) {
-          await navigator.serviceWorker.register('/service-worker.js', {
+          await navigator.serviceWorker.register('/my-service-worker.js', {
             scope: '/'
           });