Last active
July 26, 2018 20:05
-
-
Save jeffposnick/6710363bc22754bd4e1987d59cb5b7f6 to your computer and use it in GitHub Desktop.
Testing manifest.json interception by a service worker.
This file contains hidden or 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, initial-scale=1"> | |
| <title>Manifest Test</title> | |
| <link rel="manifest" href="manifest.json"> | |
| <link rel="icon" href="icon.png"> | |
| </head> | |
| <body> | |
| <p> | |
| This tests whether the web app manifest request triggers a service worker's <code>fetch</code> event handler. | |
| </p> | |
| <p> | |
| On the desktop, visit the Application DevTools panel, then the Manifest sub-panel, to force a request for <code>manifest.json</code>. | |
| Check the JS console to see a log of all <code>fetch</code> events triggered on the service worker. | |
| </p> | |
| <script> | |
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('sw.js'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| self.addEventListener('activate', () => { | |
| self.clients.claim(); | |
| console.log('The service worker is now active and in control.'); | |
| }); | |
| self.addEventListener('fetch', (event) => { | |
| console.log('Incoming fetch event for', event.request.url); | |
| if (event.request.url.endsWith('manifest.json')) { | |
| const manifest = `{ | |
| "short_name": "Manifest test", | |
| "name": "Progressive Web App", | |
| "icons": [{ | |
| "src": "https://so-pwa.firebaseapp.com/icon.png", | |
| "sizes": "512x512", | |
| "type": "image/png" | |
| }], | |
| "start_url": "/?utm_source=homescreen", | |
| "display": "minimal-ui", | |
| "background_color": "#ededed", | |
| "theme_color": "#0093c4" | |
| }`; | |
| const manifestResponse = new Response(manifest, {headers: {'content-type': 'application/json'}}); | |
| event.respondWith(manifestResponse); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment