Skip to content

Instantly share code, notes, and snippets.

Last active May 12, 2020 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sebastianbenz/1d449dee039202d8b7464f1131eae449 to your computer and use it in GitHub Desktop.
Save sebastianbenz/1d449dee039202d8b7464f1131eae449 to your computer and use it in GitHub Desktop.
A minimal serviceworker for websites built with AMP.
<!doctype html>
<html ⚡>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="{{desc}}.">
<link rel="preload" as="script" href="">
<script async src=""></script>
<script async custom-element="amp-install-serviceworker" src=""></script>
<style amp-custom>
h1 {
margin: 1rem;
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href="index.html" />
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/images/icons/favicon.ico">
<h1>Hello AMPHTML World!</h1>
<amp-install-serviceworker src="/sw.js" data-iframe-src="/sw.html" layout="nodisplay"></amp-install-serviceworker>
<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
if('serviceWorker' in navigator) {
// Provide an URL to enable a custom offline page
const OFFLINE_PAGE = "/offline.html";
//Pre-cache the AMP Runtime
self.addEventListener('install', event => {
const urls = [
// Add AMP extensions used on your pages
// Add fonts, icons, logos used on your pages
event.waitUntil( => cache.addAll(urls))
// Enable navigation preload . This is only necessary if navigation routes are not cached,
// see:
// Fallback to an offline page for navgiation requests if there is no
// network connection
let navigationStrategy;
const networkFirstWithOfflinePage = async (args) => {
const response = await workbox.strategies.networkFirst().handle(args);
if ( response) {
return response;
return caches.match(OFFLINE_PAGE);
navigationStrategy = networkFirstWithOfflinePage;
} else {
navigationStrategy = workbox.strategies.networkFirst();
const navigationRoute = new workbox.routing.NavigationRoute(navigationStrategy, {
// Optionally, provide a white/blacklist of RegExps to determine
// which paths will match this route.
// whitelist: [],
// blacklist: [],
// By default Use a network first strategy to ensure the latest content is used
// Serve the AMP Runtime from cache and check for an updated version in the background
// Cache Images
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
// Google Font Caching
// see
new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
cacheName: 'googleapis',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200]
new workbox.expiration.Plugin({
maxEntries: 30,
Copy link

Copy link

anujsinghtomar commented Feb 21, 2019

In this line of code <meta name="description" content="{{desc}}.">
Will you please explain how you adding dynamic description in AMP page.


Copy link

seomaz commented May 12, 2020

@sebastianbenz is working ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment