今回は主にPWAとSPAについて調べたことのメモです。
名前は聞いたことあったけど、甘噛した程度だったり、調べもしなかったことをだったので……
PWA(Progressive Web Apps)
「スマホアプリのように使える、モバイル向けWebサイト」というのが、この言葉を指すようです。
これらのようなメリットがあります。
- 端末へのインストール可能
- インストールしなくても使える
- キャッシュの利用
- オフライン閲覧
- 表示スピードの高速化
- プッシュ通知
- GPSが使える
- Googleなどの検索でページがヒットする
PWAでWebページが作れてしまえば、スマホアプリのようにも使えるということですね。
プッシュ通知があるということは、Mi Bandなどスマートウォッチへ通知を連携できるのでは……
そんなことを妄想しているさなかSPAを調べていたら、SPAも同じような機能を実装可能なようです。
表示などの細かい差なのでしょうか？
digital-marketing.jp www.seohacks.net digital-marketing.jp
SPA(Single Page Application)
「単一ページでのWebページ」。これでアプリケーションを構成するものを指すようです。
従来のWebページは、Page.1→Page.2のように、画面切り替えはページ自体を切り替えて行っています。
しかしSPAは、1つのページでjavascriptを使って中身を差し替え、これによってコンテンツを切り替えます。
- 高速なページ遷移
- オフラインでの閲覧
- プッシュ通知
- ホーム画面からの起動
てっきりWebアプリ→スマホアプリ的活用は、PWAの領分だと思っていました、SPAはでも可能なんですね。
細かいところで違うだけで、大枠のバックグラウンドの機能たちは、PWAもSPAも変わらないのかもしれませんね。
またデメリットとして、初期ロード時間が長いという欠点があるようなので、注意して設計する必要がありそうですね。
ローディング画面をイイカンジにする必要があるかもしれません。
なので滞在時間の長いページに向いているようです。
普通のWebページってよりは、名前にApplicationとある通りWebアプリに向いてそうですね。
www.isoroot.jp digitalidentity.co.jp
Angular
Angular, React, VueがPWA, SPAを構築するのによく使われる、javascriptのフレームワークらしいです。
今回Angularに興味を持ったのは、この★YOUTUBE★がきっかけ
- 自由度を取るなら→React, Vue
- 楽さを取るなら→Angular
というようなこと聞き、興味が湧きました。
Angularはフルスタックフレームワーク
Angularはフルスタックフレームワークと呼ばれていて、SPAを作るための要素が全部入りらしい。
ということは、Angularを使って開発すれば、サクッとSPAで作れるんじゃね？
という多大な興味が湧いてきました。
あとがき
ちょっとAngularでSPAなものを作る実験をしてみようかなぁと思いました。
とりあえず、世界に挨拶してこようと思います。
