Serve the app shell from the cache

Service workers provide the ability to intercept requests made from our eProgressive Web App and handle them within the service worker. That means we can determine how we want to handle the request and potentially serve our own cached response.

TABLE OF CONTENTS

1. Introduction to Progressive Web apps

2. Why Progressive Web Apps?

3. Objective of the Project

4. Advantages of Progressive Web App

5. Advantages of PWA over Native Apps

6. Benefits of Progressive Web App

7. Use Cases

8. The Future of PWA

9. Software Requirements

10. Reference

11. REQUIREMENTS GATHERING

12. Introduction to PWA Architectures

13. Introduction to PWA Architectures

14. Using libraries to code service workers

15. Add to Homescreen

16. Push Notifications

17. Payments and Credential Management

18. Recommended patterns for PWAs

19. CLUSTER AND OUTLINE OF PAGES

20. Code Base

21. Serve the app shell from the cache

22. Automate development tasks

23. Creating a package.json

24. Customizing the init process

25. Managing dependency versions

Serve the app shell from the cache

Service workers provide the ability to intercept requests made from our Progressive Web App and handle them within the service worker. That means we can determine how we want to handle the request and potentially serve our own cached response.

For example:

Let's now serve the app shell from the cache. Add the following code to the bottom of your service-worker.js file:

Stepping from inside, out, caches.match() evaluates the web request that triggered the fetch event, and checks to see if it's available in the cache. It then either responds with the cached version, or uses fetch to get a copy from the network. Theresponse is passed back to the web page with e.respondWith().

1.8 Gulpfile.js

All projects that use gulp need to have the gulp package installed locally.

From app/ (the project root), run the following in the command line:

npm init -y

Note that a package.json file was created. Open the file and inspect it.

From the same directory, run the following in the command line:

npm install gulp --save-dev

In gulpfile.js, replace the TODO 3 comment with the following:

gulpfile.js

var gulp = require('gulp');

Explanation

We start by generating package.json with npm init (the -y flag uses default configuration values for simplicity). This file is used to keep track of the packages that your project uses, including gulp and its dependencies.

The next command installs the gulp package and its dependencies in the project. These are put in anode_modules folder. The --save-dev flag adds the corresponding package (in this case gulp) to package.json. Tracking packages like this allows quick re-installation of all the packages and their dependencies on future builds (the npm install command will read package.json and automatically install everything listed).

Finally we add code to gulpfile.js to include the gulp package. The gulpfile.js file is where all of the gulp code should go.

Minify JavaScript

This exercise implements a simple task to minify (also called "uglify" for JavaScript) the app/js/main.js JavaScript file.

From app/, run the following in the command line:

npm install gulp-uglify --save-dev

Now replace TODO 4.1 in gulpfile.js with the following code:

gulpfile.js

var uglify = require('gulp-uglify');

Replace TODO 4.2 with the following code:

gulpfile.js

gulp.task('minify', function() {
gulp.src('js/main.js')
.pipe(uglify())
.pipe(gulp.dest('build'));
});

Save the file. From app/, run the following in the command line:

gulp minify

Open app/js/main.js and app/build/main.js . Note that the JavaScript from app/js/main.js has been minified intoapp/build/main.js.

Explanation

We start by installing the gulp-uglify package (this also updates the package.json dependencies). This enables minification functionality in our gulp process.

Then we include this package in the gulpfile.js file, and add code to create a minify task. This task gets theapp/js/main.js file, and pipes it to theuglify function (which is defined in the gulp-uglify package). The uglify function minifies the file, pipes it to the gulp.dest function, and creates a build folder containing the minified JavaScript.

Prefix CSS

In this exercise, you add vendor prefixes to the main.css file.

Read the documentation for gulp-autoprefixer . Using section 4 of this lab as an example, complete the following tasks:

1. Install the gulp-autoprefixer package

2. Require the package in gulpfile.js

3. Write a task in gulpfile.js calledprocessCSS, that adds vendor prefixes to theapp/styles/main.css and puts the new file in app/build/main.css

Test this task by running the following (from app/) in the command line:

gulp processCSS

Open app/styles/main.css and app/build/main.css. Does the box-container class have vendor prefixes for the display: flex property?

Optional : Read the gulp-sourcemaps documentation and incorporate sourcemap generation in the processCSS task (not in a new task).

Hint: The gulp-autoprefixer documentation has a useful example. Test by rerunning theprocessCSS task, and noting the sourcemap comment in the app/build/main.css file.