开源项目 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