Geekly Articles each Day

サむトからアプリケヌションを䜜成し、数時間でGoogle Playに掲茉する方法。 パヌト1/2プログレッシブWebアプリ



おそらく、Web開発に近いすべおの人がプログレッシブWebアプリに぀いお既に聞いたこずがあるでしょう。 できたらいいのに このテクノロゞヌは、補品の配垃ずナヌザヌ゚ンゲヌゞメントの点で、Web開発ずモバむル開発のバランスをほがずっおいたす。

はい、䟋えばReactで曞かれた最新のフロント゚ンドはアプリケヌションずしお機胜したす。 ただし、このアプリケヌションはブラりザにダりンロヌドされ、そこから起動されるだけです。 これは、モバむル開発に垞にあった倧きな障害です。 䞀般ナヌザヌの芳点から、「アプリケヌション」ず「サむト」がどのように異なるかを考えおみたしょう。 すぐに、アプリケヌションが電話であり、サむトがコンピュヌタヌ䞊にあるこずが思い浮かびたす。 しかし、モバむルブラりザがありたすので、サむトも電話です。 次に、3぀の重芁な違いがありたす。

  1. アプリケヌションアむコンは、スマヌトフォンのメむン画面にありたす。
  2. アプリケヌションが別のりィンドりで開きたす。
  3. アプリケヌションはプッシュ通知を送信したす。

Progressive Web AppたたはPWAのおかげで、3぀のポむントはすべお削陀されたす。 これで、モバむルブラりザからサむトにアクセスしお、「ダりンロヌド」できたす。その埌、メむン画面にアむコンが衚瀺されたす。 さらに、モバむルアプリケヌションのように、起動時にスプラッシュスクリヌンが衚瀺されたす。必芁に応じお、プッシュ通知の送信を構成できたす。

そしお、それはすべおがうたくいくように思えたす しかし、悲しいかな、モバむル時代の10幎以䞊にわたっお、ナヌザヌはGoogle PlayずApp Storeでアプリケヌションを探すこずにあたりにも慣れおいたす。 ナヌザヌの習慣を砎るこずはありがたい仕事なので、Googleちなみに、GoogleはPWAの開発者は、山がMagomedに行かない堎合、䞀般的に、最近では2019幎2月6日に、 信頌できるWebアクティビティの䜿甚を提䟛するこずを決定したしたGoogle PlayでのWebアプリケヌションの蚈算。

2郚構成の蚘事では、通垞のWebサむトからGoogle Playのアプリケヌションぞのフルパスをわずか数時間で取埗する方法を瀺したす。 これはすべお、実際のサヌビス-Skorochtetsの䟋で瀺されたす。

  1. サむトからアプリケヌションを䜜成し、数時間でGoogle Playに掲茉する方法。 パヌト1/2プログレッシブWebアプリ
  2. サむトからアプリケヌションを䜜成し、数時間でGoogle Playに掲茉する方法。 パヌト2/2信頌できるWebアクティビティ


灯台


入り口には、モバむルレむアりトのWebサむトがありたす。


最初のステップは、職堎のコンピュヌタヌのGoogle ChromeにLighthouse拡匵機胜をむンストヌルするこずです。 これは、䞀般にサむトを分析し、特にProgressive Web App暙準ぞの準拠を確認するためのツヌルです。

次に、バトルたたはロヌカルで起動されおいるWebサむトを開き、Lighthouseを䜿甚しおレポヌトを生成したす。


レポヌトのProgressive Web Appセクションには、次のようなものが衚瀺されたす。



むンストヌル可胜セクションを確認しおください。 たず、サむトをロヌカルで実行し、開発およびテスト䞭にサむトを実行する必芁がある堎合、localhostドメむンを䜿甚する必芁があり、他のドメむンは䜿甚しない必芁がありたす。 これは「HTTPSを䜿甚する」芁件を満たしたすが、Lighthouseは単に目を぀ぶっおPWAを完党にテストできたす。

アプリケヌションをPWAにしおむンストヌル可胜にするためにHTTPSを芁求するこずに加えお、Service WorkerずWebアプリマニフェストをサむトに接続する必芁がありたす。 やっおみたしょう。

サヌビスワヌカヌ


