PWA Learning and Practice series articles have been compiled into gitbook-PWA Learning Handbook, and the text has been synchronized to learning-PWA-ebook. Please indicate the author and source of reprint.

As one of the hottest technology concepts of the year, PWA has great significance for improving the security, performance and experience of Web applications. It is worth learning and understanding.

This series of articles, PWA Learning & Practicing, will take apart the technologies behind PWA step by step, using example code to explain how they can be used. Because of the numerous technical points and detailed knowledge in PWA, I sorted them out during the learning process and produced a series of articles entitled “PWA Learning and Practice”, hoping to provide you with a comprehensive understanding of various technologies in PWA. Those who are interested in PWA are welcome to follow.

First, a quick look at PWA.

1. What is PWA

PWA, or Progressive Web App, is a new way to improve the experience of Web apps, giving users the experience of native apps.

We need to understand that PWA is not a technology, or a new product; It’s a collection and application of Web technologies and standards. By applying these new technologies and standards, we can optimize our Web apps in terms of security, performance, and experience. So, PWA is still essentially a Web App.

Therefore, learning PWA is really about understanding and mastering the technology behind these PWA. This series of articles introduces the technologies involved in PWA, along with code examples to show how they can be used. I hope that through this series of articles, we can have a deeper understanding of PWA technology. The incremental nature of PWA also allows us to use these technologies “incrementally” in our business, optimizing our products under the premise of cost control.

2. Some techniques in PWA

PWA itself is a collection of concepts, not a single technology, but a set of Web technologies and Web standards to optimize the security, performance, and experience of Web apps. Some of the technical concepts involved include:

  • Web App Manifest
  • Service Worker
  • Cache Cache API
  • Push&Notification Push&Notification
  • Background Sync Background synchronization
  • Responsive design
  • …

These skills are essential to learning PWA. With Apple starting to support PWA in iOS Safari (some of these technologies), the stage for PWA is getting bigger.

3. The DEMO project

In order to cooperate with the study of relevant knowledge in PWA, I specially created a Demo Web App —

A demo based on keywords to query book information (github.com/alienzhou/l…

The Web App doesn’t have any PWA capabilities at first. I will use this demo as an example in this series of articles, explaining the techniques and applying them to the demo. That said, in this series of articles, I’ll be working with you to upgrade a common web application to a simple PWA and learn together.

First, a quick introduction to the demo. This is an application for searching book information by keywords. Users input keywords in the front end, click search, and will request our own server, and the server uses Douban BOOKS API V2 to obtain data.

The project uses Koa to build the Node server, so node version >7.6.0 is required. NVM can be used to switch to the appropriate node version.

To run the project, first

git clone [email protected]:alienzhou/learning-pwa.git
Switch to the base project branch
git checkout basic
Copy the code

Note that you need to switch to the Basic branch, the master branch is the latest demo code after the PWA upgrade. Only in the BASIC branch can you see the original Web App. Next, install dependencies:

npm install
Copy the code

Finally, run the project:

npm run start
Copy the code

You can then petition the item at 127.0.0.1:8085.

The code in the basic demo is relatively simple, so I won’t go over the code details in the demo here. The front-end code is stored in the public directory. The specific structure is as follows:

| - public -- - | -- - index. The HTML / / front page | | - index. The js / / browser JavaScript | | - style. The CSS / / style file | | - img / / pictures folder | - app. Js / / start node service entrance | - util. Js/library/node service toolsCopy the code

It is worth mentioning that the code in subsequent articles will be in the form of branches, and the final code in each article will be stored in a corresponding branch. You can easily switch branches to see sample code for each article.

  • Basic branch: Basic project Demo, a general book search application (website);
  • Manifest branch: Based on basic branch, add manifest and other functions;
  • Sw-cache branch: based on the MANIFEST branch, add caching and offline functions;
  • Master branch: The latest code for the application.
  • …

As the first article in this series, this article provides a brief introduction to PWA and its related technical concepts. By learning PWA, we can quickly apply its excellent techniques to our work. In the next article, I’ll show you how to use Manifest to make your Web App “more Native” and have an App Shell. To learn more about PWA, follow the PWA Learning & Practice series.

Without further ado, let’s learn more about PWA-related technologies.

PWA Technology Learning and Practice series of articles

  • Start your PWA Learning Journey in 2018
  • Learn to Use Manifest to Make your WebApp More “Native”
  • Start making your WebApp available offline today
  • Article 4: TroubleShooting: TroubleShooting FireBase Login Authentication Failures
  • Keep in touch with Your Users: The Web Push feature
  • How to Debug? Debug your PWA in Chrome
  • Enhanced Interaction: Use the Notification API for reminders
  • Chapter 8: Background Data Synchronization using Service Worker
  • Chapter nine: Problems and solutions in PWA practice
  • Resource Hint – Improving page loading performance and Experience
  • Part 11: Learning offline Strategies from workbox