Geekly articles weekly

PWA é fácil. Olá joomla

Continuando a estudar aplicativos da Web progressivos. Após a primeira parte teórica e um exemplo prático simples do Hello Habr, a segunda parte, tentaremos transferir o site da PWA para o CMS Joomla.

O tipo de estrutura do servidor não é importante. O objetivo deste artigo é mostrar a tradução de um site regular no PWA como um conceito que se aplica a sites arbitrários em qualquer estrutura.



Para começar, baixe e instale o Joomla. Durante a instalação, indicamos que é necessário preencher o site com dados de demonstração - selecione a opção "Blog". Chegamos aqui a esse site - https://tetta.nut.cc/habr/hello-joomla/original/ . Em seguida, copie todos os arquivos do site para o diretório https://tetta.nut.cc/habr/hello-joomla/ - agora temos duas instâncias de trabalho do site Joomla no mesmo banco de dados. Vamos deixar o primeiro como está e o segundo iremos transferir para a versão PWA.

O código fonte de um exemplo deste artigo pode ser visualizado no GitHub-e

Um pouco sobre a estrutura do Joomla
O Joomla tem o conceito de um modelo - um conjunto de recursos da web responsáveis ​​pelo nível de apresentação. Os modelos estão localizados no diretório / templates, nosso padrão "pronto para uso" é chamado protostar.

No caso geral, após receber uma solicitação do navegador, o Joomla inicia o mecanismo, faz suas próprias coisas e depois transfere a execução da solicitação para /templates/protostar/index.php, que já está gerando HTML para o cliente. Este arquivo é um arquivo PHP simples, no qual o uso de duas diretivas é adicionalmente possível:

<jdoc:include type="component" /> <jdoc:include type="modules" name="position-id" style="..." />

O primeiro insere, em vez disso, o material principal correspondente à URL solicitada (componente), o segundo - os módulos prescritos pelo administrador para a posição especificada. Qualquer página no Joomla consiste em um componente e módulos.

Se você olhar o modelo do site , poderá ver o bloco do material principal na parte central da página e não há módulos por aí. O menu superior é a posição 1, a coluna da direita com dois módulos "Postagens mais antigas" e "Postagens mais lidas" é a posição 7 e assim por diante.

imagem

O Joomla tem uma peculiaridade - se a solicitação GET recebida possui um parâmetro tmpl com algum valor de Página , o Joomla não transmite a execução da solicitação para index.php no arquivo de modelo, mas para somePage.php, se houver. Nós o usamos abaixo.


Shell de aplicação


Agora precisamos isolar o shell do aplicativo do site - o shell do aplicativo que está sendo criado. Ao desenvolver um site da PWA do zero, pode haver estratégias diferentes para isso, mas em um site finalizado é conveniente usar a divisão em suas partes estáticas e dinâmicas.

A estática é algo que raramente muda e pode fazer parte do shell do aplicativo. Por exemplo, o menu superior em nosso site pode ser considerado estático - ele é alterado apenas pelo administrador e ele pode solicitar explicitamente a atualização do shell do aplicativo nos navegadores clientes após editá-lo.

Ao mesmo tempo, o conteúdo em si, assim como os módulos na posição 7 e o módulo Breadcrumbs na posição 2, mostrando onde o usuário está atualmente no site, são dinâmicos. Eles devem ser carregados no navegador do cliente.

1. Alterações no servidor


Substitua todos os blocos dinâmicos pelo espaço reservado. No arquivo index.php do modelo, altere as diretivas:
 <jdoc:include type="component" />  <div id="main-content"></div> <jdoc:include type="modules" name="position-id" style="..." />  <div id="module-id"></div>

Também conectamos nosso arquivo javascript hello-joomla.js no index.php, além dos scripts do modelo.

Crie o arquivo main-content.php com o seguinte conteúdo:
 <jdoc:include type="component" />

Arquivo Module-2.php:
 <jdoc:include type="modules" name="position-2" style="none" />

E o arquivo module-7.php:
 <jdoc:include type="modules" name="position-7" style="well" />


O significado do que foi feito é que, quando você solicitar https://tetta.nut.cc/habr/hello-joomla/index.php/5-your-modules?tmpl=module-7 , obteremos apenas o código dos módulos localizados na posição- 7) A mesma coisa com o conteúdo.

Essas são todas as alterações na parte "servidor" do site. Em outras estruturas, essas operações (destacando o shell do aplicativo) provavelmente serão um pouco mais complicadas, mas aqui temos sorte.

2. lado do cliente


No hello-joomla.js, precisamos implementar o carregamento dinâmico de conteúdo e módulos. Além disso, você precisa alterar o comportamento de todas as tags <A> para que clicar no link inicie o carregamento dinâmico dos dados da página. Os módulos da coluna à direita serão carregados uma vez quando o site for aberto no navegador, e as trilhas de navegação e o conteúdo serão carregados toda vez que você clicar no link interno.
Isso também é fácil:

hello-joomla.js
 //   url  HTML  el function loadData(el, url){ url.indexOf("?") >= 0 ? url += "&" : url += "?"; url = url + 'mode=nocache&tmpl=' + el; fetch(url) .then( function(response) { if (response.status == 200) { response.text().then(function(data) { document.getElementById(el).innerHTML = data; }); } }) .catch(); return false; } //    <a>    function handleLinks() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; ++i) { links[i].removeEventListener("click", handleLink); links[i].addEventListener("click", handleLink); } } //   function handleLink(e) { e.preventDefault(); loadData("main-content", this.href); loadData("module-2", this.href); handleLinks(); return false; } //      function DOMLoaded() { loadData("main-content", location.pathname); loadData("module-2", location.pathname); loadData("module-7", location.pathname); handleLinks(); } document.addEventListener('DOMContentLoaded', DOMLoaded, true);


No momento, refizemos nosso site em um aplicativo completo de SPA - aplicativo de página única -. Há polimento à esquerda - o link "Voltar ao topo", estilos do menu superior, formulário de pesquisa, pré-carregador animado etc.
Uma cópia do site no modo SPA está disponível em https://tetta.nut.cc/habr/hello-joomla/spa/ .

3. SPA -> PWA


Nós conectamos o manifest e sw.js do exemplo anterior em index.php. Para impedir que o Service Worker armazene em cache solicitações dinâmicas, adicione "mode = nocache" ao URL no hello-joomla.js na função loadData.

Só isso. Pode ser corrigido na tela inicial.

Conclusões


Como você pode ver, para transformar um site em um aplicativo PWA, não são necessárias estruturas e kits de ferramentas. Tudo é feito à mão e o código permanece limpo e claro.

No próximo artigo, na forma de dicas úteis, levaremos funcionalmente o site para o nível de lançamento na produção. Restam melhorias padrão no SPA - o título da página no navegador, o Google Analitics, a verificação de que nada valioso saiu para os mecanismos de pesquisa. Faremos um gerenciamento conveniente de cache para o Service Worker-a para atualizar rapidamente os elementos do shell do aplicativo. Além disso, editores e comentaristas do site desejam inserir imagens da Internet nos materiais do site, inclusive por meio do protocolo http.

Um dos grandes recursos do conceito PWA é que ele traz à vida o paradigma MVC há muito perdido em diversas estruturas de servidor e navegador. A opção "Visualizar" agora está no cliente e o navegador acessa o servidor para obter os dados , não para a sua apresentação .

E, diferentemente dos SPAs convencionais, o PWA constrói esse "View" não com estruturas javascript pesadas, mas com o bom e velho html + css, rápido e claro.

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

More articles:


All Articles