任意のウェブサイトに変換するだけで3つの簡単な手順でPWAに

This will be a do-as-you-read article, where I will provide you the base code and the code that you can use to try it along to build a basic PWA.

プログレッシブウェブアプリ
PWAプログレッシブWebアプリの略です.PWAは携帯電話(プラットフォームに依存しない)上で定期的なアプリの形で表示することができますし、また、インターネット上の定期的な応答のウェブサイトのように動作するWebアプリです.それはあなたが使用するのと同じ技術を使用して、通常のウェブサイトを構築するようなものですが、その余分な機能と進歩的なWebアプリの利点を与える.それは光、高速かつ安全です.

何がプログレッシブWebアプリになる?
あなたのウェブサイトを構築することができますほとんどの場合は、応答性のレイアウトを設定しており、ブラウザの大多数で動作を検討してください.これは、JavaScriptで構成され、サービスワーカーを使用して、そこでは、PWAのサーバーは、ユーザーのWebブラウザに保存され、時からは、新しいフィードが読み込まれます.これは、PWAの速度の主な理由です.したがって、これらのサービス労働者は、我々が以下について話している特徴の面倒を見ます.

PWAの利点と欠点についてはこちらをご覧ください
もはや利用できない記事

任意のウェブサイトに変換

我々が構築しているこのPWAの特徴

DeskopとMobileに対応した作品

作品オフライン

デスクトップやモバイルアプリケーションのようにインストールすることができます

非常に軽量

ビルド1基本的なウェブサイト
最初のステップでは、通常の手順を使用して簡単なウェブサイトを構築する必要があります.ウェブサイトは、HTML、CSS、およびJavaScriptなどの基本的なビルディングブロックを使用して構築されています.確認する必要があるいくつかのことがあります.

ウェブサイトを展開するとき、httpsを通してサービスを提供していることを確認します.

携帯電話とデスクトップ上で応答して動作する応答サイトを構築してください
あなたがこれらのセットアップを持っているときに良いです.

一歩一歩早く始めるには、サンプルGithubプロジェクトをクローン化できます.

tharunShiv / stick-it-notes

2 . Webアプリケーションマニフェストファイルを作成する
マニフェストファイルは、あなたのPWAについての名前、ShortRange名、StartRound URL、スコープ、PWAのためのアイコン、テーマ色、背景色、およびあなたのPWAがどのように表示されるかを示すJSONファイルです.
クリエイトアmanifest.json プロジェクトのルートフォルダーで、次のようなJSONに入力します.

{
  "name": "Stick-it Notes by Tharun",
  "short_name": "Stick-it",
  "start_url": "index.html",
  "scope": "./",
  "icons": [
    {
      "src": "contract.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "contract.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffd31d",
  "background_color": "#333",
  "display": "standalone"
}

にindex.html , マニフェストにリンクするリンクタグを追加します.JSONファイルは、使用するマニフェストファイルがあることを知っています.

<link rel="manifest" href="manifest.json">

あなたが契約に気づいたならば.PNGは、アプリのアイコンです.あなたの好みの任意のツールを使用して独自のを作成したり、発電機をチェックアウトhttps://realfavicongenerator.net あなたのサイトに必要なタグとfaviconを生成します.
現在、あなたのサイトはインストール可能です.

サービスワーカーの追加
サービスワーカーは、完全に非同期で、別のスレッドで動作するJavaScriptファイルであり、ネットワーク要求を傍受し、キャッシュからリソースをキャッシュしたり、取得したり、プッシュメッセージを送信したりします.
これは、ウェブサイトがアクティブでない場合でも、これはプッシュ通知を提供するために必要です.また、DOMに直接アクセスすることはできません.それは我々が私たちのWebアプリをオフラインで実行するのに役立ちますキャッシュの機能を有効にするのに役立ちます.
さて、この最後のステップを行いましょう
この行を既存のJavaScriptファイルに追加するか、新しいファイルを作成してリンクします.このプロジェクトでは既にリンクされたJavaScriptファイルを持っています.
MyScriptsで.js

if ("serviceWorker" in navigator) {
  // register service worker
  navigator.serviceWorker.register("service-worker.js");
}

今すぐ自動的にサービスワーカーを生成する時間.jsファイル.sw precacheというNPMパッケージを使用します.
コマンドライン/ターミナル

$ npm install --global sw-precache

インストールが完了すると、以下のコマンドを実行し、プロジェクトルートディレクトリと同じパスにあることを確認し、

$ sw-precache

ハーレイ!
今すぐあなたのウェブサイトは完全にPWAに変換され、ロールバックする準備が整いました.今すぐNetLifyのような無料ホスティングサービスに行くことができますし、githubリポジトリをホストし、楽しみを見てください.

あなたの携帯電話にあなたのPWAをインストールするホーム画面に追加スティックを通知することができます.
私のYouTubeチャンネルを購読することを考えてください
執筆:
.ltag__user__id__378811 .アクションボタン
背景色:1 .重要
色:1 .重要
ボーダーカラー:1 .重要
｝

Tharun Shiv フォロー
Site Reliability Engineer | Blogger | Podcasts | Youtube @ developertharun

読んでいただきありがとうございます、これはtharun shiv

もはや利用できない記事