過去の遺産をPWA化したはなし

2pt   2018-11-09 10:31
IT技術情報局

過去に作ったクソアプリをPWA化する

未だにさくらインターネットのレンタルサーバーではPython3系動きません。が、まぁ過去に作ったクソアプリケーションをなんとかしたい。とりあえずPWA化の練習に使えばいいんじゃないかと思ってはじめました。

準備

基本的に色々なところで書かれていますが本日現在バッチリ動くために必要なファイルをサーバーにアップしましょう。

manifest.json { "short_name": "QRさん", "name": "QRコードクリエイトアプリ", "display": "standalone", "start_url": "index.html", "background_color": "#333", "theme_color": "#fff", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ] }

説明的なのはまぁ他の記事が詳しいので。
“sizes”: “192×192″ が存在していないとバナーが追加されないそうです。

service-worker.js self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); }); self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); }); self.addEventListener('fetch', function(event) {});

ここまで出来たらあとは index.htmlに以下を追加するだけ。

head 内にこういう形で追加。

index.html <head> <link rel="manifest" href="manifest.json"> <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="QRさん"> <link rel="apple-touch-icon" href="icon.png"> </head>

Service-workerは以下のように書き入れます。

index.html if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { console.log('ServiceWorker registration failed: ', err); }); }

ちなみにSSL化されていない場合は使えません。

https://app.jiriki.co.jp/qr/

こういう感じになります。
アプリっぽい挙動になるのは面白いですよね。

68747470733a2f2f71696974612d696d6167652d

これを踏まえてWordpressのサイトやブログも片っ端からPWA化してみましたとさ。

Source: python tag

   ITアンテナトップページへ
情報処理/ITの話題が沢山。