The original link

PWA concept

PWA (Progressive Web App in full) is a new method to improve Web App experience. Through a series of improvements to the application, PWA greatly improves the security, performance and experience of the application, making it have the advantages of both Web App and Native App.

The following characteristics can explain the choice of PWA:

  1. No limit on browsers or devices: The Web application can be used by browsers and devices that can access the Web application.
  2. Native app experience: Manifest setup
  3. Constant updates: Thanks to the Service worker, the app is always up to date;
  4. Offline access: Credit to the Service worker;
  5. Security: Access through HTTPS ensures security.
  6. Easy installation: can be deleted at any time, install at any time, no need to download, save traffic;
  7. Easy deployment: this advantage should be experienced by developers, no tedious packaging, encryption, signature, audit process.

In short, your Web site can be added to the home screen of a mobile device, accessed as a native app, and supported on both Android and iOS.

The basic conditions

A qualified PWA application must meet the following conditions:

  1. Web applications support HTTPS
  2. Have a Web App Manifest file
  3. The Service worker was successfully registered
  4. The viscosity of the site meets certain conditions

The implementation process

Now that I know what PWA is, it’s time to start developing it. Since PWA is based on Web Apps, Web Apps can be implemented with any front-end framework available. Angular + Ionic is used here. The reason why I chose Ionic is to make the UI of the app more similar to the native app and enhance the user experience.

Creating an Ionic app

Run the following command to create an application:

ionic start pwa-app sidemenu --type=angular
Copy the code

This command will create an Ionic app with a menu on the left. Run Ionic Serve to see what happens.

To improve the application

PWA applications require Manifest files and register Service woker, which developers can add manually, but Angular already provides PWA components to make these improvements easier.

Run the following command to install the PWA component:

ng add @angular/pwa
Copy the code

This component provides the following improvements to the application:

The following components are installed:

"@ presents/pwa" : "^ 0.12.4", "@ presents/service - worker" : "^ 7.2.2",Copy the code

The following files are added:

src/ngsw-config.json
src/manifest.json
src/assets/icons/icon-128x128.png
src/assets/icons/icon-144x144.png
src/assets/icons/icon-152x152.png
src/assets/icons/icon-192x192.png
src/assets/icons/icon-384x384.png
src/assets/icons/icon-512x512.png
src/assets/icons/icon-72x72.png
src/assets/icons/icon-96x96.png
Copy the code

Modified the following files:

App. The module. Ts:

import { ServiceWorkerModule } from "@angular/service-worker"; Imports: [... ServiceWorkerModule. Register ('ngsw-worker.js', {enabled: environment. Production})]Copy the code

Index.html:

.<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1976d2">.Copy the code

Presents. Json file:

"assets": [
    ...
    "src/manifest.json"
],
Copy the code

At this point, a basic framework for PWA applications is in place.

PWA application interface Settings

In the SRC directory, you can find a file called manifest.json that allows developers to control PWA additions to the desktop, allowing customization of desktop ICONS, urls, and more. The following is an example:

{
    "name": "app"."short_name": "app22"."theme_color": "#1976d2"."background_color": "#fafafa"."display": "standalone"."scope": "/"."start_url": "/"."icons": [{"src": "assets/icons/icon-72x72.png"."sizes": "72x72"."type": "image/png"},... ] }Copy the code

The parameters are described as follows:

  1. Name: Indicates the name displayed on splash when the application is started on the main screen
  2. Short_name: the default name displayed when added to the main screen in the browser
  3. Theme_color: the theme color
  4. Background_color: indicates the background color
  5. Display: The mode in which the PWA application is displayed. Available values are fullscreen, standalone, or browser. The standalone value is the look and feel of the native application
  6. ICONS: Sets the ICONS of the PWA application
  7. Start_url: application startup link

For details on the MANIFEST file, see the Resources documentation.

Note: The above configuration is only valid for Android phones. For iOS, you need to set it in the index.html file.

The Settings are as follows:

