Edited at

React+PWAを最速で試してみた

More than 1 year has passed since last update.


目的

ReactでできたPWAを自分の環境で試してみたかった。

ちょい前PWAが話題だったけど、忙しくていじれなかったので、なるべく他力本願で最速に試した。


流れ


1. 有名なやつクローン

・スター数多い

・活発

・Reactのみでミニマム

https://github.com/Atyantik/react-pwa

上記をクローン

git clone https://github.com/Atyantik/react-pwa.git

cd react-pwa

npm i


2. 立てる

npm start

なぜかわからないけど、localhost:3003で立つのでアクセス

スクリーンショット 2018-05-08 13.17.21.png


3. カスタマイズ

以下を抑えればおk

・React Routerでルーティング

src内のroutes.jsでルートを決めている

・OGP設定とかもできる

src/page内で各ページのの設定をしている。

以下のようにOGP設定などはここでできる。

  seo: {

title: "Common Title",
site_name: "My Site Name",
description: "This is some temporary description, used if no other description is found",
twitter: {
site: "@atyantik_tech",
creator: "@tirthbodawala"
},
facebook: {
admins: [
"1501220844",
"765904161",
],
},
meta: [
{
name:"viewport",
content: "width=device-width, initial-scale=1"
},
{
name:"theme-color",
content: "#fff"
},
{
charSet: "utf-8",
},
{
httpEquiv: "x-ua-compatible",
content: "ie=edge",
}
],
},


まとめ

GoogleでSEO認識されるかとかを調べてみたい。

あとこれiOS版のChromeブラウザ対応してないのか疑問。


5/8 18:54追記

OGPはSEO認識されるようです。