-
-
Save sebastianbenz/1d449dee039202d8b7464f1131eae449 to your computer and use it in GitHub Desktop.
A minimal serviceworker for websites built with AMP.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <title>installing service worker</title> | |
| <script type='text/javascript'> | |
| if('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('/sw.js'); | |
| }; | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| }), | |
| ], | |
| }), | |
| ); |
Hi,
In this line of code <meta name="description" content="{{desc}}.">
Will you please explain how you adding dynamic description in AMP page.
Thanks
@sebastianbenz is working ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@sebastianbenz Re: Font caching, should this also include support for:
As you know, from https://www.ampproject.org/docs/design/responsive/custom_fonts#1.-using-%3Clink%3E