PWA的学习之路

PWA Overview

What is PWA?

MDN explains

PWA (Progressive Web App) leverages modern Web API and traditional progressive enhancement strategies to create cross-platform Web applications. These applications are ubiquitous and feature-rich, offering the same user experience advantages as native applications.

• A new method to enhance WebApp experience, providing users the same native app experience
• Creating cross-platform Web desktop applications

Summary: PWA achieves this because it doesn't refer to a specific technology, but rather adds Manifest configuration files and Service Worker along with caching, allowing existing applications to have install and offline functionality.

PWA Advantages

• Progressive
• Adding PWA functionality on top of the original application without affecting it
• Installable/ native experience
• Can be added to desktop as a native App, with startup animations and hidden address bars
• Offline functionality
• Implemented via Service Worker and cache api to enable offline access to some features
• Push notifications
• Click on push messages to quickly open the app, promoting user engagement

This demonstrates the mobile Demo running effect

Dynamic GIF

PWA Technical Points

The source code can be downloaded here.

A standard PWA application should have the following 3 characteristics:

• https access or localhost
• Service Worker
• Manifest

Manifest

manifest.json allows the application to add a desktop icon. Configuration file content includes application name, icon, startup screen, theme color, and application style.

Compared to traditional WebApp entry points (URL, bookmark, bookmark), PWA applications have a more direct and convenient entry point.

• Add desktop icon
• Add startup animation to avoid white screen
• Hide default browser UI to look more like a native app

Import manifest.json file in index.html

<link rel="manifest" href="/manifest.json">

Common configuration information in manifest.json:

{
    "name": "pwa-basic",
    "short_name": "PWA Basic",
    "start_url": "/index.html",
    "icons":[
        {
            "src": "/images/icon128.png",
            "sizes": "128x128",
            "type":"image/png"
        },
        {
            "src": "/images/icon144.png",
            "sizes": "144x144",
            "type":"image/png"
        }
    ],
    "description": "This is a basic PWA demo",
    "background_color": "skyblue",
    "theme_color": "black",
    "display": "standalone"
}

• name is the application name, displayed when the app is installed, and shown below the startup screen
• short_name is the displayed name when the application name is too long
• start_url is the entry URL when the desktop icon is clicked
• icons are the desktop icons, displayed in the center of the startup screen
• description
• background_color is the background color of the startup screen
• theme_color is the theme color
• display
  • fullscreen displays the application full screen, using all available display areas and excluding the status bar
  • standalone excludes the address bar, with the status bar visible
  • minimal-ui has the status bar and the browser address bar

More configuration options can be found here.

Cache API

MDN-Cache文档

Service Worker

What is a Service Worker?

MDN explains

Service workers act as a proxy server between Web applications, browsers, and the network (available when online). This API aims to create an effective offline experience, intercepting network requests within the scope and taking appropriate actions based on whether the network is available.

Functions of Service Worker (in addition to Web Worker functionality)

• Installed successfully, running in the browser background, intercepting all http requests in the scope
• Using Cache API to control offline content (controlled by developers)
• Must use https. Local development environments can use localhost instead

Service Worker compatibility: 94% of browsers support it

image.png

Usage of Service Worker

Below is referred to as SW

SW is independent of the lifecycle of web pages. It is divided into 5 steps: registration, installation (success/failure), activation, running, and destruction. The following diagram shows this:

Reference network image

SW Usage

Installation

npm install -D vite-plugin-pwa

vite.config.js configuration

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
            mode: 'development',
            workbox: {
                // 省略
            }
        })
  ]
}

More details on vite-plugin-pwa plugins

Webpack Projects

Vue Projects

A new Vue project can choose to support PWA as shown in the image

Enterprise WeChat 20220506-221636.png

If not, add the @vue/cli plugin to enable PWA support. Run vue add pwa to add support for PWA.

See the configuration documentation for details.

React Projects

New React project using cra scaffolding with PWA template, as follows:

create-react-app my-app --template cra-template-pwa

Old projects can add webpack configuration and manifest.json to register sw.js manually.

Vite Projects

Installation

npm install -D vite-plugin-pwa

vite.config.js configuration

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
            mode: 'development',
            workbox: {
                // 省略
            }
        })
  ]
}

More details on vite-plugin-pwa plugins