Introduction to Progressive Web Apps:

Progressive Web Apps are experiences that combine the best of the web and the best of apps.

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

Creating a package.json

To create a package.json run:

> npm init

This will initiate a command line questionnaire that will conclude with the creation of a package.json in the directory you initiated the command.

The --yes init flag

You can get a default package.json by running npm init with the --yes or -y flag:

> npm init --yes

This will ask no questions, and instead will generate a default package.json using information extracted from the current directory.

> npm init --yes

Wrote to /home/ag_dubs/my_package/package.json:

{

"name": "my_package",

"description": "",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"repository": {

"type": "git",

"url": "https://github.com/ashleygwilliams/my_package.git"

},

"keywords": [],

"author": "",

"license": "ISC",

"bugs": {

"url": "https://github.com/ashleygwilliams/my_package/issues"

},

"homepage": "https://github.com/ashleygwilliams/my_package"

}

You can also set several config options for the init command. Some useful ones:

> npm set init.author.email "wombat@npmjs.com"

> npm set init.author.name "ag_dubs"

> npm set init.license "MIT"

If there is no description field in the package.json, npm uses the first line of the README.md or README instead. The description helps people find your package on npm search, so it's definitely useful to make a custom description in the package.json to make your package more discoverable.