ウェブオフラインアプリケーションの構築(一)

7826 ワード
chrome javascript
私はモバイルアプリが好きです.そしてウェブ技術を使ってモバイルアプリケーションを構築する人の一人です.
技術の反復(他にもいくつかのものがあるかもしれない)を経て、モバイル体験設計はますますやさしくなり、ユーザーにより良い体験を与える.
今日は、新しい技術、漸進的なwebアプリケーションを紹介します.この概念を理解して自分で試してみたら、hybridアプリを使う必要はないと思います.
私たちはこのようなデモをするつもりです.
Progessitive Web Apps
漸進的なWebアプリケーションは、典型的には、ユーザのオフライン体験を向上させるためのWebアプリケーションである.このような問題を解決しました.なぜ次のオフラインエラーのような表示をしないのですか?
実際、PWAはオフラインエラーを解決しただけでなく、接続を再開するときにユーザとコンテンツを接続します.モバイルデバイスは、漸進的なウェブアプリケーションの主な使用シーンである.なぜですか?
デスクトップブラウザ
  • ユーザがパソコンを開く(自宅、学校またはオフィス)
  • は、ネットワークに接続されているかどうかを確認し、ダイヤルなしで
    • に接続する.
  • ウェブアプリケーションを開く
    • モバイル端末ブラウザ
  • 携帯電話を取り出します.
  • デフォルトの携帯電話はネットワーク
    • に接続されています.
  • 直接にap
    • を開けます.
    以上のように、ユーザの2つのシーンに対する処理方法は異なる.モバイル端末のユーザーは必ずしも良いネットワーク接続があるとは限らない.このような場面で、開発者が必要とするのは、ユーザーの製品に対する好感度を維持し、そのネットワークが回復した時にそのインタラクティブを行うことである.信号が悪い場合、開発者はいくつかの手段を通じてユーザーの忍耐力を維持し、要求過程においてユーザがウェブアプリケーションを直接オフにすることはない.
    PWAアプリケーションを構築し始めると、上のシーンが理解できます.
    Service Workers
    PWAの背後にある原理はサービスワーカーです.オフラインシーンでもウェブページを開いておくためには、ユーザーがウェブアプリケーションを開いたり、ネットワーク接続をしたりする際に、いくつかの「バックグラウンドタスク」を行う必要があります.この「バックグラウンドタスク」は、ウェブページの最近の実行に必要なリソースを集めて、オフライン時に使用します.
    毎年秋に収穫して食糧を蓄え、冬の不時の必要に備えるように、絶えず循環する.
    PWAの中のサービスワーカーは、春の種まきの農民に匹敵する.以下はMDNのservice workersに対する説明である.
    Service workerは、指定されたソースとパスの下に登録されたイベント駆動ウォーカーである.それはJavaScriptを採用して関連しているページあるいはウェブサイトを制御して、アクセスと資源の要求を遮断して修正して、きめ細かい粒度で資源をキャッシュします.特定のシナリオ(最も一般的な場合はネットワークが利用できない)でのアプリケーションの表現を完全に制御することができます.
    簡単に言えば、サービスワーカーはバックグラウンドで論理を実行するウォーカーです.DOMを操作する権限はないが、他のAPI(例えばIndexDB及びFetch API)を呼び出すことができる.
    始まる前にしっかり覚えてください.
  • service workersはHTTPSプロトコルでのみ有効になります.
  • service workersは非同期的に設計されており、XHR(ただし、Fetchを使用することができます)やLocastrageは使用できません.
  • service workersの役割範囲は相対パスのためである.したがって、demo/sw.jsはdemoに対してのみ機能し、demo/first/sw.jsはfirstに対して機能することができる.
    • Mobileですか?それともPWAですか
    サービスワーカーを使ってオフラインに必要なファイルを保存することができれば、モバイルアプリを開発する必要がありません.あなたのウェブアプリケーションがモバイルユーザーを最適化し、モバイル端末のハードウェア機能をほとんど呼び出す必要がないなら、PWAを試してみてください.
    飛行モードでのモバイルアプリの表現を見るのに時間がかかりました.それらを三つの種類に分けます.
    オフラインの場合は何も操作しません.
    例:Coinbase
    Coinbaseはずっとloadingのこのページに滞在しています.なぜこのようなアプリが存在するのかさえ疑問になります.このページはまるでウェブの展示と同じです.Coinbaseは財経類のアプリではなく、リアルタイムで情報を展示する必要がないので、PWAはそのアプリシェルにしか適用できないかもしれません.
    アプリシェルとは、ダイナミックコンテンツを含まない一部のアプリケーションのことです.ナビゲーションメニュー、サイドバー、背景、ロゴなどです.
    オフラインの場合は警告情報(未接続ネットワークなど)を示し、App Shellを展示しますが、他は利用できません.
    例:Uber
    Uberは、ユーザにいくつかの情報(App Shell及び地図を通じて)を示し、ユーザが操作できないのは、彼のネットワークが切断されたためであると通知した.Uberは高周波のappであり、このようなインタラクティブな展示は彼らの応用シーンにとって興味深い.
    オフラインの場合はキャッシュのデータを表示します.
    例:Medium
    Mediumはオフラインの状態でキャッシュされたデータを展示します.オフラインの展示はこの分類の中のap(例えばInstagram)でユーザーにオフラインを提示します.だから、この分類の中のapに期待しないでください.
    最適化
    私の考えは、PWA(またはservice workers)技術が成熟し、大規模に応用されると、なぜ節約されないですか?
  • アプリケーションストア
    • に行きます.
  • ダウンロードが一般的ではないアプリ
    • どうですか
    私たちが次にWeb Manifestに言及すると、あなたのwebアプリケーションにデスクトップiconを追加しさえすれば、ウェブアプリケーションはこのiconをクリックして起動することができるということを認識します.
    いくつかの会社はもうPWAのほうがいいです.このサイトの上にこれらの会社を見つけられます.
    開発準備
    十分な理論知識を紹介しました.これは取っ手の教程です.さあ、手を動かしましょう.まず、次のような構造で新しいプロジェクトを作成します.
    |--pwa-demo
