maciejtreder/angular-universal-pwa

View on GitHub
application/src/app/home/home.component.html

Summary

Maintainability
Test Coverage
<h1>Home</h1>
<p>This application is a demo of <a href="https://github.com/maciejtreder/ng-toolkit" target="_blank" rel="noopener">Angular Universal Progressive Web App starter</a>.</p>
<p><strong>Don't forget to star it and share with others!</strong></p>
<h2>Getting started</h2>
<pre>
  npm install -g @ng-toolkit/init
</pre>
<pre>
  ng new --collection @ng-toolkit/init myAwesomeApp
  cd myAwesomeApp
  npm start
</pre>
<h2>What's inside?</h2>
<h3>PWA</h3>
<p><strong>Progressive Web App</strong> is an installable website which lives on the user's home screen and works offline. It offers a full-screen experience and can re-engage users with web push notifications.</p>
<h3>Angular Universal</h3>
<p><strong>Server-side rendering</strong>, here called Angular Universal - is a technique of rendering application content on the initial request. What customer gets, is fully rendered website and application packed in the js file.</p>
<p>Thanks to Angular Universal you got:</p>
<ul>
  <li>Better perceived performance</li>
  <li>Search Engine Optimization</li>
  <li>Site preview</li>
</ul>
<p>Learn more about Angular Universal <a href="https://universal.angular.io/" target="_blank" rel="noopener">here</a>.</p>
<h3>AMP</h3>
<p><strong>Accelerated Mobile Pages</strong> is an open-source initiative. The project enables the creation of web applications that are fast and high-performing across devices and platforms. You can learn more about  AMP project <a href="https://www.ampproject.org/" target="_blank" rel="noopener">here</a>.</p>
<h3>Serverless support</h3>
<p><strong>Serverless computing</strong> is a cost-effective environment for web applications. You pay only for those resources which you are factually using, instead of running your hosting 24 hours for 7 days a week.</p>
<p>Most popular Serverless environemnts are:</p>
<ul>
  <li>AWS Lambda</li>
  <li>Google Cloud Functions</li>
  <li>Azure Functions</li>
  <li>Webtasks</li>
</ul>
<h3>TransferState</h3>
<p>Decrease number of requests done by back-end and front-end. Read more on the <a routerLink="/transferState">TransferState page</a>.</p>
<h3>Funding</h3>
<p>This project is my 'after-hours' work. I am devoting my private time and resources for its <strong><i>continuous</i></strong> evolution. If you like it, I would appreciate if you donor it!</p>
<p>List of donors can be found on the <a routerLink="donors">donors page</a></p>
<p>Here is the list of pages where you can donor this project:</p>
<ul>
  <li><a href="https://opencollective.com/ng-toolkit">Open Collective</a></li>
  <li><a href="https://donorbox.org/ng-toolkit">Donorbox</a></li>
  <li><a href="https://liberapay.com/maciejtreder/donate">Liberapay</a></li>
</ul>