反応18で進歩的なウェブアプリを造ること

そばAmazing Enyichi Agu
いくつかのウェブサイトがスマートフォンで訪問されるとき、ウェブサイトはユーザーにアプリのようなユーザーの装置に自分自身をインストールするよう求めます.ユーザーのデバイスに“ダウンロード”するときは、これらのウェブサイトはほとんど同じ機能をネイティブのモバイルアプリケーションがあります.彼らも、ユーザーのホーム画面で表示することができますアイコンを持っている.ウェブサイトがそのような方法で構築されているとき、我々はウェブサイトは進歩的なWebアプリだと言う.

何がプログレッシブWebアプリ（PWA）とどのように動作しますか？

プログレッシブWebアプリは、ネイティブアプリのように振る舞うことができるウェブサイトです.これは、これらの機能を与えるWebアプリケーションやウェブサイトに行われる追加のカスタマイズのために可能です.いくつかの機能は、PWAのプッシュ通知を含めることができる機能は、AndroidとIOSの上で多くの違いなしで動作するように、標準的なアプリのように、ユーザーのデバイスのホーム画面上の正規のアイコンは、能力をオフラインで動作するように.
ここでは進歩的なWebアプリが選択されるか、または開発者によって使用されるいくつかの理由があります.

低コスト:ネイティブのモバイルアプリケーションやデスクトップアプリケーションを構築する開発者を雇うための予算が必要です.しかし、Pwasでは、ウェブサイトとしては、プログレッシブWebアプリケーションにすぐに変換することができますモバイル開発者は必要ありません.

時間が節約:PWAモバイルアプリケーションを構築するために費やしてきた時間を節約できます.同じCodeBaseは、複数のプラットフォーム間で共有することができますまだ見て、良い感じ.

軽量:PWAは軽量で、重くて嵩かれません.これは、Webアプリケーションは、高速読み込み時間と最適なメモリの利用をすることができます.

クロスプラットフォーム:pwasクロスプラットフォームです.彼らはAndroid、IOS、Windows、さらにMacOSでは、ブラウザで任意のデバイスでアクセス可能な実行します.

高速アップデート:プログレッシブWebアプリは、それがオンになっている任意のプラットフォーム上で個別にインストールする更新プログラムを必要としません.それが技術的にウェブサイトであるので、それはそれ自身で更新します.

この記事では、我々は単純な注記の反応JSとアプリを取って、それをプログレッシブWebアプリを構築する予定です.

プロジェクトの作成

我々は、このプロジェクトを構築する反応18(反応JSの最新バージョン)を使用します.注意してください、私たちは、反応18を使用するために、ノードバージョン14.0.0(またはより高い)とNPMバージョン5.6以上を持っている必要があります.

npx create-react-app notes

そして、我々は我々の反応ノートアプリの負荷があります.
インストール後、実行します.

cd notes
npm start

この後、我々はまた、我々のお気に入りのコードエディタで新しく作成された反応アプリを開くに進みます.

ページの作成

そして今、我々のアプリのコンポーネントを含む私たちのホームページを作成します.インデックスで.JSにはあります.

import React from "react";
import App from "./App";
import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);

root.render(<App />);

そして、我々のアプリで.ジェイエス

import React, { useState } from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <h1>My Notes</h1>
      <input type="text" />
      <button>Save</button>
    </div>
  );
}

そして今、これを私たちのページに表示します.

Notesコンポーネントの作成

任意の利用可能なノートを表示するノートコンポーネントを作成します.コンポーネントはフォルダの中にあり、フォルダはsrc フォルダと呼ばれるcomponents .
その後、私たちはNotes.js インサイドcomponents フォルダを作成し、簡単な機能をループを利用可能なデータを介して小道具で提供し、別の作成p 要素.

メモの中.jsファイル

import React from 'react';

function Notes({ data }) {
  return data.map((value) => <p>{value}</p>);
}

export default Notes;

これは、我々のNotesコンポーネントが常にパラメータdata . 今それをインポートするにはApp.js , 以下の通りです.

import React, { useState } from 'react';
import Notes from './components/Notes';
import './style.css';

export default function App() {
  return (
    <div>
      <h1>My Notes</h1>
      <input type="text" />
      <button>Save</button>
      <Notes/>
    </div>
  );
}

注意してください、私たちのNotesコンポーネントはパラメータデータを必要とします.我々は、いつでも更新されるデータの状態を作成しますsave ボタンをクリックします.

import React, { useState } from 'react';
import Notes from './components/Note';
import './style.css';

export default function App() {
  let [list, setList] = useState([]);
  let [newNote, setNewNote] = useState('');

  function addNote() {
    let addedNote = list.concat(newNote);
    setList(addedNote);
    setNewNote('');
  }

  function handleChange(e) {
    setNewNote(e.target.value);
  }

  return (
    <div>
      <h1>My Notes</h1>
      <input type="text" value={newNote} onChange={handleChange} />

      <button onClick={addNote}>Save</button>
      <Notes data={list} />
    </div>
  );
}

そして今、我々は我々のアプリでいくつかのメモを保存することができます.

サービスワーカー登録

サービスワーカーは何ですか.サービスワーカーは、我々のアプリのための必要なJSプログラムは、プログレッシブWebアプリであることです.
したがって、サービスワーカーを使用するには、我々はそれを登録する必要がありますindex.js , だから我々はインポートserviceWorker.js 我々の中にindex.js .
インデックス.js

import React from "react";
import App from "./App";
import * as serviceWorker from "./serviceWorker"
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);

root.render(<App/>);

serviceWorker.register():

マニフェストの編集JSONファイル

我々のアプリをPWAにする最終段階は、我々のマニフェストの若干のものを変えることになっています.JSONファイル.我々は、アイコンやその他のオプションを利用可能に設定します.

{
  "short_name": "My Notes App",
  "name": "Notes Progressive Web Application",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

そして最後に、我々は、ネイティブアプリのようなデバイス上で実行することができますPWAアプリの作業をしている.

オープンソースセッション

OpenReplay フルストーリーとログオンにオープンソースの代替手段です.それはあなたのすべてのユーザーがあなたのアプリケーションで行うと、すべての問題のスタックの動作方法を示すすべての再生によって完全な観測能力を与える.OpenReplay自分のデータを完全に制御するためのホストです.

現代のフロントエンドチームのためのハッピーデバッギングstart monitoring your web app for free .

結論

プログレッシブWebアプリケーションは、それがスクラッチからネイティブのモバイルアプリケーションを構築するための安価な代替品として、最寄りの将来のウェブサイトのモバイル体験を強化するために使用され続けます-と反応JSは、プログレッシブWebアプリにまっすぐに反応アプリを変換するためのいくつかの機能性が付属して発生します.
このプロジェクトのソースコードはStackblitz .