Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-12-11

PWAでなでしこプログラムをAndroidにインストールしてみるよ!(その1)

| 09:21

 なんでも、PWAなる技術を使うと、ウェブサイトがAndroidにインストール出来るようになって、アプリっぽく起動するらしい!

 りゃやってみないと! とゆうわけで、やってみようと思ったら、https接続でしか出来ないらしい(´・ω・`)(いちおうローカルホストでは出来るらしい)

 ってコトで、コレをお試しする為だけに、さくらインターネットに登録してしまったよ(^▽^;

 さくらのレンタルサーバーでは、ライトプランでも初期ドメインでは共有SSLってのが使えるんだよね。素晴らしい。

 共有SSLは、初期状態から標準で利用中になってるっぽいですね。

 あと、.htaccessに、こんな呪文が必要です。

 httpからhttpsにリダイレクト(?)する呪文です。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

 これで、http接続では出来なかった、位置情報の取得も出来るようになりました。おおぅ!

 こんなことなら、はなっからジオシティーズからのお引っ越し先をここにしとけば良かったけど、ついつい無料のトコで探しちゃったよね。

 

 さてさて、それではとりあえず、前作った単位変換のプログラムで、お試ししてみたいと思います!

 主にココを参考にやっていきます~。

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps#Core_PWA_guides


【ウェブマニフェストの読み込み】

 なんか順番がアレですけど、取りあえずインストールできるようにするのが目的なので、まずは「4.PWAをインストール可能にする方法」から。

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Installable_PWAs


 ウェブマニフェストファイルとアイコンを用意します。

 ウェブマニフェストは、なんか、こんな感じ。

kanzan.webmanifest

 アプリとしての各種設定などを記述するファイルです。

{
  "name":"単位変換 尺貫法⇔メートル法",
  "short_name":"単位変換",
  "description":"尺貫法とメートル法の単位を換算する",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes":"192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes":"512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/pwa-test/1/kanzan_1.html",
  "display": "standalone",
  "theme_color": "#EEF9FF",
  "background_color": "#F9FCFF"
}

 ウェブマニフェストの詳細はここあります

https://developer.mozilla.org/ja/docs/Web/Manifest

 とりあえず「display」は「standalone」にすると、ブラウザタブやタイトルバー表示されず、アプリっぽくなります。

 アイコンは、サンプルのソースを見るとべらぼうにいっぱい登録されていますが、最低限の要件として「少なくとも1つのアイコン」とあるので、ならとりあえず一個あれば良いのだろうと思ったのですが、「少なくとも192 x 192 pxのアイコンと512 x 512 pxのアイコンを用意する必要あります」という説もあり。

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja#%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

 512pxのアイコンが無いと、アプリ起動時に表示されるアイコンが出ない感じでした。


kanzan_1.html

 して、HTMLのheadにlinkタグでウェブマニフェストファイルを読み込むためのリンクを設置します。

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

 あと、iPhoneはウェブマニフェストがまだサポートされてないらしく、代わりにこんなmetaタグを追加するってコトなんですが、iPhone無いからお試し出来ません;

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="単位変換">
<link rel="apple-touch-icon" href="icon-192.png">

 とりあえずこれで、Androidchromeメニューからホーム画面に追加すると、ホームにアイコンが出来て、ぽい感じに起動するようになりました!

 Firefoxでは、URLバーの横っちょに家の形に+のアイコンが表示されて、インストール出来ることをお知らせしてくれちゃいます!

https://yamato-nadesiko.sakura.ne.jp/pwa-test/1/kanzan_1.html

 まあ・・・たったこんだけの筈だったんですがね・・・

 どうもうまくいかず延々はまった(´д`)

 JSONさん違えてただけだった。最後の項目にさりげなく「,」が入っててっヽ(;´Д`)ノ


 とっ、ともかく、何もしていないPWA未対応の状態だと、chromeメニューからホームに追加するをしても、ホームには単にサイトへのショートカットができるだけです。

https://yamato-nadesiko.sakura.ne.jp/pwa-test/0/kanzan_0.html

 比べて悦に入り、気を取り直しますw

 よきよきー♪


 とはいえ、こんだけだとマニフェストにしたがってホームのアイコンが変わり、standaloneでぽい見た目になってるだけで、実際にはショートカット出来てるだけと、変わりはないですね。

 ブラウザで、インストール出来る感を出してくれるのは、AndroidFirefoxだけですし。

 次は、サービスワーカーについて学びます☆


《続きます》

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20191211