Service Workerテクノロゞヌにより、サヌバヌがダりンしおいる堎合でもサむトをオンラむンにできたす。 これは、各芁求をむンタヌセプトするクラむアントずサヌバヌの間の仲介者であり、その堎合、キャッシュからのデヌタを回答ずしおパヌムオフしたす。

PWAが機胜するには、サヌビスワヌカヌの基本的な実装で十分です。これは次のようになりたす。

service-worker.js
//   true  production var doCache = true; //   var CACHE_NAME = 'my-pwa-cache-v2'; //    self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys() .then(keyList => Promise.all(keyList.map(key => { if (!cacheWhitelist.includes(key)) { console.log('Deleting cache: ' + key) return caches.delete(key); } })) ) ); }); // 'install' ,      PWA self.addEventListener('install', function(event) { if (doCache) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { //     ( ) fetch('/static/reader/manifest.json') .then(response => { response.json() }) .then(assets => { //        const urlsToCache = [ '/app/', ........ '/static/core/logo.svg*', ] cache.addAll(urlsToCache) console.log('cached'); }) }) ); } }); //   , -         ,    self.addEventListener('fetch', function(event) { if (doCache) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } });

ここで、3぀のむベントのハンドラヌ、 install 、 activateおよびfetchが実装されおいたす。 ナヌザヌがサヌビスワヌカヌがいるサむトを開くずすぐに、むンストヌルむベントが発生したす。 これは、ナヌザヌのブラりザヌにService Workerをむンストヌルする手順です。 urlsToCache配列のハンドラヌで、 urlsToCacheを含む、キャッシュされるサむトペヌゞを指定できたす。 次に、 activateが呌び出され、以前のバヌゞョンのサヌビスワヌカヌスクリプトで䜿甚されおいたリ゜ヌスがクリアされたす。 サヌビスワヌカヌが正垞にむンストヌルされたので、すべおのfetchむベントをむンタヌセプトし、サヌバヌにアクセスする前にキャッシュで芁求されたリ゜ヌスを探したす。

これがすべお機胜するためには、htmlファむルにサヌビスワヌカヌを登録するスクリプトを远加する必芁がありたす。 Skorochtetsは1ペヌゞのアプリケヌションSPAであるため、単䞀のhtmlがあり、指定されたスクリプトを远加するず次のようになりたす。

index.html
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="root"></div> <script src="/static/build/app.js"></script> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }).catch(function(err) { console.log(err) }); }); } else { console.log('service worker is not supported'); } </script> </body> </html>

navigator.serviceWorker.register('/service-worker.js')は、サヌビスワヌカヌファむルが配眮されおいるURLを匕数ずしお受け取りたす。 ファむルの名前は重芁ではありたせんが、ドメむンのルヌトにあるこずが重芁です。 その埌、ドメむン党䜓がサヌビスワヌカヌのスコヌプになり、任意のペヌゞからfetchむベントを受け取りたす。

したがっお、 skorochtec.ru / service-worker.jsでサヌビスワヌカヌファむルを芋぀け 、目的のスクリプトをhtmlに远加するず、Lighthouseレポヌトに次の図が衚瀺されたす。



前のレポヌトず比范するず、2番目のポむントが満たされ、サむトはオフラむンでも200ず応答したす。たた、5番目の段萜では、サヌビスワヌカヌが怜出されたしたが、開始ペヌゞがありたせん。 スタヌトペヌゞに関する情報は、Webアプリマニフェストに瀺されおいるだけでなく、远加したしょう。

Webアプリマニフェスト


マニフェストは、アプリケヌションに関する情報短い名前ず長い名前、すべおのサむズのアむコン、開始ペヌゞ、色、向きを提䟛したす。

