プログレッシブWebアプリ102:プログレッシブWebアプリをゼロから構築する

UnsplashのCaspar Rubinによる「黒いAndroidスマートフォンをオンにしました」

パート1でプログレッシブWebアプリ(PWA)について学習しました。このパートでは、フレームワークではなくDOM操作のみを使用して、プログレッシブWebアプリを構築します。

これまでに学んだことを簡単に復習しましょう。アプリがプログレッシブであるためには、次の要件が必要です。

  1. マニフェストファイル— manifest.json
  2. 少なくともフェッチイベントを持つService Worker — serviceworker.js
  3. アイコン— icon.jpeg
  4. HTTPS経由で提供— https://www.myawesomesite.com

このチュートリアルでは、要件1と2について説明します。マニフェストファイルを作成し、Service Workerを登録します。

目的

この例では、シンプルなプログレッシブWebアプリを作成します。プログレッシブWebアプリの概念に集中できるように、複雑さは意図的にシンプルに保たれています。これらの概念を取り入れて、独自のAngular、React、Vue、またはバニラのJavaScriptアプリに適用できるはずです。

ミームエンジンを作成します。 giphy.comから最新のトレンドミームを引き出し、アプリに表示します。ユーザーは、接続がダウンしている場合でも画像を表示できる必要があります。したがって、シームレスなオフライン体験を提供しています。

すばらしいです!それでは、重要なものに取り掛かりましょう。

ステップ0:アプリをビルドする

スケルトンindex.htmlから始めましょう。

<!DOCTYPE html>


    
    すべてのミーム!</ title>
    <link rel = "stylesheet" href = "/ styles.css">
</ head>
<本体>
<ヘッダー>
    <h1 class = "center">今日のトップトレンドミーム</ h1>
</ header>
<メイン>
    <div class = "container"> </ div>
</ main>
<script src = "app.js"> </ script>

</ body>
</ html></pre><p>ご覧のとおり、今日のトップトレンドのミームというテキストのみを出力する単純なindex.htmlです。派手なものは何もありません。</p><p>次に、giphy.comからトレンドのミームを取得する機能を追加しましょう。フェッチ関数は次のようになります。</p><pre>非同期関数fetchTrending(){
    const res = await fetch( `https://api.giphy.com/v1/gifs/trending?api_key=$ {apiKey}&limit = 25`);
    const json = await res.json();

    main.innerHTML = json.data.map(createMeme).join( '\ n');
}</pre><h3>プログレッシブにしましょう</h3><h4>ステップ1:マニフェストファイル</h4><p>パート1から思い出せるように、マニフェストファイルはjsonファイルです。アイコン名、背景色、アプリの名前などのアプリに関するメタ情報があります。これらのパラメーターを含むmanifest.jsonファイルを次に示します。</p><pre>{
  「名前」:「ミーム」、
  「short_name」:「ミーム」、
  「アイコン」:[{
    「src」:「images / icons / icon-128x128.png」、
      「サイズ」:「128x128」、
      「タイプ」:「image / png」
    }、{
      「src」:「images / icons / icon-144x144.png」、
      「サイズ」:「144x144」、
      「タイプ」:「image / png」
    }、{
      「src」:「images / icons / icon-152x152.png」、
      「サイズ」:「152x152」、
      「タイプ」:「image / png」
    }、{
      「src」:「images / icons / icon-192x192.png」、
      「サイズ」:「192x192」、
      「タイプ」:「image / png」
    }、{
      「src」:「images / icons / icon-256x256.png」、
      「サイズ」:「256x256」、
      「タイプ」:「image / png」
    }]、
  「start_url」:「/index.html」、
  「ディスプレイ」:「スタンドアロン」、
  「background_color」:「#3E4EB8」、
  「theme_color」:「#2F3BA2」
}</pre><p>ツールを使用してこれを生成することもできます。ここに私が便利だと思ったツールがあります:</p><img alt="Webアプリマニフェストジェネレーター" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/dupliceopportunita/1575889159566.png" /><p>アプリに追加するのは簡単です。 index.htmlに次の行を追加します。</p><pre><link rel = "manifest" href = "/ manifest.json"></pre><h4>ステップ2:サービスワーカー</h4><p>ファイルserviceworker.jsを作成しましょう。最初に、インストール時にService Workerを登録します。次に、styles.cssやapp.jsなどの静的アセットをキャッシュします。次に、fetchを使用してオフライン機能を提供する必要があります。 serviceWorker.jsは次のようになります。</p><pre>const staticAssets = [
    「./」、
    './styles.css'、
    './app.js'
];

