プログレッシブ Web アプリケーションについての簡単な説明

2016 年に新しい用語が登場しました: プログレッシブ Web アプリケーション (PWA)、レスポンシブ デザイン、独立した接続性、目新しさ、セキュリティ、探索性、再カスタマイズ性、インストール性、ネイティブ アプリのような対話性を備えたリンク可能なアプリ/ウェブサイトの「包括的」用語。繰り返しになりますが、私たち全員が PWA の概念全体に対処する方法を学ぶ必要があり、より多くの議論やアイデアの交換を行い、Web サイトをより賢明にするものを理解する必要があります。レスポンシブ Web デザインを始めるときに、これらの間違いを繰り返さないようにしましょう。

プログレッシブ Web アプリとは何ですか?

プログレッシブ Web アプリ (PWA) は、本質的には通常の Web サイトと何ら変わりません。これも HTML、CSS、JavaScript で構成され、ブラウザー内に存在します。 PWA が通常の Web サイトと異なるのは、満たす必要がある 10 個の中心的な概念のリストです。以下は Google Developers Web サイトから直接取得したリストです:

セキュリティ – ネットワーク スヌーピングを防止し、コンテンツが改ざんされないように HTTPS 経由で提供されます。

プログレッシブ – 常にプログレッシブ拡張の原則に基づいているため、ユーザーが使用するブラウザに関係なく、すべてのユーザーが使用できます。

レスポンシブ – デスクトップコンピューター、スマートフォン、タブレット、またはその他のデバイスなど、あらゆる環境に適応します。

ネットワーク接続に依存しない – Service Worker で強化され、オフラインでも低品質のネットワークでも動作可能

ネイティブのようなアプリケーション – ネイティブ アプリケーションのような対話とナビゲーションを備え、ユーザーにネイティブ アプリケーションのようなエクスペリエンスを提供しますApp Shell モデルに基づいて構築されています。

継続的な更新 – Service Worker の更新プロセスのおかげで、アプリケーションは常に最新の状態を維持できます。

検出可能 – W3C マニフェストのメタデータと Service Worker の登録により「アプリケーション」として認識され、検索エンジンが Web アプリケーションを見つけられるようになります。

再訪問可能 – プッシュ通知などの機能を使用して、ユーザーが簡単に再訪問できるようにします。

インストール可能 – ユーザーは、アプリ ストアを経由せずに、自分にとって役立つアプリをホーム画面に保存できます。

リンク可能 – アプリケーションは URL 経由で簡単に共有でき、複雑なインストールを行わずに実行できます。

これらのガイドラインに従うことで、アプリがブラウザーで表示されたときだけでなく、ホーム画面のショートカットだけで起動したときも適切に動作することが保証されます。 Google が選択した表現が非常にわかりにくいと思われるかもしれませんが、このチュートリアルでルールを 1 つずつ説明しますので、心配しないでください。

プログレッシブ Web アプリではないもの

PWA の概念を次のものと混同しないでください。

Cordova に基づくハイブリッド アプリ

React Native

NativeScript

Electron と NW.js

前述のすべてのテクノロジ HTML アプリケーションは.apk、.exe などの実行可能ファイルにパッケージ化され、それぞれのアプリ ストアからダウンロードしてユーザーのデバイスにインストールする必要があります。

PWA はインストールの必要がなく、Google Play や​​ iTunes のアプリ ストアではまだ利用できません。 PWA をダウンロードするには、その Web サイトにアクセスし、ホーム画面へのショートカットとして保存するだけです。 iOS と Android 用に別々のバージョンを開発および維持することはもはや問題ではありませんが、ブラウザのサポートを考慮する必要があります。

1. セキュリティ

ほとんどの先進的な Web アプリケーションは、機密データを扱うネイティブ API とサービス ワーカーを使用しているため、慎重に扱う必要があります。これが、すべての PWA が HTTPS 接続経由でアクセスされる理由です。

SSL 証明書を備えたサーバーがない場合、安全な環境でプロジェクトを実行する最も簡単な方法は、GitHub Pages または同様のサービスを使用することです。すべての Github リポジトリは HTTPS 経由で直接ホストでき、パブリック リポジトリでは GitHub と GitHub Pages の両方が無料です。

ローカルサーバーでテストしているだけの場合は、Ngrok を試すこともできます。これは、現在実行中のローカルホストとパブリック URL の間に安全なチャネルを確立できる小さなツールです。 Ngrok は無料で、Windows、Mac、Linux システムで利用できます。

2. プログレッシブ

基本的に、プログレッシブとは、PWA が広くサポートされている Web テクノロジーを使用し、できるだけ多くのブラウザーで同等に実行されることを意味します。誰もが知っているように、Web 開発の世界ではこれはほぼ不可能ですが、より大きなユーザー ベースに到達するためにできることはまだあります。

たとえば、PhotoBooth アプリケーションでは、getUserMedia() API を使用してデバイス上のハードウェア カメラにアクセスします。そのサポートはブラウザ間で非常に一貫性がありません。Safari はまったくサポートしておらず、サポートするブラウザにはプレフィックスが必要であり、使用方法も異なります。

