Next.js: オフラインファーストサポート

説明/ドキュメント/例とともに、これも機能することを絶対に望んでいます。

next / prefetchはデータをプリフェッチしないため、オフライン動作をまだ実際には許可していないことに注意してください： //github.com/zeit/next.js/issues/740

Next.jsとは直接関係ありませんが、実際にどれだけのデータをオフラインに保つことができるのか（たとえば、Webアプリにビデオなどがある場合-ブラウザーに厳しい制限がありますか？モバイルについてはどうですか？）、ユーザーは具体的にどのようにできますか？後で使用するために事前にダウンロードするものを1つ要求します。https：

プラットフォーム、ブラウザ、バージョンによってデータ制限は異なります。 「ブラウザストレージの悪用者」で制限をテストできます： //demo.agektmr.com/storage/

オフラインストレージとキャッシュを目的とした標準化された方法はIndexedDBです。 iOS Safari（v10）でもサポートされるようになりましたが、パフォーマンスの問題があります。 それ以外の場合は、現在幅広いサポートがあります： http ：//caniuse.com/#feat = indexeddb

たとえば、PouchDBはSafariでIndexedDBの代わりにWebSQLを使用します。 https://github.com/pouchdb/pouchdb/issues/5572
localForageと同じ： https ：

PouchDBには、データ制限の優れた要約があります： https ：//pouchdb.com/faq.html#data_limits（少し古くなっています）
また、このさらに古い記事では、モバイルブラウザに関するストレージ不足エラーやその他の側面を処理する方法についても説明していますhttps://www.html5rocks.com/en/tutorials/offline/quota-research/

一部のブラウザでは、現在の割り当てをクエリして、より永続的なストレージをリクエストすることもできます： https ：//jakearchibald.com/2014/offline-cookbook/#cache -persistence

もう1つの方法は、長いキャッシュ有効期限値と不変のキャッシュ制御をServiceWorkerと一緒に使用することです。 これにより、選択したリソースごとにhttpリクエストを行うだけで、ユーザー指定のキャッシュが簡単に可能になります。 これは、古いブラウザでも非常にうまく機能します。 ただし、制限を回避するためにさまざまなキャッシュを維持および手動で削除できるようにすることは、ServiceWorkerをサポートするブラウザーでのみ可能です。
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

スペースが不足すると、ブラウザは制限内になるまで一度にオリジン全体を削除できることを覚えておいてください。
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

Addy Osmaniによる別の有用な記事： https ：

どうやら、作業中のストレージAPIもあります： //storage.spec.whatwg.org/

これにより、実際に永続的なストレージが可能になります。
「従来、ユーザーがデバイスのストレージスペースを使い果たすと、これらのAPIで保存されたデータは、ユーザーが介入できずに失われます。ただし、永続的なボックスは、ユーザーの同意なしにクリアすることはできません。これにより、ユーザーはデータを保証できます。ウェブへのネイティブプラットフォームで楽しんできました。」

IMOがサイト/アプリをオフラインで機能させるには、フレームワークが単独で行うべきではない多くの決定が含まれます。 Service Workerを使用してオフラインで動作するサイトの例を取り上げますが、アプリの種類ごとに異なる手法があります。

@impronunciableに感謝し

あなたはどのような決定について話しているのですか？ 問題を2つの主要な問題に分けることができると思います。

1）静的アセットのキャッシュ：js、HTML、画像などのように...これは、少なくともオフラインフレーバーで/static除いて、ほぼすでに実装されており、reactを使用していることを考えると、 webpackを介した1つの好ましい実装-オフラインおよびサービスワーカー。

2）データキャッシング：状態、クエリ、揮発性データ、....少なくともユーザーがデータをロードする方法を推測する必要があるため、より多くの懸念が生じます。 たぶん、reduxで状態を保持する方法を示すことができれば、人々は好きなようにデータをreduxに入れるでしょう。 あるいは、クエリとミューテーションをキャッシュすることでそのようなケースをカバーする必要があるGraphQL / Apolloを使用することもできます。

