lisz-works

技術と興味の集合体

Web関連の興味の湧いて調べたことメモ

【スポンサーリンク】

lisz-works

今回は主にPWAとSPAについて調べたことのメモです。

名前は聞いたことあったけど、甘噛した程度だったり、調べもしなかったことをだったので……

PWA(Progressive Web Apps)

「スマホアプリのように使える、モバイル向けWebサイト」というのが、この言葉を指すようです。

これらのようなメリットがあります。

  1. 端末へのインストール可能
  2. インストールしなくても使える
  3. キャッシュの利用
    1. オフライン閲覧
    2. 表示スピードの高速化
  4. プッシュ通知
  5. GPSが使える
  6. Googleなどの検索でページがヒットする

PWAでWebページが作れてしまえば、スマホアプリのようにも使えるということですね。

プッシュ通知があるということは、Mi Bandなどスマートウォッチへ通知を連携できるのでは……

そんなことを妄想しているさなかSPAを調べていたら、SPAも同じような機能を実装可能なようです。

表示などの細かい差なのでしょうか?

www.seohacks.net

digital-marketing.jp www.seohacks.net digital-marketing.jp

SPA(Single Page Application)

「単一ページでのWebページ」。これでアプリケーションを構成するものを指すようです。

従来のWebページは、Page.1→Page.2のように、画面切り替えはページ自体を切り替えて行っています。

しかしSPAは、1つのページでjavascriptを使って中身を差し替え、これによってコンテンツを切り替えます。

  1. 高速なページ遷移
  2. オフラインでの閲覧
  3. プッシュ通知
  4. ホーム画面からの起動

てっきり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で作れるんじゃね?

という多大な興味が湧いてきました。

webtan.impress.co.jp

あとがき

ちょっとAngularでSPAなものを作る実験をしてみようかなぁと思いました。

とりあえず、世界に挨拶してこようと思います。