Chromebookで作るPWAアプリ日記1

こんにちは、junkawaです。

あえて制限のある環境で作業をすることで、鍛えられる(知的生産の)筋肉があると思うんです。

ということで、ChromebookでPWA(Progressive Web Apps)を作ってみようと思います。

備忘録的な日記なので、手順が前後することや抜けがあるかもしれません。ご容赦ください。

リクエストがあれば、チュートリアルを作成するかもしれません。

Web系の開発は経験が少なく、Google Apps ScriptやChromeアプリで簡単な内製ツールを作った程度です。

これを機会に、最近のフロントエンドを学習したいです。

環境
マシン：ASUS Chromebook flip C101PA
        // 数年前に購入してあまり使っていなかった
ターミナル：termux (Androidアプリ)
        // Linuxアプリが使えるようになったらそちらに移行
サーバ: GitHub Pages
        // 無料でかつhttpsが使えるため

目標
Chromebook購入費用を、広告収入(アドセンス)で回収する

開発環境構築

ターミナル termux のインストール

Chromebook に Android アプリをインストールする - Chromebook ヘルプ

Google Playを起動し、termuxをインストールします。

termuxの環境構築

$ pkg upgrade
$ pkg install emacs # お好みのエディタをインストール 

パッケージを最新にします。

$ termux-setup-emulated # chromeosのフォルダにアクセスできるようにする
$ ls storage/downloads
$ cd storage/dowloads
$ mkdir workspace
$ cd workspace

Chromeosのダウンロードフォルダ以下で作業をします。

サンプルアプリを試す

Your First Progressive Web App  |  Web Fundamentals  |  Google Developers

を試して、ServiceWorker、manifestの概要について学びます。

上記の日本語ページは、大変役に立つのですが、英語版の最新ページに追従していないため(ダウンロードファイルなどの)リンクが切れている箇所があります。

英語ページを主、日本語ページを副として読むのがおすすめです。

サンプルアプリを手動でダウンロードし、termuxで作業フォルダにコピーします。

$ unzip ../your-first-pwapp-master.zip
$ cd your-first-pwapp-master/work

上記サイトの手順にしたがってwork以下のファイルを編集します。

今日は以上です。

コメントいただければ励みになります。