より多くの人が私たちのアプリを使用できるようにするために、すべてのプレフィックスをカバーします:

  navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
   );

すべてのプレフィックスが失敗した場合は、エラーを表示します:

if (!navigator.getMedia) {
    displayErrorMessage("你的浏览器不支持 navigator.getUserMedia 接口。");
}else {
    // 使用 Camera API
}

可能な場合は、フォールバックを提供する必要があります) とポリフィル。同じ原則が CSS と HTML コードにも当てはまります。

3. レスポンシブな

アプリは、画面サイズに関係なく、すべてのデバイスで適切に表示される必要があります。このアプリケーションの UI は非常にシンプルなので、フォント サイズ、パディング、マージンなどを制御するために使用するメディア クエリは 2 つだけです。

CSS ライブラリや Bootstrap などのフレームワークを使用することを恐れないでください。これらにより、フォーム グリッド、タイポグラフィ、および一般的な応答性の操作が容易になります。

4. ネットワーク接続に依存しない

これは非常に重要なポイントです。 Service Worker を使用すると、インターネットに接続していなくてもアプリケーションを実行できます。

一部のアプリケーションは部分的にのみキャッシュできます。UI はキャッシュされてオフラインで利用できますが、動的コンテンツは引き続きサーバーにアクセスする必要があります。

PhotoBooth デモ アプリなどの一部のアプリは、すべてをキャッシュできます。すべてのソース コードとリソースはローカルに保存され、アプリケーションはオフラインでもオンラインでもまったく同じように実行されます。この魔法を実現するコードは次のとおりです:

これは Service Worker の過度に単純化された使用法であり、商用プロジェクトでは注意して使用する必要があります。

まず、Service Worker JavaScript ファイルを作成し、その背後にあるロジックを定義する必要があります。

sw.js

// 安装 service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // 如果这些资源中有任何资源不能保存，缓存就会失败
            return cache.addAll([
                // 路径是相对于缓存来源，而不是应用程序的目录。
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('成功! App 离线可用!');
            })
        })
    );
});
// 定义一个资源被请求时候会发生什么
// 对于我们的应用，我们以缓存优先的方式
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // 试着从缓存中获取.
        caches.match(event.request)
        .then(function(response) {
            // 如果资源没有存储在缓存中，就回退到网络
            return response || fetch(event.request);
        })
    );
});

次に、その Service Worker を HTML にリンクする必要があります。

index.html

// 注册 Service Worker.
if ('serviceWorker' in navigator) {
    // 路径是相对于缓存来源，而不是应用程序的目录.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}

これで、プロジェクト内のすべてのファイルがユーザーのブラウザに保存されます。すべての JavaScript 変数とオブジェクトも、可能な限り localStorage または IndexDB に保存する必要があります。

5. クラス ネイティブ リファレンス

PWA を作成するときは、アプリケーション シェル アーキテクチャと呼ばれる設計概念に従うことをお勧めします。複雑に聞こえますが、実際は次のように要約されます。アプリケーションは、シェルとコンテンツという 2 つの主要コンポーネントに分かれています。

シェルには、ヘッダー、メニュー、ドロワーなどのすべての静的 UI 要素が含まれています。アプリケーションをキャッシュするときは、シェルを常に利用できるようにするため、シェルは常にデバイスに保存する必要があります。こうすることで、インターネットに接続していないユーザーがアプリを開いたときに、空白の画面や実行中の恐竜が表示されず、代わりにキャッシュされたアプリのインターフェイスと適切なエラー メッセージが表示されます。

内容驻留在外壳内。它也可以被缓存，但是没有必要这样做，因为内容通常是动态的，会频繁发生改变，并且每个页面加载时都可能是不同的。

6. 持续更新

一旦被缓存了，PWA 会总是从本地存储加载。不过，如果以任何方式修改了 service workersw.js，那么在下一个页面加载时，新版本就会被下载和安装。

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
});

通过使用 service worker 更新，我们可以重新下载资源，删除旧缓存，或者彻底修改 service worker 逻辑。你可以从这篇 Google 开发者文章中，学到更多有关 SW 更新过程的知识。

7. 可发现

通过给应用程序添加一个 Web Manifest，可以提供有关应用程序的各种信息，并且可以修改应用程序在用户设备上的显示方式。它允许应用程序被带自定义图标的方式保存到主屏幕上，在一个单独的浏览器窗口中启动，以及很多其它很酷的东西。

Web Manifest 是以一个简单 JSON 文件的形式出现：

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

大多数属性是自解释的，所以我们只讲讲较为重要的一些属性。要查看完整的 Web manifest 格式，以及所有可用的字段，请到这里。

Shortname – 这是应用保存到主屏幕上时的名称。

Icons – 不同分辨率的图标数组。

Display – 定义应用打开的方式。我们选择的是独立（standalone)，所以启动 PhoneBooth 时，会以全屏窗口出现，没有浏览器导航栏或者菜单。它还会被看作为多任务中的一个单独的应用。

要注册 Manifest 文件，必须把它链接到 HTML 中：

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari 还不支持 Web Manifest 标准，但是我们可以用如下的苹果特定的 meta 标记，定义类原生应用的行为：

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. 可再次访问

