PWA初探侦整理
5183 ワード
重要な特性 Web App Manifest–メイン画面にapアイコンを追加し、携帯タイトルバーの色などを定義する App Shell–APPの主な構造を先に表示し、メインデータを充填し、より良い体験を表示する. Service Worker-キャッシュ、オフライン開発、地理的位置情報処理などの Push Notifion-メッセージプッシュ Service Workカー
ブラウザ側のプロキシサーバを実行します.
基本的な特徴イベント駆動型サービススレッド httpsまたはlocal host にしか基づくことができません.は、ページが送信するネットワーク要求の処理方法 を制御することができる.ブラウザのバックグラウンドでスクリプトを実行します.dom を直接操作できません.
ライフサイクル
イベントをサポート
レジスターは、メインスレッドコードに を登録する.はscopeを指定することができ、通常はウェブサイトルートに指定し、すべてのfetchイベント をブロックすることができます. service workerはすでに登録されています.ブラウザは上のコード を自動的に無視します.
キャッシュファイル
installed/waiting
この状態では、ウォーカーは有効ですが、まだ起動されていません.まだdocumentの制御に組み入れられていません.確実に現在のウォーカーからの引き継ぎを待っています.
sw.jsは更新されましたが、ページはずっとマウントされています.クローズまたは強制更新されていません.この時、前のバージョンのswはまだ作業中です.新しいswは待機中です.
キャッシュの更新
fetch
プロキシ要求
メッセージ
swとメインライン間の双方向通信は、バックグラウンドデータ同期 は、アルバムの後ろの数枚の写真 のようなユーザに必要なリソースをプリフェッチする.は、バックグラウンドにおいて、地理的位置やジャイロ情報などの計算コストの高いデータ更新を受信し、複数のページで同じグループのデータ を利用することができる.
Cache APIは、GET要求のみをキャッシュすることができる. は、自分のドメインに属する要求をキャッシュし、ドメインをまたぐ要求をキャッシュしても良いが、ドメインをまたいで要求されたRequestおよびResonseを変更することはできない. キャッシュの更新は自分で を実現する必要があります.キャッシュは有効期限が切れません.手動で削除しない限り、サイズに制限があります.LRUは を削除します.
caches.open
cacheを作成します
cache.add/addAllは、Requesturl への着信をサポートしています.キャッシュリソースは、単一および配列 をサポートする. cache.addの内部で自動的にfetchを呼び出してrequestの要求結果を取り戻して、それからreponseをcache に預け入れます.
cache.putはcache.addの第二のステップに相当します.つまり、fetchがreponseに来てからcache に預け入れます.ドメインをまたぐ要求を直接キャッシュできません.レスポンス.statusは0に戻ります. は、ドメインをまたぐリソースがCORSをサポートする場合、requestのmodをcos に変更することができる.
caches.match
いくつかの使用点セグメントキャッシュ、インストール成功率を向上させる. は、重要ではないリソースを先にインストールし、重要なリソース をインストールします.
漸進式キャッシュ は、installにおいてキャッシュされていないリソースについて、ユーザインタラクションの後にキャッシュされてもよい .
優先原則 は、静止画ページに対して、キャッシュ優先で要求を低減する である.天気タイプのアプリケーションに対して、先にfetchに行って、サーバーの故障あるいはネットの不良の時、ローカルキャッシュ に折り返します.
Manifest
一つの基本的なmanifest.json基本機能 カスタム名前 カスタムアイコン スタートURL を設定します.作用領域を設定する 起動画面を追加します. 表示タイプを設定する 表示方向指定 テーマ色を設定します.
アプリケーションインストールバナー サイトにmaifest.jsonを展開するには、以下のような属性が必要です. ショーツname name(横断幕表示用) icons(mimeタイプがimage/pngのアイコン宣言を含む必要があります) start_url(アプリケーション起動アドレス) display サイトでService Workカーを登録します. 局はHTTPSアクセスに対応している. 局は同じブラウザで少なくとも2回アクセスされ、2回のアクセス間隔は少なくとも5分である. Web Push
Notification
Push Manager問い合わせ は、subscriptionを後端記憶 に送信する.サービス端末はFCM/GCMにメッセージを送信し、同時にsubscription を持参する. FCMは、subscriptionに基づいて、対応するブラウザ を再送信する. Service Workカーのプッシュイベントをトリガする 後続処理 参照https://segmentfault.com/a/11... https://x5.tencent.com/tbs/gu... https://lavas.baidu.com/pwa/o... http://www.zhangxinxu.com/wor... https://zhuanlan.zhihu.com/p/... https://github.com/delapuente... https://github.com/SangKa/PWA... サービスワーカーを使ってPushプッシュを送ります. .https://fed.renren.com/2017/1... https://pwa.rocks/
ブラウザ側のプロキシサーバを実行します.
基本的な特徴
ライフサイクル
イベントをサポート
レジスター
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {
scope: '/'
}).then(function (reg) {
//
console.log('success and scope: ', reg.scope);
}).catch(function (err) {
//
console.log('failed: ', err);
});
});
}キャッシュファイル
installed/waiting
この状態では、ウォーカーは有効ですが、まだ起動されていません.まだdocumentの制御に組み入れられていません.確実に現在のウォーカーからの引き継ぎを待っています.
sw.jsは更新されましたが、ページはずっとマウントされています.クローズまたは強制更新されていません.この時、前のバージョンのswはまだ作業中です.新しいswは待機中です.
// ， active
self.addEventListener('install', function (event) {
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function (event) {
event.waitUntil(
Promise.all([
//
self.clients.claim()
])
);
});
キャッシュの更新
fetch
プロキシ要求
メッセージ
swとメインライン間の双方向通信は、
MessageChannelを紐帯として確立する.
// index.html
navigator.serviceWorker.register('/service-worker.js', {
scope: '/'
}).then(function (reg) {
//
const channel = new MessageChannel();
// port1
channel.port1.onmessage = messageEvent => {
console.log(' sw message', messageEvent.data);
}
const serviceWorker = reg.active;
// port2 sw
if (serviceWorker) {
serviceWorker.postMessage('index->sw', [channel.port2]);
}
});
// sw.js
self.addEventListener('message', function (event) {
console.log(' index message', event.data);
// port client
event.ports[0].postMessage('sw->index');
});
Cache API
caches.open
cacheを作成します
cache.add/addAll
cache.put
caches.match
catch.match(request, {
}).then(function(response) {
})いくつかの使用点
Manifest
一つの基本的なmanifest.json
{
"short_name": " ",
"name": " ",
"icon": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "48x48"
}
],
"start_url": "index.html"
}Notification
Push Manager