@servermetaそれは本当にあなたのケースに依存します。 プラグインを使用せずに、カスタムサーバーとhttps://serviceworke.rs/の戦略だけを使用して、積極的なキャッシュ戦略の実装を完了してい

私はそれをここで機能させてい

ありがとう@ooade 、よくやった、あなたは私に多くの時間を節約した。

とにかく、更新とリロードの間、状態が持続しないことがわかります。 この機能を追加する方法を考えてみます。

@ooadeに感謝し

問題を分割する必要があると思います。オフラインデータの取得は開発者に任せるべきですが、reduxの状態は維持できます。 これをチェックして：

https://github.com/rt2zz/redux-persist

これにより、状態をlocalstorageに保存できるため、更新、再読み込み、タブ、セッションの間で状態を維持できます。

みなさん、こんにちは。 Googleの私のチームは、React / Webpackで使用されるhttps://github.com/GoogleChrome/sw-precacheやhttps://github.com/GoogleChrome/sw-toolboxなどのいくつかのServiceWorkerライブラリ（Webpackプラグインを使用）に取り組んでいます。 Lyft、Housing.com、Flipkartなどのサイト。

Nextがオフラインサポートを検討することを決定した場合、いくつかのポイントを共有させていただきます。 コード分​​割がすでに行われていることを考えると、 PRPLのようなパターンを

これらのページの即時リピートロードを提供することに加えて、V8のコードキャッシングを早期に選択できるため、リピートアクセスの解析/コンパイル時間が現在よりも短くなります。

これのどれかが面白い@rauchgなら、

@addyosmaniオフラインサポートは、2.0以降の安定した最優先事項の1つです。

@rauchg 2.0の安定リリース日に関する見積もりはありますか？
私たちは本番環境を完全に開始しようとしています。Next.jsを使用したいと思います。
日/週/月など、あらゆる種類の見積もりに感謝します...
どうもありがとう！

@ Ajar-Ajar2.0.0が本日リリースされました。

@rauchgはオフラインファーストのサポートがここで追跡される予定ですか、それとも別の問題を作成する予定ですか？

@jevakallioによる新しくオープンソースのredux-offlineもご覧ください。 次の+ redux-offlineの例があると素晴らしいでしょう。

これを実現する方法についての情報はありますか？next.config.jsを実行してオフラインプラグインをインストールしようとしましたが、機能させることができませんでした。 次は素晴らしいプロジェクトですが、この機能（オフラインファースト）をすぐに使用できれば、非常に完全（そしてクール）になります！

@ saulflores95 @ ooadeのNextSimpleStarterの方法を使用するとうまくいきました:)

@AugustinLFNextSimpleStarterはオフライン機能を提供していません。 https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

@seduboisこれを読んで来る人にとって、それは少し誇張です。 公平を期すために、sw-precacheとsw-toolboxを使用したオフライン機能がいくつかあります。 私のアプリはこれら2つのツールだけでオフラインで動作しますが、アプリの初期状態は変わりません。 具体的に言うと、最初に送信されたものを超えて状態を構築するためのオフラインソリューションは提供されていないと言えます。

@ timmywil 、nextjsオフライン対応アプリのGitHubリポジトリはありますか？ ありがとう。

Safariに必要なappcacheを使用して、オフラインをサポートする次の（ベータ）バージョンを作成しました。 http://github.com/ssured/nownextmicroをご覧

やあ、ボイラープレートにオフラインサポートを追加しました。
https://github.com/Sly777/ran

少しバグがあります。 だからそれが「実験的」と名付けられた理由です😄とにかく、それが役立つことを願っています。

@rauchgこの機能はまだ優先事項ですか？

@rauchg next.js 4.0ベータ版がリリースされましたが、オフラインの最初のサポートがそのバージョンのロードマップに含まれる可能性はありますか？

