Современные веб -приложения – Инфраструктура: Vue, Parcel & Workbox

Приложения для одной страницы (SPA) – это веб -приложения, которые содержатся на одной веб -странице, обеспечивая беспрепятственный опыт навигации из -за того, что не нужно загружать и анализировать HTML для каждой страницы. Прогрессивные веб-приложения (PWA) представляют собой веб-приложения, которые, используя работник службы «прокси» и манифестный файл, предоставляют необходимую инфраструктуру, чтобы разрешить наличие приложения браузером, чтобы можно было использовать в плохих или без сетевых условий. Все современные браузеры и OSES позволяют PWA «установлены» локально и, таким образом, обеспечивают пользовательский опыт, похожий на собственность.

PWA часто является жизнеспособной альтернативой созданию местного приложения, особенно для небольших команд, поскольку большинство магазинов приложений теперь принимают PWA, и все основные OSES (Windows, Android, iOS) позволяют устанавливать PWA и появляться на рабочем столе. PWA открываются мгновенно, и браузер может быть направлен на то, чтобы скрыть свои элементы управления, обеспечивая нативный вид и ощущение.

Современный инструмент может упростить разработку, но настройка его может быть трудоемкой задачей. Давайте посмотрим, как настроить проект SPA & PWA. Объем этого учебника состоит в том, чтобы описать настройку, а не каждую структуру/инструменты, в частности – каждый из этих инструментов имеет расширенную документацию, которая объясняет, как работает каждый.

Framework & Tools

Vue.js

Мы будем использовать экосистему Vue для тяжелой лифтинг:

• Vue.js Будет обращаться с нашими взглядами, предоставив декларативный подход в определении их и разделяя код в одно файловых компонентах,
• Vuex будет использоваться для государственного управления
• Vue Router будет использоваться для обработки спа -маршрутов

Node.js

Node.js предоставит поддержку коммунальных услуг и всех других утилит Это может потребоваться

Parcel.js

Посылка Бундлер будет использоваться для построения и объединения применения

Рабочая коробка

Рабочая коробка Будет обрабатывать детали обслуживания работника.

Макет файлов

• ./SRC будет содержать весь исходный код для этого проекта.

  • ./src/web будет содержать исходный код для веб -приложения (клиент HTML).
  • ./src/db (необязательно) будет содержать любые сценарии инициализации базы данных
  • ./src/server (необязательно) будет содержать любые серверные проекты

• ./dist будет содержать все сгенерированные артефакты и следует игнорировать в GIT

  • ./dist/web будет содержать построенное и объединенное веб -приложение.
  • ./dist/db (Необязательно) будет содержать любые артефакты, сгенерированные складами базы данных
  • ./dist/server (необязательно) будет содержать любые серверные проекты (скомпилированные)
• ./.cache будет генерироваться посылкой и должна быть проигнорирована в GIT
• ./node_modules будет сгенерирован NPM или посылкой и должен быть включен в GIT

Код

Код можно найти в Project GitHub Repo

Зависимости от JavaScript

Точка входа (index.html)

./src/web/index.html наша точка входа и просто связывает все вместе

• Ссылки .webmanifest файл
• Определяет точку монтажа VUE
• загружает сценарий, который содержит приложение Vue
• navigator.serviceworker.register ('/service-worker.js'); регистрирует сценарий работника обслуживания

Манифест

./src/web/manifest.webmanifest Описывает приложение и требуется, чтобы приложение считалось PWA. Важно поддерживать .webmanifest Расширение для совместимости посылок.

{
    "name": "My application name",  
    "short_name": "app",

    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6",

    "icons": [
        {
            "src": "/res/app-256.png",
            "type": "image/png",
            "sizes": "256x256"
        }
    ]
}

Сервисный работник (Workbox)

./src/web/service-worker.js реализует обслуживающего работника, который должен рассматривать приложение как PWA. Рабочая коробка Google используется. Workbox определяет несколько Stategies (Network-Prirst, Cache-First и Stail-While-revalidate). В этом примере все ресурсы обслуживаются с использованием стратегии первой сети, поскольку это самый реагированный подход и поддерживает возможность работать в автономном режиме.

console.log("service-worker.js")
// import service worker script
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-sw.js');

// Network First
[ 
    '/$',  // Index 
    '/*',  // Anything in the same host
    '.+/*' // Anything in any host 
]
.forEach(mask => {
    workbox.routing.registerRoute(
        new RegExp(mask),
        new workbox.strategies.NetworkFirst( { cacheName: 'dynamic' } ) 
    );
});

VUE SINGING

./src/web/index.js используется для связывания приложения VUE и нашего CSS (в SCSS). Он импортирует фреймворк Vue, наш код приложения Vue ( app.vue ) и наши стили ( styles.scss ) – Все эти файлы расположены в ./src/web/ Но мы используем относительные пути в импорте. Наконец мы установим наше приложение VUE к соответствующему элементу DIV.

import Vue from 'vue';

import App from './app.vue';
import './style.scss'

new Vue(App).$mount('#vueapp')

Приложение VUE

./src/web/app.vue Содержит наше приложение VUE в виде единого файлового компонента.

В <Шаблон> Мы строим простое навигационное меню и Router-View который является хостом для нашего приложения для одной страницы, все остальные страницы установлены в элементе маршрутизатора. В этом шаблоне мы используем положить вместо HTML.

В <Скрипт> Мы импортируем структуру VUE и два пользовательских модуля, _router.js и _store.js И мы создаем наше приложение VUE, расширив приложение VUE по умолчанию с помощью хранить и маршрутизатор Модули, которые мы только что загрузили.

В

Маршрутизатор

import Vue from "vue";

import VueRouter from 'vue-router';

Vue.use(VueRouter)

// 1. Import Components
import home    from './vues/home.vue'
import about   from './vues/about.vue'
import profile from './vues/profile.vue'

// 2. Define some routes
const routes = [
    { path: '/'       , component: home    },   
    { path: '/profile', component: profile },
    { path: '/about'  , component: about   }
]

// 3. Create & Export the router 
export const router = new VueRouter({
    routes: routes
})

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        name: 'Unknown'
    },

    // Usege: $store.commit('mutationan', parameter)
    mutations: {
        setName(state, name) {
            Vue.set(state, 'name', name);
        }
    }
});

Оригинал: "https://dev.to/sarmis/single-page-progressive-web-applications-with-vue-js-2op8"