通知推送不再只限于原生应用。多亏了 service worker 和 Push API，Web 应用程序也可以发送消息给 Android 通知栏。并不是所有应用都可以从这个功能受益，但是当正确使用此功能时，通知确实可以帮助吸引用户。

这个主题已经超出了本教程的范围，因为推送很复杂，值得用一个完整的课程讲解。如果你依然想在你的 Web 应用中实现通知推送，这里有一些最好的学习资源：

Google 开发者网站上的《推送通知：及时、相关和准确》 – 这里.

Google 开发者网站上的《开放 Web 上的推送通知 – 这里.

MDN 上的《使用 Push API》 – 这里.

Push.js 库，提供处理推送通知的更清洁的 API – 这里.

9. 可安装

默认情况下，任何网站都可以用 Chrome 浏览器菜单的 "添加到主屏幕" 按钮，保存到主屏幕上。不过，让用户以这种方式 "安装" 应用程序可能有点难，因为大多数人完全不知道这个功能。

ありがたいことに、アプリには簡単なインストール ポップアップを使用してユーザーに保存を促す方法があります。開発者によるこれらのポップアップの悪用を防ぐため、プログラムでポップアップを表示することは許可されていません。代わりに、アプリケーションが次の条件を満たす場合、これらのウィンドウが自動的に表示されます:

有効な Web マニフェストがある。

有効な Service Worker がインストールされています。

HTTPS経由でアプリケーションにアクセスします。

上記のすべての条件を満たしているため、ユーザーが Web サイトに数回アクセスすると、次のプロンプトが表示されます:

10. リンク可能

ブラウザーを持っている限り、誰でも PWA アプリケーションにアクセスできます。ので、申請してください。 URL だけで共有できます。これらのアプリを検出またはインストールするためにサードパーティのツールは必要ありません。

アプリがスタンドアロン モードで実行されている場合は、ブラウザーのアドレス バーとメニューが表示されないため、アプリ内に共有ボタンを追加することも賢明です。

最後に

レスポンシブネスを超えて

レスポンシブデザインを初めて経験した後、特殊なデバイスのデザインとプログラミングは引き返せない道であることに気づきました。最初の試行で成功できる、本番環境に対応した Web サイトはありませんが、特別ではない他の機器で十分です。現在、モバイルでスタイリングに関する緊急事態を発見したときに、ほとんどの人が最初に考えるのはメディア クエリの追加ですが、それは問題ありません。

今、レスポンシブ デザインについて考えると、メディア クエリやコンテンツの柔軟な書式設定以上のことを行うことを意味します。レスポンシブな Web サイトを作成する際、適応性、パフォーマンス、コンテンツを必要とする人が増えていることに気づきました。レスポンシブな Web サイトの適合性やパフォーマンスを忘れてしまったら、役に立たないことに気づきました。私は、アクセスできず、開くたびに画面サイズに合わせて設計された過負荷なレスポンシブ デザイン サイトよりも、高速でアクセスしやすいサイトの方がはるかに好きです。

Service Worker についても同様で、最初にこれを単なるオフライン ソリューションとして考えたとき、多くのパフォーマンスの側面と、Web サイトをよりアクセスしやすく使いやすくする方法に気づきました。

プログレッシブな Web サイトを作成します – 名前だけではありません

プログレッシブ Web アプリケーション – レスポンシブで独立した接続性、斬新で安全、探索可能、再カスタマイズ可能、インストール可能、リンク可能なアプリケーション (基本的な Web サイト) で、優れたネイティブ アプリのような機能を備えていますしかし、決して忘れてはいけない言葉が 1 つあります。それは「プログレッシブ」です。

プログレッシブ Web のアップグレードの最適化を促進するのは難しいと理解しているので、プログレッシブ Web アプリケーションと名付けることは素晴らしいと思います。もっと多くの人が進歩的なウェブサイトを作ってくれることを願っています。ユーザーは「私たちのサイトをプログレッシブにするのを手伝ってくれませんか?」と言うでしょう。そうすれば、プログレッシブな最適化とアップグレードは単なる一時的なものではなく、誰もがそれをしたいと思うでしょう。

プログレッシブ Web アプリケーションはチャンスです

私たちは引き続き、最初からプログレッシブ Web アプリケーションを実装するための最適なソリューションを探します。 これにより、より多くの人がプログレッシブ アップグレードの最適化を認識できるようになれば幸いです。人々がデバイスに集中するときに同じ間違いを犯さないことを願っています。レスポンシブ デザインのおかげで、Web サイトの構築方法が変わり、Web コンテンツ、アクセシビリティ、パフォーマンス、ユーザーについてもっと考えるようになりました。 PWA (Progressive Web Apps) を構築する際に、より多くの人に Web の基礎を知ってもらいたいと考えています。

過去の間違いを繰り返す必要はありません。 PWA が特定のデバイスでのみ動作するのは間違いです。 PWA を構築するときは、「アプリケーション」そのものではなく、「プログレッシブ」の部分に焦点を当てましょう。