Help us understand the problem. What is going on with this article?

React と PWA で講義の時間確認するだけのやつを作った

More than 1 year has passed since last update.

以前作ったものを PWA 対応と、ついでに見た目を変えました。
アプリは「4限何時からだっけ?」を解決する、完全に身内向けのものです。
ですが主に PWA のイントロについて書きたいと思います。

Dentime.png

使っているもの

  • React.js
  • Flow
  • styled-components
  • GitHub pages

リポジトリ: https://github.com/elzup/dentime

PWA 対応

Developer_Tools_-_https___elzup_github_io_dentime_.png

Google Chrome Developer tools の Audits のナビゲーションに従ったのみです。

manifest.json で icon やテーマカラー、バックグラウンドカラーの設定をしました。自動で作られるスプラッシュ画面やナビゲーションバーの色に関係してきます。

設定内容は Devtool の Applications タブで確認できます。
Developer_Tools_-_https___elzup_github_io_dentime_.png

あとは「noscripts タグ入れてね」や「テーマカラーとナブバーの色を合わせてね」など細かいところです。

pwa.png

右: PWA なので Android chrome で開くとインストールを促してくれます。
左2つ: テーマカラーが反映されています。

ServiceWorker でオフラインでも起動します。それどころか今回は時計しか使っていないので機能も動きます。

iOS対応

iOS の PWA 対応はまだされてません。なのでホーム画面へ追加でも快適に使えるように最低限の設定をしました。
Safari のバー非表示とホーム画面アイコンの設定が下ので出来ます。

index.html
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-2x.png" />
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした