knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

PWA / Progressive Web Apps の初級編、PC デスクトップ版

index:

概要

PWA / Progressive Web Apps で
PC デスクトップ版のインストール、PWA起動
あたりまでの、実装となります

・PCデスクトップ版、スマホ/android等の
 マルチデバイス環境に対応しているようですので
 試してみました
 iOS/ safariは、push通知に対応してないようです。

環境

chrome 81
javascript
netlify.com / ホスティングサービス
SSL必須のようです

参考のコード

github.com

実装など

・ 今回は、netlifyに設置して。テストしました
 SSL対応であれば、動作するようです

・manifest.json
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/manifest.json

{
"short_name": "PWA-3",
"name": "PWA sample app-3",
"display": "standalone",
"orientation": "portrait",
"start_url": "index.html",
"icons": [
	{
		"src": "images/icon.png",
		"sizes": "192x192",
		"type": "image/png"
	}
]
}

・index.html
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>PWA-3</title>
	<link rel="stylesheet" href="./bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="manifest" href="./manifest.json">
	<!-- vue.js -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>  
</head>
<body>
	<div class="container">
		<h1>PWA-3 : ver 4</h1>
		<hr />
		<div id="app">
			<p>{{ message }}</p>
			<button v-on:click="proc_click">Count</button>
		</div>
	</div>
<!-- --->
<script>
"use strict";
registSW();
function registSW() {
	if ('serviceWorker' in navigator) {
		window.addEventListener('load', function () {
		navigator.serviceWorker.register('./sw.js', { scope: './' }).then(function (registration) {
			console.log('ServiceWorker registration successful with scope: ', registration.scope);
		}, function (err) {
			console.log('ServiceWorker registration failed: ', err);
		});
		});
	}
}
// vue.jsの設定関係
var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello!!',
		count : 0
	},
	methods: {
		proc_click: function () {
			this.count = this.count +1;
			this.message = "count : " + this.count;
		}
	}
});
</script>
</body>
</html>

・sw.js
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/sw.js

// Service Worker のバージョンとキャッシュする App Shell を定義する
const NAME = 'pwa-test-app-v3-';
const VERSION = '003';
const CACHE_NAME = NAME + VERSION;
const urlsToCache = [
  './index.html',
  './bootstrap.min.css',
];

// Service Worker へファイルをインストール
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// キャッシュからレスポンスを返す
self.addEventListener('fetch', function (event) {
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
    return;
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

//
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!CACHE_NAME.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log(CACHE_NAME + "activated");
    })
  );
});

画面など

 作成した、PWAアプリの画面、インストール手順となります

・index.html を、SSLサイトにデプロイし
 ブラウザで開きます
・インストール
 PC 版chromeの場合、URL部分の、右側のお気に入りの
 左側に 丸い「+」ボタンのような。アイコン出ます

f:id:knaka0209:20200419124920p:plain

・上記の+を、押す。
 インストールの、ポップアップみたいな画面で。
 「インストール」押します
f:id:knaka0209:20200419125208p:plain

windows デスクトップに、移動アイコンが
 追加され。
 PWAアプリが、起動されました。
 中身は、vue.js で書いた、試しのwebアプリ です。

f:id:knaka0209:20200419125556p:plain

android / スマホ

・インストール URLから、
 chromeの、メニュー、で
 「ホーム画面に追加」 を実行

f:id:knaka0209:20200419130739j:plain

・インストール画面で、
 追加を、押すと。PWAアプリが追加されました

f:id:knaka0209:20200419130812j:plain

・画面の、追加された起動アイコンを押し
 アプリ画面が、起動されました。中身はwebアプリですが
 スマホchromeブラウザとは異なり。
 URL入力が無かったり。ネイティブっぽい画面ですね

f:id:knaka0209:20200419130906j:plain