pwa-example:首先尝试PWA

  • Q6_938984
    了解作者
  • 2.1MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-28 04:56
    上传日期
ReactPWA 具有最佳开发人员体验的高度可扩展的渐进式Web应用程序基础。 添加到主屏幕,使您的应用程序像本机APP一样运行 如果您无法查看下面的gif,只需单击“ PWA国家Gif”或损坏的图像: 当前回购行动 要查看当前存储库的运行方式,请访问 先决条件 节点GYP 在构建应用程序时,我们正在使用图像压缩。 它需要额外的努力来压缩图像并将其转换为WebP。 好吧,NodeJS无法直接做到这一点,因此需要相同的构建工具。 npm i -g node-gyp 如果以上命令给您访问错误,请尝试使用SUDO! sudo npm i -g node-gyp 由于node-gyp依赖于“ python”,因此您可能会遇到Python PATH错误,请访问原始存储库以获取更多安装说明并解决问题节点GYP-https://github.com/nodejs/node-gyp
pwa-example-master.zip
内容介绍
[![Backers on Open Collective](https://opencollective.com/react-pwa/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-pwa/sponsors/badge.svg)](#sponsors) [![Dependencies Status](https://david-dm.org/Atyantik/react-pwa.svg)](https://david-dm.org/Atyantik/react-pwa) [![devDependencies Status](https://david-dm.org/Atyantik/react-pwa/dev-status.svg)](https://david-dm.org/Atyantik/react-pwa?type=dev) [![Build Status](https://travis-ci.org/Atyantik/react-pwa.svg?branch=master)](https://travis-ci.org/Atyantik/react-pwa) [![Known Vulnerabilities](https://snyk.io/test/github/atyantik/react-pwa/badge.svg)](https://snyk.io/test/github/atyantik/react-pwa) [![Greenkeeper badge](https://badges.greenkeeper.io/Atyantik/react-pwa.svg)](https://greenkeeper.io/) [![Join the chat at https://gitter.im/react-pwa](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-pwa/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link) # React PWA A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. [https://www.reactpwa.com is built with this awesome boilerplate. Why don't you check it out.](https://www.reactpwa.com/) ###### Add to home screen and make your application behave like a Native APP If you are not able to view the gif below, just click "PWA States Gif" or the broken image: [![PWA States Gif](https://media.giphy.com/media/xT9Igz9xhXychk8LyE/giphy.gif)](https://www.atyantik.com/wp-content/uploads/2017/10/PWA-States.png) #### Current Repo in Action To view how the current repository is running please visit [https://demo.reactpwa.com](https://demo.reactpwa.com) ### Prerequisite #### Node GYP We are using image compression while building the application. Its requires extra efforts to compress images and convert them to WebP. Well NodeJS cannot directly do it and thus requires build tools for the same. ```language-bash npm i -g node-gyp ``` if the above command give you ACCESS errors try it with SUDO! ```language-bash sudo npm i -g node-gyp ``` As node-gyp is dependent on "python" you might face Python PATH errors, please visit the original repo for more installation instructions and solve problems [NODE GYP - https://github.com/nodejs/node-gyp](https://github.com/nodejs/node-gyp) #### Windows Installing on Windows requires the `windows-build-tools`. Open a new terminal as an Administrator and run the following commands: `npm install --global --production windows-build-tools` `npm config set msvs_version 2015 --global` ### Quick start - Clone this repo using: `git clone --depth=1 https://github.com/Atyantik/react-pwa.git` - Move to the appropriate directory: `cd react-pwa`. - Use yarn to install dependencies: `npm install` - run `npm start` to see the example app at: http://localhost:3003. - To build the application you should run: `npm run build` - To build and run PWA demo use the command: `npm run build && node dist/server.js` ## PawJS Proudly supported by **PawJS** *[https://github.com/Atyantik/pawjs](https://github.com/Atyantik/pawjs)* #### Features ##### PWA - Progressive Web Applications Using ReactPWA you can create Progressive web application with simple knowledge of React.JS. As we all know, Progressive Apps are not supported everywhere, but we have added support for Safari & Chrome so your application can work as standalone applications when added to homescreen or saved as desktop app. [Read More](https://www.reactpwa.com/features/pwa-progressive-web-application) ##### Code splitting The very difficulty faced when developing enterprise application is code splitting. We don't need everything in a single JS file. Why not create individual JS files for each respective module/page! We make it really easy here to just create a page that returns an array of routes. Code is split and loaded automatically when the respective route is called. [Read More](https://www.reactpwa.com/features/code-splitting) ##### Hot Reloading Development is much easier with hot reloading. Make changes and the code is auto/hot-reloaded in the browser. And we did not miss "sass". Preserve application state when you update underlying code. [Read More](https://www.reactpwa.com/features/hot-reloading) ##### ES6/7 Compatible Using babel, we support next generation JavaScript syntax including Object/Array destructuring, arrow functions, JSX syntax and more... [Read More](https://www.reactpwa.com/features/next-gen-js-es6-es7) ##### Universal Routing with React-Router We are using the most accepted React router for routing the application. Add your favorite /about, /contact, /dashboard pages. [Read More](https://www.reactpwa.com/features/isomorphic-universal-routing) ##### Offline support Yes your application is offline available. Run without internet. Pretty cool huh?? Well all thanks to service workers. [Read More](https://www.reactpwa.com/features/access-offline) ##### SSR - Server side rendering The best way to get your application SEO-ed is enable Server side rendering i.e. Universal applications. [Read More](https://www.reactpwa.com/features/seo-search-engine-optimization/ssr-server-side-rendering) ##### SEO Our customized routes enable creating meta tags to create Twitter, Google+, Linkedin, Facebook cards. We know how important SEO is to an application. [Read More](https://www.reactpwa.com/features/seo-search-engine-optimization) ##### Content Folding Show only relevant data when loading via server. Fold your content to save bytes. [Read More](https://www.reactpwa.com/features/seo-search-engine-optimization/content-folding) ##### Page Caching Well now you can cache a page in SSR. Pretty simple. Just add cache option to route. `{ cache: { enable: true, duration: 10000}}` This helps you cache pages when rendered via server. Why increase server load when page is static and cacheable! [Read More](https://www.reactpwa.com/features/caching) ##### WebP Support Make your application super fast with WebP support. Read more about it at: [https://developers.google.com/speed/webp/](https://developers.google.com/speed/webp/) ##### Image optimizations Optimize your images when you create a build. This is a slow build process, but is totally worth it when your site loads fast. We are using imagemin plugins to optimize SVG, JPEG, GIF & PNG [Read More](https://www.reactpwa.com/features/image-optimization) ##### HSTS Supported Enable HSTS for secure sites. Options to define maxAge and preload of HSTS. All with very simple configuration. [Read More](https://www.reactpwa.com/features/hsts) Now you are all set, Get your hands dirty with this awesome boilerplate. ### Documentation *Still in progress... But why don't you check out our [Documentation](https://www.reactpwa.com/docs)* ### Testing *We have not written any test cases yet. Mocha is set up for testing, and we welcome any contribution to help us out.* ### Docker support Now easily manage docker-build, given Docker is properly configured and the terminal that is running node has access to docker command. ##### Working with docker: `npm run docker:dev:image` Will create a development image named "react-pwa" which will be used during application development and running. If anything new is added to package.json `npm run docker:dev:image` must be rebuilt to get the latest nodejs packages. `npm run docker:dev:start` Will start the application in docker mode. `npm run docker:prod:build` Will start the build the application for production. `npm run docker:prod:image` Will create a docker image that can be deployed easily to any docker-hub and can create production containers. `npm run docker:prod:start` Will start the application in production mode, it's necessary to create docker:prod:image prior to docker:prod:start. ### Need contributors. This project exists thanks to all the people who contribute. [[Contri
评论
    相关推荐