NitecoAppShellTemplate 1.0.1.3
dotnet add package NitecoAppShellTemplate --version 1.0.1.3
NuGet\Install-Package NitecoAppShellTemplate -Version 1.0.1.3
<PackageReference Include="NitecoAppShellTemplate" Version="1.0.1.3" />
paket add NitecoAppShellTemplate --version 1.0.1.3
#r "nuget: NitecoAppShellTemplate, 1.0.1.3"
// Install NitecoAppShellTemplate as a Cake Addin
#addin nuget:?package=NitecoAppShellTemplate&version=1.0.1.3
// Install NitecoAppShellTemplate as a Cake Tool
#tool nuget:?package=NitecoAppShellTemplate&version=1.0.1.3
Niteco PWA App Shell
Template to make PWA site and instroduction to make it become an app shell implementation.
Niteco PWA App Shell Install Guide
Install nuget package here
Edit your root layout _Root.cshtml like this:
<head> ... <link rel="manifest" href="/manifest.json" /> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="application-name" content="NitecoDemoPwa"> <meta name="apple-mobile-web-app-title" content="NitecoPwaTemplate"> <meta name="theme-color" content="#FF9800"> <meta name="msapplication-navbutton-color" content="#FF9800"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="msapplication-starturl" content="/"> <meta name="description" content="NitecoPwaTemplate"> <link rel="icon" sizes="128x128" href="/Static/img/logo-128x128.png"> <link rel="apple-touch-icon" sizes="128x128" href="/Static/img/logo-128x128.png"> <link rel="icon" sizes="128x128" href="/Static/img/logo-144x144.png"> <link rel="apple-touch-icon" sizes="128x128" href="/Static/img/logo-144x144.png"> <link rel="icon" sizes="128x128" href="/Static/img/logo-152x152.png"> <link rel="apple-touch-icon" sizes="128x128" href="/Static/img/logo-152x152.png"> <link rel="icon" sizes="192x192" href="icon-192x192.png"> <link rel="apple-touch-icon" sizes="192x192" href="/Static/img/logo-192x192.png"> <link rel="icon" sizes="256x256" href="/Static/img/logo-256x256.png"> <link rel="apple-touch-icon" sizes="256x256" href="/Static/img/logo-256x256.png"> <link rel="icon" sizes="512x512" href="/Static/img/logo-512x512.png"> <link rel="apple-touch-icon" sizes="512x512" href="/Static/img/logo-512x512.png"> ... </head>
and add this script at the bottom of body
<script src="/app.js" async></script> <script> // Check that service workers are registered if ('serviceWorker' in navigator) { // Use the window load event to keep the page load performant window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js', { scope: '/' }); }); } else { console.log('No need to register a new service worker!'); } </script>
Apply for HomePage:
@using EPiServer.Commerce.Marketing @using EPiServer.Reference.Commerce.Site.Features.Start.ViewModels @using NitecoAppShellTemplate @model StartPageViewModel @{ IEnumerable<PromotionViewModel> promotions = Model.Promotions; } @if (Request.IsAppShellAjaxRequest()) { Layout = null; } @if (EPiServer.Editor.PageEditing.PageIsInEditMode || Request.IsAppShellAjaxRequest()) { // Main content here }
Apply for ProductListingPage (under Category folder)
@using NitecoAppShellTemplate @model EPiServer.Reference.Commerce.Site.Features.Search.ViewModels.SearchViewModel<EPiServer.Reference.Commerce.Site.Features.Product.Models.FashionNode> @{ if (Request.IsAjaxRequest() || Request.IsAppShellAjaxRequest()) { Layout = null; } } @if (EPiServer.Editor.PageEditing.PageIsInEditMode || Request.IsAjaxRequest() || Request.IsAppShellAjaxRequest()) { // Main content here
Apply for Product detail (Index.cshtml, ProductWithoutEntries.cshtml) under Views/Product folder:
@using NitecoAppShellTemplate @model EPiServer.Reference.Commerce.Site.Features.Product.ViewModels.FashionProductViewModel @{ if (Request.IsAjaxRequest() || Request.IsAppShellAjaxRequest()) { Layout = null; } } @if (EPiServer.Editor.PageEditing.PageIsInEditMode || Request.IsAjaxRequest() || Request.IsAppShellAjaxRequest()) { // Main Product detail content here }
Change your container in your layout and update inside app.js
const mainContentContainerSelector = ".main-area";
NOTE : You also can take a look on: _SampleRoot.cshtml under Views\Shared\Layouts folder. Full tutorial coudl be found here: https://confluence.niteco.se/display/TD/How+to+apply+PWA+to+your+web+site
Copyright © 2020 - Niteco AB
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET Framework | net is compatible. |
This package has no dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|
Initial release of the NitecoAppShellTemplate addon.