zoukankan      html  css  js  c++  java
  • [PWA] sw-precache

    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.

  • 相关阅读:
    Netty之ProtoBuf(六)
    Netty对WebSocket的支持(五)
    Netty之心跳检测技术(四)
    Netty之多用户的聊天室(三)
    Docker Compose 笔记
    vue.js学习笔记
    powerdesigner 生成C#code 实体 模板设备
    .net 接收post 的参数 加载xml
    powerdesigner 生成实体代码 附加生成xml
    PostgreSql 获取所有的表、视图、字段、 主键
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5525508.html
Copyright © 2011-2022 走看看