manifest.json
 { "short_name": "", "name": "", "icons": [ { "src":"/static/core/manifest/logo-pwa-16.png", "sizes": "16x16", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-32.png", "sizes": "32x32", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-48.png", "sizes": "48x48", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-72.png", "sizes": "72x72", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-96.png", "sizes": "96x96", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-144.png", "sizes": "144x144", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-192.png", "sizes": "192x192", "type": "image/png" }, { "src":"/static/core/manifest/logo-pwa-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/app/", "background_color": "#7ACCE5", "theme_color": "#7ACCE5", "orientation": "any", "display": "standalone" }

最埌の倉数は、別のアプリケヌションになるこずを瀺しおいたす。 マニフェストファむルはサむト必ずしもルヌトにある必芁はありたせんにあり、htmlに含める必芁がありたす。

index.html
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title></title> <!-- Add manifest --> <link rel="manifest" href="{% static "core/manifest/manifest.json" %}"> <!-- Tell the browser it's a PWA --> </head> <body> <div id="root"></div> <script src="/static/build/app.js"></script> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }).catch(function(err) { console.log(err) }); }); } else { console.log('service worker is not supported'); } </script> </body> </html>

LighthouseのWebサむトをもう䞀床分析したしょう。



やった これで、りェブサむトだけでなく、プログレッシブWebアプリができたした ダりンロヌド速床が劇的に向䞊したこずに気づいたかもしれたせん。 これは私たちがやっおいるこずずは䜕の関係もありたせん。Reactアプリケヌションの開発アセンブリを本番に眮き換えただけなので、レポヌトは可胜な限り矎しくなりたす。

さお、モバむルChromeからサむトにアクセスしたすが、䜕が芋えたすか


はい シャンパンを開けるこずができたす アプリケヌションをメむン画面に远加したす。



ボヌナスずしお、起動時にスプラッシュ画面が衚瀺されたす。これは、マニフェストで指定されたアむコン配列の名前、background_color、および512x512アむコンから収集されたす。


残念ながら、テキストの色は自動的に遞択されたす。これは、Skorotchetsaの堎合、スタむルをわずかに壊したす。

さお、アプリケヌション自䜓


制限事項


PWAは珟圚、ChromeずSafariiOSバヌゞョン11.3以降でのみサポヌトされおいたす。 さらに、Safariはこのテクノロゞヌを「静かに」サポヌトしおいたす。 ナヌザヌはアプリケヌションをメむン画面に远加できたすが、Chromeずは異なり、これに関するメッセヌゞはありたせん。

圹に立぀ヒントずコツ


1. Safariぞのむンストヌルの提案


Appleはこれを行わなかったのでただ行っおいないこずを願っおいたす、「手䜜業で」実装する必芁がありたす。 次のようになりたす。


次のJavaScriptコヌドによっお実装されたす。

  const isIos = () => { const userAgent = window.navigator.userAgent.toLowerCase(); return /iphone|ipad|ipod/.test( userAgent ); }; // ,        const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone); //     iOS   ,    if (isIos() && !isInStandaloneMode()) { this.setState({ isShown: true }); //   React }

2.むンストヌルの远跡


これはGoogle Chromeでのみ機胜したす。 appinstalledむベントをキャッチするスクリプトをHTMLに远加し、たずえば、これに関するメッセヌゞをサヌバヌに送信する必芁がありたす。

 <script> window.addEventListener('appinstalled', (evt) => { fetch(<your_url>, { method: 'GET', credentials: 'include', }); }); </script>

3. start_urlの正しい遞択


すべおのアプリケヌションペヌゞのURLは、マニフェストで指定されたstart_url継続であるこずに泚意しおください。 "start_url": "/app/"を指定し、ナヌザヌが "/ books /"などのペヌゞに移動するず、ブラりザヌのアドレスバヌがすぐに衚瀺され、すべおのナヌザヌ゚クスペリ゚ンスが䞭断されるためです。 さらに、人はだたされたように感じるでしょう。圌はアプリケヌションを䜿甚しおいるず思ったので、これは停装されたブラりザです。 マニフェストのtheme_colorさえ、ブラりザむンタヌフェむスを䌚瀟の色に色付けしたすが、保存されたせん。

Skorotchetsaの堎合、アプリケヌションに関連するすべおのペヌゞは/ app /で始たるため、このような事件はありたせん。

次は


さお、あなたはあなたのサむトを通しおスマヌトフォンのメむン画面でナヌザヌに到達する方法を知っおいたす。 しかし、これはドアの1぀にすぎず、ほずんどの堎合玄関ではありたせん。 2番目の郚分では、玄関から入る方法を説明したす。GooglePlayにプログレッシブWebアプリケヌションを配眮する方法を孊習したす。

䟿利なリンク


Source: https://habr.com/ru/post/J450504/

More articles:


All Articles