Auwalms/amp-pwa-codelab

## amp-pwa-codelab

//add to src/sw.js
importScripts('workbox-sw.dev.v2.0.0.js');

const workboxSW = new self.WorkboxSW();
workboxSW.precache([]);

//create a folder in the project folder and name it 'workbox-cli-config.js'
// then add the below snippet
module.exports = {
  "globDirectory": "./",
  "globPatterns": [
    "img/**.*"
  ],
  "swSrc": "src/sw.js",
  "swDest": "service-worker.js",
  "globIgnores": [
    "./workbox-cli-config.js"
  ]
};

//run the following code from the project's terminal
workbox inject:manifest

//Add the amp-install-serviceworker JavaScript to the end of the head section of each AMP page
<script async custom-element="amp-install-serviceworker"
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

//Next, add the component configuration to the bottom of each AMP page, right before the </body> tag:
<amp-install-serviceworker
  src="/service-worker.js"
  layout="nodisplay"
  data-iframe-src="/install-service-worker.html">
</amp-install-serviceworker>

//Finally, write a file that registers the service worker. In project, create a install-service-worker.html
//file with the following content:
<!doctype html>
<html>
  <head>
    <title>Installing service worker</title>
    <script type="text/javascript">
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js')
          .then(function(reg) {
            console.log('SW scope: ', reg.scope);
          })
          .catch(function(err) {
            console.log('SW registration failed: ', err);
          });
      };
    </script>
  </head>
  <body>
  </body>

  //To cache pages the user has visited, we must add a route to the service worker.
  //Add the following code to the bottom of src/sw.js:
  workboxSW.router.registerRoute('/*', args => {
  if (args.event.request.mode !== 'navigate') {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  return workboxSW.strategies.networkFirst().handle(args);
});

//We still need to configure the AMP runtime to be cached to be completely offline
//Append the following route to src/sw.js:
workboxSW.router.registerRoute(/(.*)cdn\.ampproject\.org(.*)/,
  workboxSW.strategies.staleWhileRevalidate()
);

//users should get an offline page when offline and trying to visit a page that has not been cached
//In project, create a file called offline.html and add this code:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>The Photo Blog - Offline</title>
  <meta name="viewport"
        content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
  <h1>You are Offline</h1>
</body>
</html>

//In workbox-cli-config.js, add offline.html to the list of static files to cache in the staticFileGlobs:
"offline.html"

//In src/sw.js, add a .then after the workboxSW.strategies.networkFirst().handle(args) method call to return
// the offline page when a request fails. below is the snippet
.then(response => {
    if (!response) {
      return caches.match('offline.html');
    }
    return response;
  });

//create a manifest file from  https://app-manifest.firebaseapp.com/ to enable the app become installable
//like a native app and add it to the root of your project or use this manifest
{
  "name": "AMP PWA Codelab",
  "short_name": "AMP PWA Codelab",
  "theme_color": "#00796b",
  "background_color": "#00796b",
  "display": "standalone",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

//now add link the manifest.json file to all the amp-pages .
<link rel="manifest" href="/manifest.json">

//In workbox-cli-config.js, add index.html and the icons to
//the list of static files to cache in the staticFileGlobs.

"index.html",
"icons/**.*"

//Also add a templatedUrls property
"templatedUrls": {
    "/": ["index.html"]
  }

  //now lets regenerate our service worker by typing the following command
  workbox inject:manifest

  //feel free to deploy the app

	//add to src/sw.js
	importScripts('workbox-sw.dev.v2.0.0.js');

	const workboxSW = new self.WorkboxSW();
	workboxSW.precache([]);

	//create a folder in the project folder and name it 'workbox-cli-config.js'
	// then add the below snippet
	module.exports = {
	"globDirectory": "./",
	"globPatterns": [
	"img/*."
	],
	"swSrc": "src/sw.js",
	"swDest": "service-worker.js",
	"globIgnores": [
	"./workbox-cli-config.js"
	]
	};

	//run the following code from the project's terminal
	workbox inject:manifest

	//Add the amp-install-serviceworker JavaScript to the end of the head section of each AMP page
	<script async custom-element="amp-install-serviceworker"
	src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

	//Next, add the component configuration to the bottom of each AMP page, right before the </body> tag:
	<amp-install-serviceworker
	src="/service-worker.js"
	layout="nodisplay"
	data-iframe-src="/install-service-worker.html">
	</amp-install-serviceworker>

	//Finally, write a file that registers the service worker. In project, create a install-service-worker.html
	//file with the following content:
	<!doctype html>
	<html>
	<head>
	<title>Installing service worker</title>
	<script type="text/javascript">
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js')
	.then(function(reg) {
	console.log('SW scope: ', reg.scope);
	})
	.catch(function(err) {
	console.log('SW registration failed: ', err);
	});
	};
	</script>
	</head>
	<body>
	</body>

	//To cache pages the user has visited, we must add a route to the service worker.
	//Add the following code to the bottom of src/sw.js:
	workboxSW.router.registerRoute('/*', args => {
	if (args.event.request.mode !== 'navigate') {
	return workboxSW.strategies.cacheFirst().handle(args);
	}
	return workboxSW.strategies.networkFirst().handle(args);
	});

	//We still need to configure the AMP runtime to be cached to be completely offline
	//Append the following route to src/sw.js:
	workboxSW.router.registerRoute(/(.)cdn\.ampproject\.org(.)/,
	workboxSW.strategies.staleWhileRevalidate()
	);

	//users should get an offline page when offline and trying to visit a page that has not been cached
	//In project, create a file called offline.html and add this code:
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>The Photo Blog - Offline</title>
	<meta name="viewport"
	content="width=device-width,minimum-scale=1,initial-scale=1">
	</head>
	<body>
	<h1>You are Offline</h1>
	</body>
	</html>

	//In workbox-cli-config.js, add offline.html to the list of static files to cache in the staticFileGlobs:
	"offline.html"

	//In src/sw.js, add a .then after the workboxSW.strategies.networkFirst().handle(args) method call to return
	// the offline page when a request fails. below is the snippet
	.then(response => {
	if (!response) {
	return caches.match('offline.html');
	}
	return response;
	});

	//create a manifest file from https://app-manifest.firebaseapp.com/ to enable the app become installable
	//like a native app and add it to the root of your project or use this manifest
	{
	"name": "AMP PWA Codelab",
	"short_name": "AMP PWA Codelab",
	"theme_color": "#00796b",
	"background_color": "#00796b",
	"display": "standalone",
	"start_url": "/index.html",
	"icons": [
	{
	"src": "icons/icon-72x72.png",
	"sizes": "72x72",
	"type": "image/png"
	},
	{
	"src": "icons/icon-96x96.png",
	"sizes": "96x96",
	"type": "image/png"
	},
	{
	"src": "icons/icon-128x128.png",
	"sizes": "128x128",
	"type": "image/png"
	},
	{
	"src": "icons/icon-144x144.png",
	"sizes": "144x144",
	"type": "image/png"
	},
	{
	"src": "icons/icon-152x152.png",
	"sizes": "152x152",
	"type": "image/png"
	},
	{
	"src": "icons/icon-192x192.png",
	"sizes": "192x192",
	"type": "image/png"
	},
	{
	"src": "icons/icon-384x384.png",
	"sizes": "384x384",
	"type": "image/png"
	},
	{
	"src": "icons/icon-512x512.png",
	"sizes": "512x512",
	"type": "image/png"
	}
	]
	}

	//now add link the manifest.json file to all the amp-pages .
	<link rel="manifest" href="/manifest.json">

	//In workbox-cli-config.js, add index.html and the icons to
	//the list of static files to cache in the staticFileGlobs.

	"index.html",
	"icons/*."

	//Also add a templatedUrls property
	"templatedUrls": {
	"/": ["index.html"]
	}

	//now lets regenerate our service worker by typing the following command
	workbox inject:manifest

	//feel free to deploy the app