self.addEventListener( 'install'、async event => {
    const cache = await caches.open( 'static-meme');
    cache.addAll(staticAssets);
});

self.addEventListener( 'fetch'、event => {
    const {request} =イベント。
    const url = new URL(request.url);
    if(url.origin === location.origin){
        event.respondWith(cacheData(request));
    } else {
        event.respondWith(networkFirst(request));
    }

});

非同期関数cacheData(request){
    const cachedResponse = await caches.match(request);
    cachedResponseを返します|| fetch(request);
}

非同期関数networkFirst(request){
    const cache = await caches.open( 'dynamic-meme');

    {
        const response = await fetch(request);
        cache.put(request、response.clone());
        応答を返します。
    }キャッチ(エラー){
        return await cache.match(request);

    }

}</pre><p>これを分解しましょう。サービスワーカーは、データをキャッシュし、リソースをフェッチするのに役立ちます。キャッシュにデータがある場合、キャッシュからデータを返すか、ネットワークから取得します。独自のアプリの場合、オフラインアクセスに必要な機能を考えてください。次に、リソースを適宜キャッシュします。私の場合、ネットワークがダウンしたときに以前にキャッシュされた画像を表示したいと思います。</p><p>これをindex.htmlに追加する必要があります。追加するには、ブラウザのナビゲーターライブラリを活用してサービスワーカーを登録します。</p><pre>window.addEventListener( 'load'、async e => {
    fetchTrending();

    if(ナビゲーターの「serviceWorker」){
        {
            navigator.serviceWorker.register( 'serviceWorker.js');
            console.log( 'SW registered');

        } catch(error){
            console.log( 'SW failed');

        }
    }
});</pre><p>実際に登録されたことを確認しましょう。ブラウザのネットワークタブをクリックして、アプリケーション設定に移動します。このタブは、プログレッシブWebアプリを開発するときに非常に役立ちます。ページをリロードすると、このタブにサービスワーカーが表示されます。</p><img alt="Service Workerが登録されました" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/dupliceopportunita/1575889162937.png" /><p>それでは、ブラウザを更新しましょう。最初のロードでは、データはサービスワーカーによってキャッシュされます。接続をオフにしてみてください。引き続き画像を表示できます。</p><p>アプリはオフラインでも利用可能になりました! HTTPSを有効にしてアイコンをアップロードした場合、Progressive Web Appが完成しました。</p><h3>次のステップ</h3><p>独自のプログレッシブWebアプリの開発に興味がある場合は、Google Developersがこのコードラボをチェックすることを強くお勧めします。</p><p>何か新しいことを学びましたか?コメントがありますか? DevJokeを知っていますか?私にツイート@ shrutikapoor08</p></div><div class="neighbor-articles"><h4 class="ui header">また見なさい</h4><a href="/item/say-hello-to-our-disappointing-robot-future-8eed64/" title="失望するロボットの未来に挨拶">失望するロボットの未来に挨拶</a><a href="/item/tron-trx-coin-cryptocurrency-literally-everything-you-need-to-know-all-in-1-article-tron-72a6db/" title="TRON —(TRX)コイン暗号通貨、あなたが知る必要があるすべて、1つの記事#TRON…">TRON —(TRX)コイン暗号通貨、あなたが知る必要があるすべて、1つの記事#TRON…</a><a href="/item/a-new-phenomenon-called-chipping-e090b3/" title="「チッピング」と呼ばれる新しい現象">「チッピング」と呼ばれる新しい現象</a><a href="/item/is-it-still-worth-spending-40k-on-a-computer-science-degree-in-the-age-of-self-taught-ac63f7/" title="独学時代にコンピューターサイエンスの学位に4万ドル以上を費やす価値はまだありますか?">独学時代にコンピューターサイエンスの学位に4万ドル以上を費やす価値はまだありますか?</a><a href="/item/this-man-built-a-whole-company-so-he-could-talk-to-his-daughter-1d6e3b/" title="この男は、娘と話すことができるように会社全体を作りました">この男は、娘と話すことができるように会社全体を作りました</a></div></main><div class="push"></div></div><footer style="height:50px">dupliceopportunita.com<!-- --> © <!-- -->2020<!-- --> <a href="https://ko.dupliceopportunita.com/item/progressive-web-apps-102-building-a-progressive-web-app-from-scratch-e80ab9" title="https://dupliceopportunita.com">dupliceopportunita.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>