🧓🏽 🔨 👨🏿‍🚒 最小PWA 💐 🕵🏼 🤽🏼

Webアプリケーションが「プログレッシブ」の基準を満たすために必要な特性は何ですか？通常のWebアプリケーションと同様に、プログレッシブアプリケーションは「ビッグスリー」Webテクノロジー（HTML / CSS / JS）に基づいて構築されていることは明らかです。しかし、Webアプリケーションを進歩的にするものは何ですか？

この出版物では、Webアプリケーションが「プログレッシブ」と呼ばれるために現時点で満たす必要のある最小限の特性を見つけようとします。また、今年の8月に一部の「プログレッシブ」アプリケーションがそのようなものでなくなる理由についても回答します。

特性選択の原則

空白のHTMLファイルを取得し、それにアーティファクトを徐々に追加して、スマートフォンがこのアプリケーションのインストールを決定し、Chromeが警告のスローを停止するまで、それをPWAに変換します。Googleが現在PWAテクノロジーの主な推進力であるため、Chromeが選択されました。

HTTPS

サーバーで最初に構成するのは、トラフィックの暗号化です。ここでは、従来のWebアプリケーションと同じ方法ですべてが行われます。個人的に、私は使用のApache httpdのを、私はを通じて暗号化証明書を生成してみましょう暗号化。

アプリシェル

アプリケーションシェルは、アプリケーションをオフラインで実行できるようにするファイルの最小セットです。必要なすべてのコード（HTML / CSS / JS）を1つのファイルに最大限に収めようとします- index.html

。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>PWA</title>
    <style>
        BODY {
            background-color: #FB9902;
            color: #342309;
            font-size: xx-large;
            margin: 0;
        }

        DIV {
            align-content: center;
            display: grid;
            height: 100vh;
            justify-content: center;
        }
    </style>
</head>
<body>
<div>App Shell</div>
</body>
</html>

マニフェスト

マニフェストは、ページがプログレッシブWebアプリケーションの一部であることを示す直接的なマーカーです。マニフェストは、HTMLページのヘッダーに含まれています。

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

, manifest

rel

.

Chrome:

, Chrome :

{
  "start_url": "./",
  "name": "PWA",
  "display": "standalone",
  "icons": [
    {
      "src": "./icon.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

Icon

Chrome', 144x144 PNG, SVG WebP. :

Service Worker

Chrome - service worker'.

Service worker (index.html

):

<script>
    if ("serviceWorker" in navigator) {
        self.addEventListener("load", async () => {
            const container = navigator.serviceWorker;
            if (container.controller === null) {
                const reg = await container.register("sw.js");
            }
        });
    }
</script>

sw.js

:

'use strict';

Chrome: Page does not work offline

Stackoverflow , fetch

. :

'use strict';

function hndlEventFetch(evt) {}

self.addEventListener('fetch', hndlEventFetch);

Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

Chrome: Version 89.0.4389.72 (Official Build) (64-bit)

, :

, service worker , ( 2021-) .

PWA 2021-, , . service worker':

'use strict';
const CACHE_STATIC = 'static-cache-v1';

function hndlEventInstall(evt) {
    /**
     * @returns {Promise<void>}
     */
    async function cacheStaticFiles() {
        const files = [
            './',
            './demo.pwa.json',
            './icon.png',
            './index.html',
            './sw.js',
        ];
        const cacheStat = await caches.open(CACHE_STATIC);
        await Promise.all(
            files.map(function (url) {
                return cacheStat.add(url).catch(function (reason) {
                    console.log(`'${url}' failed: ${String(reason)}`);
                });
            })
        );
    }

    //  wait until all static files will be cached
    evt.waitUntil(cacheStaticFiles());
}

function hndlEventFetch(evt) {
    async function getFromCache() {
        const cache = await self.caches.open(CACHE_STATIC);
        const cachedResponse = await cache.match(evt.request);
        if (cachedResponse) {
            return cachedResponse;
        }
        // wait until resource will be fetched from server and stored in cache
        const resp = await fetch(evt.request);
        await cache.put(evt.request, resp.clone());
        return resp;
    }

    evt.respondWith(getFromCache());
}

self.addEventListener('install', hndlEventInstall);
self.addEventListener('fetch', hndlEventFetch);

service worker' Chrome 93+. :

, - favicon.ico

:

GET https://bwl.local.teqfw.com/favicon.ico 404

, PWA.

web- ( 2021-) :

(HTTPS).
( ).
( service worker).
.
Service worker.
.

PWA :

Chrome , 93 web- . PWA , Vue Storefront. Magento 2 , ( , Magento 2 web-).

, Vue Storefront, , , . , e- . , PWA , PWA . -, - - web, - -. web-, serverless ( App Shell, service worker', - ). , web- -, - .

Vue Storefront , . Vue Storefront , Chrome 93+ (, ). , PWA- Magento .

Google PWA, web' . , web- , 100% -. , PWA - :

In December 2020, Firefox for desktop abandoned implementation of PWAs (specifically, removed the prototype "site-specific browser" configuration that had been available as an experimental feature). A Firefox architect noted: "The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon." Mozilla still plans to support PWAs on Android.

Firefox PWA .

, PWA Google' :

- PWA- . "" .

私の意見では、PWAはモバイルデバイス向けの「ニッチ」ソリューションです。はい、Webテクノロジー（HTML / CSS / JS）を使用して作成され、ブラウザー内で実行されますが、PWA開発は、Webアプリケーション（サイトまたはSPA）の観点からではなく、ネイティブモバイルアプリケーションの観点からアプローチする必要があります。）。

つまり、Webアプリケーションだけが必要な場合は、PWAは必要ありません。ただし、モバイルアプリケーションを開発する必要がある場合は、PWAが受け入れられるオプションになる可能性があります。

最小PWA