PWAでtoDo（にちょっと毛が生えた）アプリを作った＿①PWAとは？
こんにちは。kojiと申します。アマチュアで個人開発者をやっています。PWAを作ったので、どんなふうに作ったかを書いてこうと思ってます。
まずはこちらをお納めください
さっそくですが、こんなものを作りました。webページです。
まずはちょっとさわってみてください。
アプリっぽいと思ってくれたでしょうか？
PCで見てる方はウィンドウの幅をぎゅ〜っと狭めてもらえるとありがたいです。
スマホを使っている人は、このwebページを『ホーム画面に追加』してみてください。
やり方はこちら↓
すると、普通のスマホアプリのように使えるはずです。
これがPWAというものです。
これをどんなふうに作ったか、作るときに詰まったことなどを書いていこうかなと思ってます。PWAでアプリ作る人を増えるきっかけになればいいな〜と。
ではPWAって何よ？ってところからはじめたいと思います。
PWAとは？
とにかく簡単に言うと、スマホアプリっぽく見せるwebページって感じです。対応しているwebサイトを『ホーム画面に追加』することで、スマホアプリに擬態させることが可能です。
webページですが、アプリなのでオフラインで使うこともできます。（そういう設定にしてあれば）
PWAと書くと字面でなんのこっちゃあんまりピンとこない感じがするので。『PWアプリ』と書くことにします。ピーダブアプリとでも読めば呼びやすい感じですかね。
PWアプリの紹介
とりあえず、今どんなものが世に出ているかを紹介してみます。
PWアプリってこんな感じなんだよ、というか普通のアプリと似てるってのがわかってもらえるかと思います。
全部、『ホーム画面に追加』でアプリ化できます。
Offline Dino Game
chromeがオフラインの時に出るアレです。恐竜です。offlineとあるように、ネットに繋がってなくても遊べます。でもwebページなのです。
2048
スマホアプリとしてはもうクラシックの域にあるパズルゲームです。これももちろんオフラインOK。
言わずと知れたtwitter。PWアプリだとこんな感じ。androidならプッシュ通知も届くはず。iOSは...まだ。twitterはもちろんオンラインでないと使えないですね。でもオフラインでもページは開けます。
Llumino PWA
普通のアプリとしても出されている電卓アプリのPWアプリ版。ビジュアルがすごく綺麗。
というか、このアプリの作者様が製作技術を公開してらして、すごく参考になります。僕もここをだいぶ参考にしながら作ってました。
その他にもゲームアプリいろいろ
ということで、以上が簡単なPWアプリの紹介でした。だいたいどんなもんかわかってもらえたでしょうか？
次からは、こういうのをどんな感じで設計したかという経験を書いていきたいと思っています。
これだけ覚えて帰ってください
・PWAは、アプリっぽいwebページ
・『ホーム画面に追加』することでアプリとして使えるようになる。
次はこちら
この記事が気に入ったらサポートをしてみませんか？