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

目的

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

流れ

1. 有名なやつクローン

・スター数多い
・活発
・Reactのみでミニマム

上記をクローン

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

cd react-pwa

npm i

2. 立てる

npm start

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

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認識されるようです。