开源项目 `pwa` 使用教程

开源项目 pwa 使用教程

pwaAn opinionated progressive web app boilerplate项目地址:https://gitcode.com/gh_mirrors/pwa1/pwa

1. 项目的目录结构及介绍

pwa/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   ├── index.js
│   └── service-worker.js
├── public/
│   ├── index.html
│   └── manifest.json
├── package.json
├── README.md
└── .gitignore

目录结构介绍

• src/: 源代码目录，包含所有前端资源。

  • assets/: 静态资源文件，如图片、字体等。
  • components/: 项目中使用的React组件。
  • pages/: 页面组件，每个文件对应一个页面。
  • styles/: 样式文件，包含全局样式和组件样式。
  • index.js: 项目的入口文件。
  • service-worker.js: 服务工作线程文件，用于实现离线访问等功能。

• public/: 公共资源目录，包含不需要经过Webpack处理的文件。

  • index.html: 主HTML文件，项目的入口页面。
  • manifest.json: PWA的配置文件，用于定义应用的元数据。

• package.json: 项目的配置文件，包含依赖、脚本等信息。

• README.md: 项目说明文档。

• .gitignore: Git忽略文件配置。

2. 项目的启动文件介绍

index.js

index.js 是项目的入口文件，负责初始化React应用并注册服务工作线程。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.register();

service-worker.js

service-worker.js 是服务工作线程文件，用于缓存资源、实现离线访问等功能。

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/static/css/main.css',
  '/static/js/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

3. 项目的配置文件介绍

package.json

package.json 是项目的配置文件，包含项目的基本信息、依赖和脚本。

{
  "name": "pwa",
  "version": "1.0.0",
  "description": "A Progressive Web App",
  "main": "src/index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

manifest.json

manifest.json 是PWA的配置文件，用于定义应用的元数据，如名称、图标、启动URL等。

{
  "short_name": "PWA",
  "name": "Progressive Web App",
  "icons": [
    {
      "src": "icon-192x192.png",
     

pwaAn opinionated progressive web app boilerplate项目地址:https://gitcode.com/gh_mirrors/pwa1/pwa