NitecoAppShellTemplate 1.0.1.3

.NET Framework
The owner has unlisted this package. This could mean that the package is deprecated, has security vulnerabilities or shouldn't be used anymore. 
dotnet add package NitecoAppShellTemplate --version 1.0.1.3
NuGet\Install-Package NitecoAppShellTemplate -Version 1.0.1.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="NitecoAppShellTemplate" Version="1.0.1.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add NitecoAppShellTemplate --version 1.0.1.3
#r "nuget: NitecoAppShellTemplate, 1.0.1.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// 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

  1. Install nuget package here

  2. 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>

  3. 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
}

  4. 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

  5. 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
}

  6. 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 Compatible and additional computed target framework versions.
.NET Framework net is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.