機能のニュースをお願いします^^

Next.js 5.0がリリースされました（おめでとうございます！）が、オフラインサポートについての言及はありません。共有したい新しいロードマップはありますか？ これまでに行われた素晴らしい仕事に感謝します

@idhard実際には、デフォルトではオフラインサポートをサポートしない可能性があります。
（しかし、状況は変わるかもしれません）

しかし、Next.jsが魔法を使わないようにする過程にあります。 そのため、直接webpackプラグインとローダーをそのまま使用できます。
次の5つはステップ1です。

@idhard包括的なオフラインサポートについては直感に反すると思います。一部のアプリでは、この機能を有効にしたくないことは間違いありません。

私の個人的なウェブサイトでは、このhttps://github.com/zeit/next.js/tree/canary/examples/with-sw-precacheを使用しています。また、iOSのEazeでの本番

@hanfordええ同様の議論がCRAで行われ、デフォルトでWebworkerのサポートが削除されることになります（https://github.com/facebook/create-react-app/issues/2554#event-1431558318）、しかし私はまだWebworkersだと思いますとPWAはオフラインサポートの事実上のソリューションになるので、Nextのチームが事前にフェッチされたページなどの公式サポートを追加する計画があるかどうかを知っておくとよいでしょう。

@idhardええ、コアチームにとって興味深いジレンマのようなものです。 私は上記のsw-precacheプラグインに本当に満足しています。

私の個人的なウェブサイトは、静的ディレクトリからmanifest.jsonを提供するとともに、sw-precachewebpackプラグインを使用しています。 興味があれば、コードはここにあります..コミットは少しずさんですが、先週中にオフラインサポートとマニフェストjsonを追加しました。

@hanford iOS 11.3で何が起こりますか、サービスワーカーがいますか？ 詳細についての参考資料はありますか？

@hanford @idhard CRAのずっと前にサービスワーカーを試しましたが、多くの問題がありました。
そのため、従来のWebキャッシング技術のみを使用してプリフェッチソリューションを構築することにしました。
それは驚くほどうまく機能します。 新しい一連の改善が間もなく開始されます。

はい、もちろんオフラインはSWが必要な場所です。
しかし、それは非常に不安定で、APIを使用するのは難しいです。 物事がうまくいかず、サイトが壊れる可能性があります。

ですから、私たちは自分たちでそれをしたくないかもしれません。
ただし、ユーザーがNext.jsプラグインを介してsw-precacheなどを使用できるようにしたい（または単にWebpackローダーとプラグインのセットを追加する）

@sedubioisは、iOS SafariでのAppleの計画について、 https： //developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.htmlを参照してください。 サービスワーカーが発表されました

うん@ ssured @ seduboisサービスワーカーは

@arunodaが示唆しているのは、 Next.js現在のキャッシュ戦略（キャッシュ制御ヘッダー、etagなど）はサービスワーカーよりもはるかに安定しているということです。 サービスワーカーは、特にネットワークリクエストをより細かく制御する（キャッシュされたコンテンツを早期に返す）など、いくつかの非常に優れた新機能を有効にします。しかし、Next.jsがどこでも機能し、オーバーヘッドが大幅に少なくなります。

@ssured @sedubois先日Zeitがリリースしたプラグインと同じように機能する小さなプラグインを作成しました。オフラインの次のアプリを軽減し、既存のアプリに簡単にプラグインできるはずです。

フィードバックがありましたらお知らせください。 https://github.com/hanford/next-offline

@hanford私たちの生活を少し楽にしてくれてありがとう
@arunoda next.js 5でのプラグインのサポートは素晴らしいですが、すべてのプラグインが補助ではなく、すべての例と同じようにメインのnext.jsリポジトリプラグインフォルダーでホストされていると、コミュニティにとってはるかに有益ではないでしょうか。レポ？ ほとんどの開発者はメインリポジトリにアクセスするため、潜在的なプラグイン開発者はプルリクエストを作成するインセンティブがはるかに高くなり、個別のリポジトリの結果として発生する繰り返しと避けられないプラグインエコシステムの断片化によるコミュニティの時間の浪費を節約できます。

