web-dev-qa-db-ja.com

ionic 3 PWA（プログレッシブWebアプリ）としてアプリを公開

アプリをPWAとして公開したいので、私は

このスクリプトをindex.htmlに挿入します

<!--script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
</script-->

次にインストールします

npm run ionic:build --prod

展開しているようですが、私の質問は次のとおりです。

  1. アプリをPWAとして公開するためにホストにアップロードする必要があるのはどのファイルですか？

  2. アプリで何かを変更してionicを実行すると、何も変更されず、WWWフォルダーのindex.htmlでのみ変更されたのはなぜですか？なぜですか？

  3. wwwフォルダーを開き、アラートダイアログを開くボタンを押すとopen index.htmlを実行すると、それが開かれません。どうして？

  4. コマンドを実行するとどうなりますか？開発の終わりにのみ？
ionic-frameworkionic2progressive-web-appsionic3
9
Manspof

走る

ionic cordova platform add browser

ionic build browser --prod --release

次に[project_folder]/platforms/browser/wwwに移動し、httpサーバーにコンテンツをコピーします。

17
Pablo Albaladejo

PWAのためにCordovaを気にしないでください。 npm run build --prodと/wwwフォルダ。

PWAは概念の集まりであり、単なる「オン」または「オフ」ではありません。少なくとも、おそらくマニフェストファイルを追加して、ブラウザーフレームを非表示にしたり、アイコン、アプリ名を設定したりすることで、より「アプリのような」ものにすることができます。ServiceWorkerを追加する行のコメントを外しても、魔法のようにはなりませんService Workerに「有用」なものを何も入れていない場合はPWA（アプリの動作に応じて、行う必要がある場合とない場合があります）。また、Service Workerを使用するにはHTTPSが必要です。

また、cordova.jsを含む行をindex.htmlから手動で削除する必要があります（/ wwwをアップロードした場合は404エラーになります）。

10
Rory

このコマンドを使用してWebアプリを構築します

ionic cordova build browser

次に、IONIC-PROJECT/platforms/browser/wwwからWebサーバーにコンテンツをコピーします。

1
Tejpal Sharma