Создание PWA приложений

Прогрессивные веб-приложения PWA позволяют ExtJS разработчикам расширить возможности приложения. С использованием PWA появляются две основные возможности, это кеширование AJAX запросов (посредством web workers , как следствие улучшается возможность offile работы приложения) и возможность добавлять ярлык приложения на Home Screen мобильного устройства, остальные плюсы можно почитать тут.  В этой статье мы расскажем вам :

• Что необходимо для создания PWA с помощью ExtJS
• Требования к PWA приложениям
• Кеширование AJAX запросов
• Управление конфигурацией стратегии кеширования

Создание PWA приложения

Для добавления PWA к приложению ExtJS необходимо определить progressive manifest в app.json приложения.

"progressive": {
      "manifest": {
         "name": "Progressive App",
         "short_name": "PWA",
         "icons": [
            {
               "src": "resources/pwa96.png",
               "sizes": "96x96"
            },
            {
               "src": "resources/pwa192.png",
               "sizes": "192x192"
            },
            {
               "src": "resources/pwa256.png",
               "sizes": "256x256"
            }
         ],
         "theme_color": "#054059",
         "background_color": "#054059",
         "display": "standalone",
         "orientation": "portrait",
         "start_url": "/index.html"
      }
}

Так же рекомендуется включить loader caching для js скриптов, css файлов и изображений, для этого в app.json необходимо внести изменения

"loader": {
         "cache": true,
         "cacheParam": "_dc"
},
"production": {
        ...,
        "loader": {
            "cache": true
        },
        ...
}

Требования к PWA приложениям

Работа с сервером посредством AJAX запросов разрешается только через https транспорт.

Для сборки необходимо:

• NodeJS  6+
• Cmd >= 6.5
• ExtJS >= 6.x

На стороне клиента необходимо

• Google Chrome Browser 56+
• Android 5.0+

Поддержка Egde обещана в будущем (на момент написания статьи) . Для Safari уже есть поддержка в beta версиях, подробнее тут.

Кеширование AJAX запросов

Для включения кеширования необходимо добавить соответствующий хинт к используемому proxy.

Ext.define('PWA.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    fields: [
       'name', 'email', 'phone'
    ],
    autoLoad: true,
    proxy: {
       // @sw-cache
       url: 'resources/personnel.json',
       type: 'ajax',
       reader: {
           type: 'json',
           rootProperty: 'items'
       }
    }
});

Управление конфигурацией @sw-cache

Для более сложных случаев рассмотрим пример

Ext.define('App.model.Event', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'date'],
    proxy: {
        type: 'rest', 
        // @sw-cache { urlPattern: "\\/api\\/events\\/\\d+", options: { cache: { name: 'events', maxEntries: 10 }}}
        url : '/events'
    }
});

Далее необходимо сконфигурировать web worker в соответствующей секции progressive manifest .

"progressive": {
    "serviceWorker": {
        "runtimeCaching": [
            {
                "urlPattern": "\\/api\\/events"
            }, 
            {
                "urlPattern": "\\/api\\/events\\/\d+",
                "options": {
                    "cache": {
                        "name": "events",
                        "maxEntries": 10
                    }
                }
            }
        ]
    }
}

О дополнительных конфигурациях @sw-cache рекомендуется ознакомиться тут.

PS

Помните что Web serive workers работают только в production сборках. Скачать пример PWA приложения можно тут.