[PWA] Sw-precache

Source: Internet
Author: User
Tags git clone

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 what in this codelab.

Learning:

    • What's the Sw-precache tool is and how it can help you being 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 Airhorngit Checkout code-Lab
NPM Install
3000

Gulp:

//Generate sw.jsGulp.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 the app folder, you should see Sw.js file generated.

HTML:INISDE index.html:

            <Script>                  if ('Serviceworker' inchNavigator) {Navigator.serviceWorker.register ('/sw.js'). Then (function() {Console.log ("Service Worker Registered");                  }); }            </Script>

Verify Your App:
3000

Open in chrome://serviceworker-internals/ Chrome. This would show you a list of all the registered service workers, which you can use to verify your service worker have Indee D properly registered.

Kill the serve and reload the page, everything should work as the same.

[PWA] Sw-precache

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.