pixel cra_cra到pwa

最新推荐文章于 2020-09-12 00:08:29 发布

weixin_26723981

最新推荐文章于 2020-09-12 00:08:29 发布

阅读量114

点赞数

原文链接：https://medium.com/swlh/cra-to-pwa-1e572207d7

版权

pixel cra

This is the most searched topic on the internet today, “How to convert CRA (Create React App) to PWA (Progressive Web App)”.

这是当今互联网上搜索量最大的主题，“如何将CRA(创建React App)转换为PWA(渐进式Web应用程序)”。

To convert any website into PWA you’ve to add to files:

要将任何网站转换为PWA，您必须添加文件：

manifest.json
manifest.json
service-worker.js
service-worker.js

CRA already has a basic service worker file for registering the service worker, just open ./src/index.js file and call the method serviceWorker.register(); or replace unregister() to register()

CRA已经有一个用于注册服务工作者的基本服务工作者文件，只需打开./src/index.js文件并调用方法serviceWorker.register(); 或将unregister()替换为register()

This will cache all the static files and assets and make the website work offline. CRA has a very little configuration of PWA to work on any smartphone and it doesn’t have an install popup configuration. So registering the service worker doesn’t make the app install on a smartphone. We need to configure it by ourselves.

这将缓存所有静态文件和资产，并使网站脱机工作。 CRA的PWA配置很少，可以在任何智能手机上使用，并且没有安装弹出窗口配置。因此，注册服务人员不会使应用程序安装在智能手机上。我们需要自己配置它。

脚步 (STEPS)

Make the web app installable
使Web应用程序可安装
Add Windows and iPhone supported tags
添加Windows和iPhone支持的标签
Configure the service worker to cache network images too, not only static images.
将服务工作者配置为也缓存网络映像，而不仅仅是静态映像。

Step 1/3:

步骤1/3：

We need to edit manifest.json file, open ./public/manifest.json file and replace it with

我们需要编辑manifest.json文件，打开./public/manifest.json文件并将其替换为

{"short_name": "My App", // this will show on homescreen icon"name": "My App","icons": [{"src":"icon-192x192.png", // make sure icons must have appropriate sizes and path - my icon is in ./public/icon-192x192.png"sizes": "192x192","type": "image/png"},{"src":"icon.png","sizes": "512x512","type": "image/png"}],"orientation": "portrait","start_url": "/","background_color": "#222", // splash screen background color"theme_color": "#222", // notification panel color"display": "standalone"}

Step 2/3:

步骤2/3：

Windows and iPhone doesn’t fully support PWAs with basic configuration, so we need to add “meta-tags” for to make app work in Windows phone and iPhone. Add the given below meta tags in ./public/index.html head section.

Windows和iPhone不完全支持具有基本配置的PWA，因此我们需要添加“元标记”以使应用程序在Windows Phone和iPhone中正常工作。在./public/index.html部分中，在下方添加给定的元标记。

In CRA, /public/index.html, parent path represents “%PUBLIC_URL%” so it must be included in every static file, image or icon otherwise none of the assets will import.

在CRA /public/index.html中，父路径表示“％PUBLIC_URL％”，因此必须将其包含在每个静态文件，图像或图标中，否则不会导入任何资产。

For All Phones:

对于所有电话：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

For Windows Phone:

对于Windows Phone：

<meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#536878"><meta name="msapplication-navbutton-color" content="orange"><meta name="msapplication-TileColor" content="orange"><meta name="msapplication-TileImage" content="%PUBLIC_URL%/icon/icon-144x144.png"><meta name="application-name" content="My App"><meta name="msapplication-tooltip" content="My App Description"><meta name="msapplication-starturl" content="%PUBLIC_URL%/menu?utm_source=homescreen"><meta name="screen-orientation" content="portrait">

For iPhones:

对于iPhone：

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="My App"><link rel="apple-touch-icon" href="%PUBLIC_URL%/icon.png"><link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icon/icon-192x192.png"><link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icon/icon-192x192.png"><link rel="apple-touch-icon" sizes="167x167" href="%PUBLIC_URL%/icon/icon-192x192.png">

Safari browser doesn’t show splash screen so we need to make custom splash screens for each size of iPhone then add these meta tags for safari browser.

Safari浏览器没有显示启动屏幕，因此我们需要为每种尺寸的iPhone制作自定义启动屏幕，然后为野生动物园浏览器添加这些元标签。

<link href="%PUBLIC_URL%/icon/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Step 3/3:

步骤3/3：

One of the most asked question is how to cache network images in CRA, so this is the part we cover this problem.

最受欢迎的问题之一是如何在CRA中缓存网络映像，因此这是我们涵盖此问题的部分。

CRA uses the workbox for PWA from registering a service worker to caching files.

从注册服务工作者到缓存文件，CRA使用PWA的工作箱。

At first, we need to make a build of CRA by running the command:

首先，我们需要通过运行以下命令来构建CRA：

npm run build or yarn build

This will generate a build directory on the root of the project, now open ./build/service-worker.js file and add this snippet above workbox.core.clients();

这将在项目的根目录上生成一个构建目录，现在打开./build/service-worker.js文件，并将此代码段添加到workbox.core.clients();之上workbox.core.clients();

workbox.routing.registerRoute(// Cache Image File/.*\.(?:png|jpg|jpeg|svg|gif)/,new workbox.strategies.StaleWhileRevalidate({cacheName: 'images',plugins: [new workbox.expiration.Plugin({maxEntries: 60,maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days}),],}));

Now your CRA is successfully converted to PWA and supported in android/ios/windows phones.

现在，您的CRA已成功转换为PWA，并在android / ios / windows手机中受支持。

Hope you like it. 😘

希望你喜欢。 😘

That’s All. ❤

就这样。 ❤

Github: https://github.com/ManalLiaquat/

GitHub： https : //github.com/ManalLiaquat/

LinkedIn: https://www.linkedin.com/in/manalliaquat/

领英(LinkedIn)： https ： //www.linkedin.com/in/manalliaquat/

Feel free to contact me 🙂

随时与我联系🙂