2016-12-20 8 views
-1

通常、私は新しいウェブサイトを構築するときに.NETまたはPHPウェブサイトを作成します。これらのウェブサイトは、MySQL DBまたは外部APIに接続します。これを行うために、私はこれらのサービスに自分の資格情報を安全に保存することができ、バックエンドはその資格情報を認証します。今、私はフロントエンドだけであるプログレッシブWebアプリケーションを構築したいので、どうすればこれらを確実に認証できますか?私のPWAは動的なAPIキーを返すログインページを持っていなければなりませんか?ありがとうプログレッシブウェブアプリケーションAPIへの認証

答えて

0

プログレッシブWebアプリケーション(PWA)はフロントエンドではありませんdefinitionが表示され、PWA BaselineがPWAを作ることをあまりにもはっきりと理解しています。

あなたが言及している問題は、シングルページWebアプリケーション(フロントエンドのみ)の認証です。ここでは、Googleのキーワード「シングルページウェブアプリ認証」を使った最初の記事があります。

Token Based Authentication for Single Page Apps

+0

シングルページWebアプリケーションはフロントエンドではありません。 –

2

ここでPWAを説明するための別の方法は、ログイン/ログアウト機能を備えたPWAを構築するには...

です:通常どおり

  1. は、サーバを含め、あなたのウェブサイトを構築します、データベースとログイン/ログアウト機能あなたが望むあらゆる技術を使用してください。あなたのウェブサイトがどんな画面でも見えるようにレスポンシブなデザイン原則(CSSメディアクエリなど)を使用していることを確認してください。

---------この時点で、あなたはすでにそれPWAようにするには、ログイン/ログアウト機能.----------

で機能するウェブサイトを持っています。 ..

  1. サーバーがHTTPS用に設定されていることを確認してください。

  2. HTMLに「サービスワーカー」コードを追加します。それは小さなjavascriptで、Googleの例を検索します。

  3. manifest.jsonファイルを追加します。これは、ユーザーがホームスクリーンにあなたのサイトを追加する場合、あなたのウェブサイトのアイコンなど、いくつかのものを定義します。もう一度Googleで検索してください。

  4. ブラウザを使用してWebサイトを開き、ブラウザがサービスワーカーを確認して登録するかどうかを確認します。ほとんどの人は、このためのツールを備えているため、Chrome開発ツールを使用しています。

  5. これで基本的なサービスワーカーの準備が整いました。あなたはサービスワーカーを利用するためのJavaScriptをプログラミングしていないので、この時点では何もしません!

  6. のように、サービスの労働者を使用して、いくつかの新機能を紹介:自分のホームスクリーンにあなたのウェブサイトを追加して、ユーザー-prompt ...

    モバイルデバイス上で

を。これは、あなたが定義する大きな高解像度のアイコンを与え、フルスクリーンモードで開くように設定することもできます(つまり、ブラウザのURLバーは表示されません)。ユーザーは、ネイティブアプリのようにそのアイコンを押すだけで、将来あなたのウェブサイトを使用することができます。彼らが選択した場合は、WebブラウザでWebサイトを手動でロードすることもできます。それは問題ではありません。

- あなたのウェブサイトがあなたのデバイスに通知を送信できるようにユーザーを許可します。ネイティブアプリのように通知を送信することができます。モバイルやPC用

:あなたのウェブサイトはより高速なパフォーマンスを可能にローカルにいくつかのファイルを保存することができます

-Enableオフラインキャッシュ、。これを考慮に入れてウェブサイトを設計する必要があります。これはSPAアーキテクチャ、つまり "シングルページアプリケーション"でうまく機能します。ウェブサイトの「スケルトン」をローカルにロードし、サーバーからJSONデータを取得するだけです。それでおしまい!

これらのすべてを行うには、JavaScriptを使用する必要があります。

ご覧のように...

PWAは、 "唯一のフロントエンド" ではありません。サービスワーカーはjavascriptであり、クライアントブラウザで処理されるため、フロントエンドのみです。

A PWAは、サーバ、データベース、HTML、CSS、JavaScriptとどのようなクライアントデバイスがあるなど、アプリケーションのすべてのコンポーネント(ウェブサイト別名)を包含するだけのモデルです。

PWAは、ある会社の新しい言語または独自のものではありません。これは、最終的にHTML5の機能が主流であり、ほとんどの人がChrome/Firefox/Safariを使用しているため、可能なことを実現する新しい方法です。このものは、現代のMSブラウザで動作しますが、まだまだ問題があります。

サービスワーカーを使用でき、PWAを使用することはできません。レスポンシブなCSSを持たず、ウェブサイトのインターフェイスをPCモニタで実用的にするだけです。従来の例:Gmail明らかにオフラインの能力を持っていますが、ブラウザのサイズを300pxに変更すると、インターフェイスは縮小されません。彼らはモバイルユーザーがネイティブのGmailアプリをインストールすることを期待しています。

これは)=、より多くのあなたよりもTHXを助けてくれました。

+0

これは素晴らしい基本的な概要です。ありがとう – Smartis