PWA対応のウェブ開発に必要なデベロッパーツールやいろいろ

スポンサーリンク

Googleが進めている“PWA(Progressive Web Apps)”
AMPの対応はすでにこのサイトでも出来て(Simplicityのおかげ)いますが、PWAに対応させる必要が将来出てくるのかまったく分かりません。

分からないながらも事前準備はしておいた方がよく、イザという時の為に参考情報などは記録しておこうと思います。

PWAとは何なのか?分かりやすい解説はこちら

“PWAとは何なのか?”を知るには、Googleが公開している情報から得るのが手っ取り早いわけですが、2016年12月9日付けの「ウェブマスター向け公式ブログ」には、次のように簡潔に説明しています。

プログレッシブ ウェブアプリ (PWA) は、最新技術を活用することで、モバイルサイトとネイティブ アプリの長所を兼ね備える、現在ウェブの世界で最も注目されている新しい概念の1つです。

PWAと通常のWebとの違いは表示速度です。
公式ブログにはサンプルページを用意してくれており、表示速度の違いがはっきり分かります。

PWA

PWA


メニューの[Ocean] [Mountains]とかをクリックすると違いがはっきり分かります。

表示速度が速い理由がネイティブアプリとしての働きであって、通常であればサーバー側で常にレンダリングするのが、最初の読み込みの後はクライアント側でレンダリングされる働きをするという理屈みたいです。

Edgeの“リーディングリスト”のようにオフラインでウェブが閲覧でき、さらにウェブアプリも利用でき、しかも動きが早いというのがユーザーにとってのメリットなんですね。

PWAページをどうやって作るのか

AMPの場合には以下のルールに従ってHTMLを作っていきます。

  • HTMLの宣言とhead内記述すべき決まりがあります
  • AMP独自のhtmlタグを使用します
  • 使用禁止のタグがあります

基本的なことはこんなことですが、具体的なAMPの作り方はAMP HTML導入ガイド~作り方をカンタンに解説!~にすごく詳しく解説されています。

AMPは冒頭にも書きましたが、当サイトのテーマ「Simplicity」にはAMP化機能が実装されているので、1クリックでAMPサイトが作成されたので、実際の作業は行わずに済んでいますが、PWA対応はすこし勝手が違うようです。

ウェブページのPWA化にチャレンジ

ウェブページをPWAに変えるにはWeb Starter Kitを使います。

まずzipファイルをダウンロードして適当なフォルダに格納します。

フォルダの中の[app]フォルダに[index.html]と[basic.html]があります。どちらかを使ってということですが、[basic.html]に最小限のコードが記述されているので、<body>以下にコンテンツのhtmlを書込めばOKのようです。

チャレンジというほどのこともありません。
ページ内の説明では自身の環境で WSK を実行する準備が整っていることを確認します。となっていますが、ダウンロードしたファイルにはすべて揃っているようですので、さほど難しくは無いと思います。

コメント