Your first Progressive Web App

What is Progressive Web App?

Progressive Web Apps are:

• Progressive Enhancement -enables every user to use whatever browser the user uses, as it is always the principle of progressive enhancement.
• Responsive user Interface -adapts to any environment: desktop PC, Smartphone, laptop, or other device.
• do not rely on network connectivity -through service workers you can work offline or in very poor speed.
• native -like applications-there is a native app-based interaction and navigation to a user-friendly experience, as it is built on the app shell model.
• Continuous Update -benefit from the update process of the service worker, and the app is always up to date.
• Secure -provides services over HTTPS to prevent network snooping and ensure that content is not tampered with.
• discoverable -thanks to the manifests metadata and service worker registrations, the search engine is able to find Web applications.
• Revisit-it's easy to get users to visit again with features such as message push.
• installable-allows users to keep apps that are useful to them on the home screen and does not need to be through the store.
• connectivity -easily share apps with URLs and run without complex installations.

What is an app shell (app shell)

The app shell is the most basic HTML, CSS, and JavaScript required for the application's user interface, and a component to ensure that the application has a lot of performance. Its first load will be very fast and is cached immediately after loading. This means that the application's shell does not need to be downloaded each time it is used, but only the required data is loaded.

The structure of the application shell is divided into the core base components of the application and the UI that hosts the data. All UI and infrastructure components are cached locally using a service worker, so in subsequent loads the Progressive Web App only needs to load the required data instead of loading all of the content.

In other words, the shell of the app is equivalent to the code that was packaged in the native app that was published to the store. It's the core component that allows your app to run, but it doesn't contain data.

Why use a structure based on an application shell?

Using the app shell-based architecture allows you to focus on speed, giving your Progressive Web app and native apps similar properties: Fast loading and flexible updates, all without the need for the App store.

Design the application shell

The first step is to design the core components

Ask yourself:

• Need to show immediately what's on the screen?
• What are the key UI components that our application needs?
• What resources are needed to apply the shell? Slices, JavaScript, style sheets, and so on.

We're going to create a weather app as our first Progressive Web app. Its core components include:

When designing a more complex application, the content does not need to be loaded for the first time, and can then be loaded on demand and then cached for the next use. For example, we can delay loading the Add City dialog until we finish rendering the first screen and have some free time.

Your first Progressive Web App