PWA をインストール可能にするには

この翻訳は不完全です。英語から この記事を翻訳 してください。

前回の記事では、 js13kPWAサービスワーカーによってオフラインで動作する方法を見てきましたが、さらに、対応しているモバイルブラウザーでは、ネイティブアプリであるかのようにウェブアプリをユーザーがインストールできるようにすることができます。この記事では、ウェブマニフェストと「ホーム画面に追加」と呼ばれる機能を使用して、これを実現する方法を説明します。

これらの技術によって、アプリはブラウザーを起動して URL を入力するのではなく、機器のホーム画面から直接起動することができるようになります。ウェブアプリが第一級市民としてネイティブアプリの隣に座ることができるのです。従ってよりアクセスしやすく、ブラウザーの周囲の枠なしの全画面で実行されるため、もっとネイティブアプリのようにすることができます。

要求事項

ウェブサイトをインストール可能にするには、以下のものが必要になります。

  • A web manifest, with the correct fields filled in
  • The website to be served from a secure (HTTPS) domain
  • An icon to represent the app on the device
  • A service worker registered, to make the app work offline (this is required only by Chrome for Android currently)

マニフェストファイル

The key element is a web manifest file, which lists all the information about the website in a JSON format.

It usually resides in the root folder of a web app. It contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on a mobile OS (for example, as the home screen icon), and a background color to use in loading or splash screens. This information is needed for the browser to present the web app properly when installing, and on the home screen.

The js13kpwa.webmanifest file of the js13kPWA web app is included in the <head> section of the index.html file via the following line of code:

<link rel="manifest" href="js13kpwa.webmanifest">

Note: There are a few common extensions that have been used for manifests in the past: manifest.webapp was popular in Firefox OS app manifests, and many use manifest.json for web manifests as the contents are organized in a JSON structure. However, the .webmanifest extension is explicitly mentioned in the W3C manifest specification, so let's stick to that.

The content of the file looks like this:

{
    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "icons": [
        {
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        // ...
        {
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/pwa-examples/js13kpwa/index.html",
    "display": "fullscreen",
    "theme_color": "#B12A34",
    "background_color": "#B12A34"
}

Most of the fields are self-explanatory, but let's break down the document and explain them in detail:

  • name: The full name of your web app.
  • short_name: Short name to be shown on the home screen.
  • description: A sentence or two explaining what your app does.
  • icons: A bunch of icon information — source URLs, sizes, and types. Be sure to include at least a few, so that one that fits best will be chosen for the user's device.
  • start_url: The index document to launch when starting the app.
  • display: How the app is displayed; can be fullscreen, standalone, minimal-ui, or browser
  • theme_color: A primary color for the UI, used by operating system
  • background_color: A color for background, used during install and on the splash screen

The bare minimum requirement for a web manifest is name and at least one icon (with src, size and type). The description, short_name, and start_url are recommended. There are even more fields you can use than listed above — be sure to check the Web App Manifest reference for details.

ホーム画面に追加

"Add to home screen" (or a2hs for short) is a feature implemented by mobile browsers that takes the information found in an app's web manifest and uses them to represent the app on the device's home screen with an icon and name. This only works if the app meets all the necessary requirements, as described above.

When the user visits the PWA with a supporting mobile browser, it should display a banner indicating that it's possible to install the app as a PWA.

Add to Home screen popup of js13kPWA.

After the user clicks this banner, the install banner is shown. That banner is automatically created by the browser, based on the information from the manifest file — the name and icon are visible on the prompt.

Install banner of js13kPWA.

If the user clicks the button, there is a final step showing what the app will look like, and letting the user choose if they definitely want to add the app.

Add to Home screen popup of js13kPWA.

When confirmed, the app will be installed on the home screen.

After that, the user can launch it and start using it immediately. Notice that PWAs  sometimes (depending on the browser or mobile operating system you are using) have a small browser image on the bottom right corner of their icon to inform the user about their web nature.

スプラッシュ画面

In some browsers, a splash screen is also generated from the information in the manifest, which is shown when the PWA is launched.

The icon and the theme and background colors are used to create this screen.

まとめ

In this article, we learned about how we can make PWAs installable, using web manifest and Add to home screen.

For more information on Add to Home screen, be sure to read our Add to Home screen guide. Browser support is currently limited to Firefox for Android 58+, Mobile Chrome and Android Webview 31+, and Opera for Android 32+, but this should improve in the near future.

Now let's move to the last piece of the PWA puzzle — re-engagement via push notifications.

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,