Skip to content

Instantly share code, notes, and snippets.

@sebastianbenz
Last active May 12, 2020 16:40
Show Gist options
  • 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 ⚡>
<head>
<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="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
<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">
<title>{{title}}</title>
</head>
<body>
<h1>Hello AMPHTML World!</h1>
<amp-install-serviceworker src="/sw.js" data-iframe-src="/sw.html" layout="nodisplay"></amp-install-serviceworker>
</body>
</html>
<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
};
</script>
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
workbox.skipWaiting();
workbox.clientsClaim();
// 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 = [
'https://cdn.ampproject.org/v0.js',
// Add AMP extensions used on your pages
// Add fonts, icons, logos used on your pages
];
if (OFFLINE_PAGE) {
urls.push(OFFLINE_PAGE);
}
event.waitUntil(
caches.open(workbox.core.cacheNames.runtime).then(cache => cache.addAll(urls))
);
});
// Enable navigation preload . This is only necessary if navigation routes are not cached,
// see: https://developers.google.com/web/tools/workbox/modules/workbox-navigation-preload
workbox.navigationPreload.enable();
// Fallback to an offline page for navgiation requests if there is no
// network connection
let navigationStrategy;
if (OFFLINE_PAGE) {
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: [],
});
workbox.routing.registerRoute(navigationRoute);
// By default Use a network first strategy to ensure the latest content is used
workbox.routing.setDefaultHandler(workbox.strategies.networkFirst());
// Serve the AMP Runtime from cache and check for an updated version in the background
workbox.routing.registerRoute(
/https:\/\/cdn\.ampproject\.org\/.*/,
workbox.strategies.staleWhileRevalidate()
);
// Cache Images
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}),
);
// Google Font Caching
// see https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
workbox.routing.registerRoute(
new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
workbox.strategies.cacheFirst({
cacheName: 'googleapis',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200]
}),
new workbox.expiration.Plugin({
maxEntries: 30,
}),
],
}),
);
@westonruter
Copy link

@anujsinghtomar
Copy link

anujsinghtomar commented Feb 21, 2019

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

Thanks

@seomaz
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