|----css
|----fonts
|----images
|----js
|----index.html
|----service-worker.js
    MaterializeというUIライブラリをダウンロードして、プロジェクト内のフォルダをそれぞれCSS、Fonts、js に置き換えます.index.htmlファイルを開き、いくつかのリソースを導入します.
    

  
    
      
      
      
      
      

      
      
    

    

      Body coming soon
    ダウンロードしたファイルを しました.また、 で するディレクトリにapp.cssとapp.jsの つのファイルを してください.
    Service Workerを します.
    くブラウザに すればするほど、Service Workカーは く を められます. いい は の り にあります.このプロジェクトでは、app.jsに しいワーカーを することができます.
    (function(){
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
     .register('/service-worker.js')
     .then(function() { 
        console.log('Service Worker Registered'); 
      });
  }    
})()
    の をする に、まずブラウザのService Workカーとの をチェックします.サポートすれば、 たちはregisterという を してこのworkerを することができ、この はservice workerファイルのパスを えました. はpromiseに ります. が したかどうかはこのpromiseで できます.
    Service Workカーサイクル
    PWAを する に、Service Workカーのライフサイクルを する があります.
    Install
    この は にブラウザに えられた にワーカーをマウントさせる.これはライフサイクルの なので、このステップで のリソースをキャッシュしたほうがいいです.
    // ./service-worker.js

var cacheName = 'PWADemo-v1';
var filesToCache = [
  '/index.html',
  '/css/app.css',
  '/js/app.js',
  /* ...and other assets (jQuery, Materialize, fonts, etc) */
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});
  • caches.openおよびcache.addAllは、 な であり、service workerは、これらの が する に される があり、e.waitUntilは、promiseの がreolvedまたはrejectになるのを つために される.
  • キャッシュスイッチがオンされたとき、 たちはaddAllを してキャッシュの を みる.
  • ファイルのキャッシュが した 、サービスワーカーは しくマウントされないことを えてください.
    • Activate
    ワーカーがマウントを すると、その はすぐには されません. のservice workerが され、ウェブアプリケーションが アクセスされない り. のcacheNameのservice workerをマウントしたと します.
    // ./service-worker.js

var cacheName = 'PWADemo-v2';
var filesToCache = [
  //...
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  //...
});
    この しいservice workerが された 、 たなキャッシュPWADemo-v2も され、PWADemo-v1も する.Activateをトリガすると、PWADemo-v1を して、PWADemo-v2に「ビットを る」ことができます.
    // ./service-worker.js

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});
    たちはすべてのcacheの を べて、 っているcacheではないことがわかったら、 に します.
    Fetch
    Fetchは なライフサイクルではないが、 されたリソースをブロックする を している. を すると、まずこのようなイベントがトリガされる.
    // ./service-worker.js

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
    リソースがキャッシュされたら、ブラウザキャッシュのバージョンに ります.もしないならば、 はfetchアプリを び してHTTP を ります.
    Debuggering Service Workers
    service workersの き のため、 にキャッシュを う はデバッグが ではありません. い、chromeのdev toolsは を しました. の に って、 が したばかりのサービスワーカーを します.
  • chrome dev toolsを く
  • Appleをクリックしてservice workerパーティションを きます.
  • statusが であることが できます.これはあなたのservice workerが したことを しています.
  • 「Update on reload」を いて、service workカーを してもいいです. のsessionをすべて じる はありません.
  • は「Cache Strage」を クリックし、リフレッシュをクリックしてキャッシュを べます. によって されたcacheをクリックすると、キャッシュ の が されます.
    • いて
    あなたはもう な を しました.PWAの はあなたにとってもう みがないです. に、PWAのキャッシュポリシーについて します. たちはどのようにIndexDBを ってデータを するかを るつもりです.
    React 6.2のfiberアーキテクチャ