WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

公開日: : android, html5, javascript, PWA

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。
具体的には、スマホで最近よく見かける「ホームボタンに追加」をつけようと思います。

そういう、WEBページをアプリっぽくすることを、PWA(Progressive Web Apps)というらしいです。

PWA を調べていると、この参考サイト のまんまでしたが。
一応ここでも簡単にやってみようと思います。

「ホームボタンに追加」が可能な条件

SSL 化されている

他に「滞在時間」や「2回以上の訪問」などの条件もあるみたいですが、ちょいちょい変更されるらしいです。

サービスワーカーのアイコンを作る

まずは、アイコンを作ります。

アイコンのサイズ

サイズは最低 192 × 192 px です。
手書きメモ張アプリのアイコン
その他小さいサイズのアイコンも用意してもいいですが、しなくても自動で小さいものが表示するらしいので、今回はこのようなアイコンひとつにしました。

manifest.json

manifest.json ファイルを作る

manifest.json ファイルを作ります。

{
	"lang": "ja",
	"name": "手書きメモ張 - WEBアプリ",
	"short_name": "手書きメモ張",
	"start_url": "./",
	"display": "fullscreen",
	"background_color": "#fff",
	"icons": [{
        "src": "./memotyo192.png",
    	"sizes": "192x192",
        "type": "image/png"
      }]
}

中身はこのようにしました。

今回 display は fullscreen にしましたが、全4種類あります。

fullscreen サイトを全画面表示。ブラウザの UI は非表示。
standalone サイトを全画面表示。ステータスバーなど一部の UI は表示。
minimal-ui 最低限のブラウザの UI を表示。
browser 通常のブラウザで開いた時と同じ。

manifest.json を読み込む

head 内にコード追加します。

<link rel="manifest" href="./manifest.json">

Service Worker(サービスワーカー)の登録

sw.js をつくる

<サービスワーカーのファイルについて>

  • ファイルはあった方がいいかも
  • 中身も書いた方がいいかも

条件が不確かなのではっきりは分かりませんが、サービスワーカーのファイルはなくてもいいと思い込んでいましたが、あった方がいい気がしました。

中身も空でも大丈夫な場合もありましたが、以下のように入れないと出ないような環境もあったので、サービスワーカーのファイル sw.js を以下のように作りました。

// インストール
self.addEventListener('install', (event) => {

	// とりあえず何もしません

});

// 起動
self.addEventListener('activate', (event) => {

	// とりあえず何もしません

});

// ネットワークリクエスト
self.addEventListener('fetch', (event) => {

	// とりあえず何もしません

});

参考サイトと同じにしました。

サービスワーカーの登録

head内に Javascript を入れます。

<script>
// サービスワーカー対応ブラウザだったら
window.addEventListener('load', function() {
if ('serviceWorker' in navigator){
	navigator.serviceWorker.register('sw.js').then(function(registration){
	});
}
});
</script>

ホーム画面に追加が出ない

ブラウザの開発ツールで確認

出来ない場合は、F12ボタンを押して開発ツールを見ます。
manifest.json でエラー ホーム画面に追加が出ない
自分の場合はこんな感じのエラーでした。

Unsupported encoding.JSON must be UTF-8.

manifest.json を UTF-8 にしたら出来ました。( sw.js もUTF-8にしました。)
WEBページをアプリっぽくする(ホーム画面に追加)
タイトルが切れてるので、5文字くらいのがよかったかもしれません。

完成デモはこちら。
DEMO を見る

関連記事

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

HTML5 とは?

HTML5とは? HTML5は、標準化団体のW3C(World Wide Web Consorti

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

android html5 javascript PWA

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

→もっと見る

    • 201909
      Mon Tue Wed Thu Fri Sat Sun
      1
      2345678
      9101112131415
      16171819202122
      23242526272829
      30
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