码迷,mamicode.com
首页 > 系统相关 > 详细

[PWA] sw-precache

时间:2016-05-25 01:56:00      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:

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:

  • What the sw-precache tool is and how it can help you be more productive
  • How to add a basic service worker to an existing project using sw-precache

 

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>

 

Verify Your App:

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.

 

[PWA] sw-precache

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5525508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!