[PWA]適切な方法クラウドノートオフラインアクセスの実現(H5マニフェスト)

誤っノートはまだ代わりに、通常の404で、PCより使いやすいインターフェイスをオフラインの公式サイトを見ることができる適切な方法を見つけました

具体的な実装を知りたい、グループは、フロントエンドによって浸潤されていた、この生活の中で兄を行っているが、キーワードPWA技術のことを聞いたことがありますか?

その下のHTML + JSで純粋な静的なページは、それが達成することが可能であるならば不思議~~~、ライブサービス側のように見えました

フォロー

 

擬似兄は明らかに、フロントエンドの問題は、ラベルが「PWA(プログレッシブWebアプリケーション)のプログレッシブWebアプリケーション」を言わなければならない解決することができ、負荷力のようなものです

参考新人チュートリアルhttp://www.runoob.com/html/html5-app-cache.html

アイデアの実現:

htmlページ1. <html>タグのプラスマニフェスト属性、すなわち

<html manifest="txx.manifest">
<head></head>
<body></body>
</html>

設定ファイルのパス名のtxx.manifestが必要ですが、我々は見つけなければならなかったされていません

2.新規または変更されたファイルtxx.manifest

マニフェストファイル

マニフェストファイルには、キャッシュの内容をブラウザに指示します(キャッシュコンテンツはありません)単純なテキストファイルです。

マニフェストファイルは、3つの部分に分割することができます。

  • MANIFEST CACHE -このタイトルでは、次のファイルは、最初のダウンロード後にキャッシュされます
  • NETWORK -文書の見出しには、サーバーに接続する必要があり、キャッシュされません
  • FALLBACK -ページのときにアクセスできないとき、この文書の見出しには、(例えばページ404のような)代替ページを指定します

だから、ファイルとmainfest大体長い道のり

#这些会缓存
CACHE MANIFEST
#修改备注信息时会更新缓存,所以一般建议在这行加个版本信息 version 1.2
index.html

#这些不缓存
NETWORK
login.html

#这些是找不到时备选
FALLBACK
#当/txx/1.jpg找不到时,会去找/txx_backup/1.jpg
/txx /txx_backup

3.サーバを設定

nginxのと例えば

オープンmime.typesファイル、ライン構成を追加

text/cache-manifest                   mf manifest;

 

コンソールを開くには、設定ページには、次の情報が表示されます後

次に、ネットワークケーブルを引っ張って、ページの外観をリフレッシュ〜

しかし、それは特に安定していないようです。

公開された35元の記事 ウォン称賛18 ビュー370 000 +

おすすめ

転載: blog.csdn.net/TXX_c/article/details/82697474