标签:
Link to CodeLab
In this codelab, we‘ll retrace those steps but this time we‘ll use a tool called sw-precache to add offline functionality with only six lines of code. It‘s never been easier to add service worker support to an existing app, and we‘ll show you how in this codelab.
Learning:
Install:
git clone https://github.com/GoogleChrome/airhorn.git
cd airhorn git checkout code-lab
npm install
npm install --save-dev sw-precache cd app python -m SimpleHTTPServer 3000
Gulp:
// Generate sw.js gulp.task(‘generate-service-worker‘, function(callback) { var path = require(‘path‘); var swPrecache = require(‘sw-precache‘); var rootDir = ‘app‘; swPrecache.write(path.join(rootDir, ‘sw.js‘), { staticFileGlobs: [rootDir + ‘/**/*.{js,html,css,png,jpg,gif,mp3}‘], stripPrefix: rootDir }, callback); });
Run:
gulp generate-service-worker
Then in app folder, you should see sw.js file generated.
HTML: inisde index.html:
<script> if (‘serviceWorker‘ in navigator) { navigator.serviceWorker.register(‘/sw.js‘).then(function() { console.log("Service Worker Registered"); }); } </script>
cd app python -m SimpleHTTPServer 3000
Open chrome://serviceworker-internals/
in Chrome. This will show you a list of all the registered service workers, which you can use to verify your service worker has indeed properly registered.
Kill the serve and reload the page, everything should work as the same.
标签:
原文地址:http://www.cnblogs.com/Answer1215/p/5525508.html