先に進むために何をすべきかをまだ決定している他の人のために、私は比較的簡単にsw-precache webpackプラグインも利用しました（例、再び）。

私は自分のソリューションを使用していましたが、ハンフォードが提供するソリューションに切り替えました。 プラグインがServiceWorkerを自動登録するのを停止するために、next.config.jsにいくつかの変更を加える必要がありましたが、正常に機能しているようです。

これをカスタムサーバーで機能させる方法を理解する必要があります。 たとえば、article /：slugとしてルートを設定しています。 これらのURLのいずれかにアクセスすると、サービスワーカーはそのURLのドキュメントをディスパッチしようとしています。 誰かが私がそれを止めて代わりに記事を提供させる方法を知っていますか？ これは、ワークボックスの設定に関連していると思います。

今後のNextJSリリースでは、サービスワーカーの統合やオフラインサポートを引き続き期待する必要がありますか？ 以前は優先機能だと言っていた方もいらっしゃると思いますが、この問題は1年半以上続いています...

@ caribou-code Next.jsの計画についてZeitチームについて話すことはできませんが、少し前にこれを書きました： https ：

私はいくつかのアプリケーションでそれを使用しました、そしてそれはかなりうまくいきました。 内部的には、非常にエキサイティングなプロジェクトであるgooglesワークボックスを利用しています：

next-offlineを使用するいくつかの例：

• https://github.com/hanford/trends
• https://github.com/hanford/personal-website

@hanfordここに投稿する前にnext-offlineを使用していましたが、かなり良いです！ 実際、これまでに実装できた唯一のソリューションであり、実際に機能します。 よくできました！

ただし、NextJSリポジトリにこの例があるため、 sw-precache-webpack-pluginで動作するソリューションを取得し

この問題を解決するために、1年前にNextSimpleStarterを作成し

ただし、現在の標準（アイコンサイズなど）にはまだ更新しておらず、数日で修正する予定です。 お気軽にお試しください。 満足のいくものが見つからない場合は、問題を削除してください。

@hanfordこれはよさそうだ。 開発モードで実行されますが、そのモードではServiceWorkerがありません。 あなたのreadmeから、本番モードで、Service Workerを使用し、ノードサーバーを使用せずに動作させる方法を知ることはできません。 また、アプリをNetlifyにデプロイし、 next exportます。 私のアプリは完全に静的です。 それが問題であれば、 next exportを使用しなくても問題ありません。 私は最もパフォーマンスの高いものを何でもしますが、費用はかかりません。 趣味のアプリなので柔軟です。

@ooadeこれも見栄えがしますが、起動

A bad HTTP response code (404) was received when fetching the script.

@dancancroあなたは間違いなく使用することができるはずnext-offlineも利用しながら、 next-export

next-offlineで問題を開いて、再現するためのいくつかの手順を実行して、詳細を確認できるようにしてください。

@hanford必要に指示です。 唯一の問題は、本番モードで実行する方法がわからないことです。 この状態から判断すると、サービスワーカーは開発モードで登録されていないはずなので、私に起こったことは予想される動作です。 いくつかの指示が必要です-本番モードで実行する方法、そしてnext exportが可能な場合は、 next export使用して本番モードで静的なサーバーレンダリングコードを実行する方法。

@dancancro私は理解していますが、その議論はここで行われるべきではありません。これは確かにNext.js自体の問題ではありません。

こちらで問題を開いてください。ご不明な点がございましたら、お気軽にお問い合わせください。

関係のない問題/レポで議論した場合、コミュニティは利益を得ません

私は最近、Next.js用の使いやすいゼロ構成PWAプラグインを作成しました： next-pwa

こちらの例をご覧ください