はじめに
PWAについて皆さんは知っていますか?
僕は、１年前まではPWAについて知りませんでした。
iOSも2018年にリリースされたVer.11.3からPWAへ対応するようになり、Iphoneユーザーの多い日本では知名度があまり高くない(エンジニア界隈は除く)と思いますが、今回は自分のようにPWAについて知らない人のために、PWAについて解説していきたいと思います。
PWAとは
PWAとは「Progressive Web Apps」の略で、Webアプリケーションをネイティブアプリケーションのように動作させるための技術です。
PWAの利点として、インストールせずにすぐ利用することができ、かつ
ホーム画面のアイコンからすぐアクセスしたり、通知を受け取ることができるという点があります。
誤解を恐れずにいうと、PWAは、Webアプリケーションとネイティブアプリケーションの中間のようなものです。
また、開発者側の利点としてOS毎にアプリを開発する必要がなく、Webアプリケーションを開発するだけで済むので、開発コストを抑えることができます。
PWAの原則について
今までは抽象的な説明が多かったので、具体的なPWAの原則について説明していきます。
PWAを満たすための原則について以下に示します。
MDNから引用
- 発見可能 (Discoverable): コンテンツを検索エンジンで見つけることができる。
- インストール可能 (Installable): アプリを端末のホーム画面に追加できる。
- リンク可能 (Linkable): URL を送るだけでアプリを共有できる。
- ネットワーク非依存 (Network independent): オフラインか、あるいは貧弱なネットワーク環境でも使用できる。
進化的 (Progressively enhanced): 古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべて- の機能が使用できる。- 再エンゲージ可能 (Re-engageable): 新しいコンテンツがあるときには、通知を送ることができる。
レスポンシブデザイン (Responsively designed): 携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫な- ど、画面とブラウザーを備える全ての端末で使用できる。- 安全性 (Secure): アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。
ref:https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames
iOSでQiitaのPWA設定を行う方法
知らない方も多いかもしれませんが、QiitaでのPWAを対応しております。
- ブラウザでQiitaを開く
- 共有アイコンから「ホーム画面に追加」をタップ
- 画面の手順に沿ってPWAをホームに追加
QiitaのPWAについて詳しくはこちらをご覧ください
因みにPWAを用いることで、スマホアプリのごとくQiitaで通知
を受け取ることもできます!
参考資料