<! -- Apple app name -->
<meta name="apple-mobile-web-app-title" content="Wallet">

<! Allow Web content to be displayed in standalone mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<! -- Custom Apple icon -->
<link rel="apple-touch-icon" href="assets/ios/icon/icon-76.png">

<! Use different ICONS for different screen sizes -->
<link rel="apple-touch-icon" sizes="120x120" href="assets/ios/icon/icon-76.png">.<! -- Custom Apple startup screen image -->
<link rel="apple-touch-startup-image" href="assets/ios/splash/Default@2x~universal~anyany 2732 2732.png">

<! Customize the apple startup screen for different screen sizes -->
<! -- iPhone Xs Max (1242px x 2688px) -->
<link href="/assets/ios/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />.<! Set the status bar style, black-always, black, default-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Copy the code

The Service worker configuration

Json file named ngsw-config.json can be found in the SRC directory. The following is an example of the cache policy set in this file:

{
    "index": "/index.html"."assetGroups": [{"name": "app"."installMode": "prefetch"."resources": {
                "files": [
                "/favicon.ico"."/index.html"."/*.css"."/*.js"]}},... ] }Copy the code

The parameters are described as follows:

  1. Index: Cache path, usually /index.html
  2. AssetGroups: Groups assets that need to be cached
  3. Name: Indicates the name of each group
  4. InstallMode, updateMode: initial cache, update cache modes, optional: prefetch(pre-cache), lazy(cache only on request)
  5. Resources: cached resource files

You can see the contents of the Cache in Chrome’s debug tools -> Application -> Cache Storage.

Start the application using http-server

Since the Service worker configuration takes effect in the production environment, you can use the HTTP-server component to create a Web server during the development test. The installation command is as follows:

npm install -g http-server
Copy the code

Product packages for building applications:

ionic build --prod

http-server ./www -p 8000
Copy the code

To access the application, use either 127.0.0.1:8000 or localIP:8000.

Test the PWA effect

Using a browser

The Chrome browser was used to test the effect. Enter 127.0.0.1:8000 and open Application -> Manifest in Chrome debugger. See the following image:

Json file. Click “Add to Homescreen” and the browser pops up:

If this dialog box does not appear, you can see the cause of the error on the Console, which is probably because the Service Worker was not registered successfully. You can view Service worker content in Service Workers:

Real machine test

You can also use a browser on your mobile device to access localIP:8000 and add this page to your mobile device’s desktop to see the PWA effect. The iOS emulator in Xcode can also be tested. There are some differences between Android and iOS in the use of PWA, for example, iOS can change the name of the PWA application, Android can set the screen orientation, etc. There are also some limitations, such as iOS not being able to use Native apis. For details, see Reference 6.

Benchmarking Web applications with Lighthouse

We can also take a more professional approach to evaluating applications. Lighthouse is recommended. It is an open source automated Web application evaluation tool, which can be used to improve Web applications by referring to its evaluation results. If you’re using Chrome, you can either install the Lighthouse component, or use the command line to improve it. Execute under application:

NPM install -g lighthouse lighthouse your-url-path --view // The view argument opens the test report directly in the browser, for example: Lighthouse - view at http://127.0.0.1:8000/Copy the code

This completes a PWA application that can be used by browsers, Android, and IOS. Comfortable!

Ionic PWA Toolkit

In addition to the configuration methods described above, Ionic also offers an out-of-the-box PWA gadget, the Ionic PWA Toolkit, that allows you to create PWA applications. But this tool is Stencil based, so we’ll look at it later.

summary

This approach is not limited to Ionic or Angular. PWA application is a Web application. Theoretically, any Web application can support PWA as long as it is modified according to PWA standards. However, before modification, existing applications need to be evaluated to see whether they are in contact with Android or iOS restrictions on PWA.

Reference documentation

  1. Manifest file description
  2. Ionic4 implements PWA
  3. Lighthouse is introduced
  4. The Service worker configuration
  5. Improvements to PWA in iOS 12.2
  6. PWA 登陆 iOS