Getting Started with
Progressive Web Apps

Takami Torao
  • このエントリーをはてなブックマークに追加

Progressive Web Apps (PWA) は Google が開発したスマートフォン/タブレット向けのアプリケーションアーキテクチャ。HTML, JavaScript, CSS で作成できる。

PWA アプリケーションの設計は Application Shell と Content からなる。App Shell は基本的な HTML と CSS, JavaScript からなり初回ロード時にデバイスにキャッシュされる。Content は動的にロードされ App Shell に表示されるデータである。

ホームスクリーン

STEP1:

現在時刻を表示するだけの時計アプリを作成する。

  1. ヘッダ部分にタイトルが表示される。
  2. ボディ部分に現在時刻が表示される。
  3. 現在時刻は 1 秒ごとに更新される。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA Watch</title>
</head>
<body>
  <header class="header">
    <h1 class="header__title">PWA Watch</h1>
  </header>

  <main class="main" hidden>
    <!-- Insert forecast-card.html here -->
  </main>

  <div class="loader">
    <svg viewBox="0 0 32 32" width="32" height="32">
      <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
    </svg>
  </div>

  <!-- Insert link to app.js here -->
</body>
</html>

参考文献

  1. はじめてのプログレッシブウェブアプリ (Google Developers)
  2. Progressive web apps (MDN web docs)