Penyelesaian aplikasi luar talian HTML5 untuk mencipta kemahiran tutorial tapak web_html5 tanpa permintaan tanpa trafik

Kata Pengantar

Aplikasi Web hari ini sudah sangat kompleks Dengan perkembangan semasa, mereka akan menjadi lebih kompleks Namun, mereka mempunyai kecacatan yang membawa maut, iaitu ia tidak boleh diputuskan daripada Internet kepada HTML,

Ia menggunakan mekanisme storan tempatan untuk menyelesaikan masalah ini dengan baik, membuka jalan untuk aplikasi web luar talian.
Cache tempatan dalam cache penyemak imbas

Salin kod

Kod adalah seperti berikut:

Cache setempat menyediakan keseluruhan aplikasi web
Cache penyemak imbas hanya menyediakan satu halaman web

Mana-mana halaman web mempunyai cache halaman web
Cache setempat hanya menyimpan cache halaman yang anda tentukan untuk cache

Cache halaman web tidak boleh dipercayai dan tidak selamat kerana kami tidak tahu halaman dan sumber mana yang dicache dalam tapak web
Cache tempatan boleh mengawal kandungan yang dicache

manifes fail

Cache tempatan aplikasi web diuruskan melalui fail manifes setiap halaman Manifes ialah teks ringkas di mana nama dan laluan fail yang perlu dicache dan tidak perlu dicache disenaraikan dalam borang. daripada senarai.

Manifes boleh ditentukan secara individu untuk setiap halaman atau untuk keseluruhan aplikasi Contohnya, tetapan kami untuk hello.htm:

Salin kodKodnya adalah seperti berikut:

MANIFEST CACHE
CACHE:
other.html
hellow.js
images/myphoto.jpg
RANGKAIAN :
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:newhellow.html 🎜>newhellow .js


Dalam fail manifes, baris pertama mestilah CACHE MANIFEST untuk memberitahu pelayar peranan teks, iaitu, untuk membuat tetapan khusus untuk fail sumber dalam setempat cache.
Apabila anda benar-benar menjalankan aplikasi web luar talian pada masa yang sama, anda perlu mengkonfigurasi pelayan supaya pelayan menyokong jenis mime manifes teks/cache.

Apabila menentukan fail sumber fail, fail sumber boleh dibahagikan kepada tiga kategori, CACHE, NETWORK dan FALLBACK

Salin kod

Kodnya adalah seperti berikut:

Nyatakan fail sumber yang perlu dicache secara setempat dalam kategori CACHE Apabila menentukan fail sumber yang perlu dicache secara setempat untuk halaman tertentu, anda tidak perlu menentukan halaman itu sendiri dalam kategori CACHE,

. kerana jika halaman Dengan fail manifes, penyemak imbas akan secara automatik cache halaman secara setempat

Kategori NETWORK ialah fail sumber yang dinyatakan secara eksplisit untuk tidak disimpan dalam cache tidak akan dicache

Setiap baris dalam kategori FALLBACK menentukan dua fail sumber Fail sumber pertama ialah fail sumber yang digunakan apabila ia boleh diakses dalam talian, dan yang kedua ialah fail cache setempat yang digunakan apabila ia tidak boleh diakses dalam talian

<.>

Proses interaksi antara penyemak imbas dan pelayan

Apabila bekerja dengan aplikasi web luar talian, adalah perlu untuk memahami proses interaksi antara penyemak imbas dan pelayan:

Salin kod

Kodnya adalah seperti berikut:Contohnya, http://LuLingniu, dengan index.htm sebagai halaman utama, halaman utama menggunakan index.manifest,

cache index.htm dalam fail, hello.js, hello.jpg, proses untuk lawatan pertama adalah seperti berikut:

Penyemak imbas meminta url

Pelayan mengembalikan halaman utama index.htm
Penyemak imbas menghuraikan indeks. halaman web htm dan meminta semua fail sumber pada halaman
Pelayan mengembalikan fail sumber
Penyemak imbas memproses fail manifes dan meminta fail yang perlu dicache dalam manifes Walaupun ia telah diminta. ia akan memintanya sekali lagi
Pelayan mengembalikan fail yang perlu dicache
Penyemak imbas mengemas kini cache setempat dan menyimpan fail Sumber dan mencetuskan acara untuk memberitahu kemas kini cache setempat.

Buka URL sekali lagi
Minta url
Penyemak imbas mendapati bahawa halaman itu dicache, jadi ia menggunakan fail cache setempat
untuk menghuraikan fail
Penyemak imbas meminta fail manifes daripada pelayan
dan pelayan mengembalikan 304, Maklumkan bahawa fail manifes tidak berubah (ia akan berbeza jika ia berubah)


objek applicationCache

Objek ini mewakili cache setempat, yang boleh digunakan untuk memberitahu pengguna bahawa cache setempat telah dikemas kini dan juga membenarkan pengemaskinian manual cache setempat.

Apabila penyemak imbas mengemas kini cache setempat dan memuatkan fail sumber baharu, peristiwa sedia kemas kini bagi objek applicationCache akan dicetuskan, memberitahu bahawa cache setempat telah diubah suai dan kemudian menggesa pengguna untuk memuat semula halaman secara manual.
swapCache

Kaedah swapCache digunakan untuk melakukan kemas kini cache setempat secara manual Ia hanya boleh dipanggil apabila acara updateReady objek applicationCache dicetuskan,

Iaitu, apabila fail sumber berubah, anda boleh menggunakan kaedah ini untuk cache kemas kini secara manual.