DeepLinker for PWA and WEBAPP Example


#1

We are trying to create an PWA and WEBAPP with ionic2 and his DeepLinker, but we are not sure how to use the DeepLinker and how to combine the pages and components. We would create main - container page with fix menu and fix header.
The main page has to contain static simple menu and static simple Header, under the header there should be a div containing the dynamic pages. We think a simple WebAPP and in our opinion also a PWA.

In this Example we are using “app” as main page and have two mor pages “dashboard” and “sensor-config”.

Here are our files:

app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    Dashboard,
    SensorConfig
  ],
  imports: [
    IonicModule.forRoot(MyApp, {}, {
        links: [
            { component: Dashboard, name: 'Dashboard', segement: 'dashbaord' },
            { component: SensorConfig, name: 'SensorConfig', segement: 'sensor-config' }
        ]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Dashboard,
    SensorConfig
  ],
  providers: []
})
export class AppModule {}

app.html:
<ion-menu [content]=“content”>

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Lanthings</ion-title>
  </ion-navbar>

</ion-header>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.components.ts:

import { Component, ViewChild } from '@angular/core';

import { Platform, MenuController, Nav } from 'ionic-angular';

import { StatusBar } from 'ionic-native';

import { Dashboard } from '../pages/dashboard/dashboard';
import { SensorConfig } from '../pages/sensor-config/sensor-config';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage: any = SensorConfig;
  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Dashboards', component: Dashboard },
      { title: 'Configure', component: SensorConfig }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }
}

dashboard.html

<ion-content padding>
  <h1>Dashboard</h1>
  <h1>D1</h1>
  <h1>D2</h1>
  <h1>D3</h1>
  <h1>D4</h1>
  <h1>D5</h1>
</ion-content>

sensor-config.html:

<ion-content padding>
  <h1>Configure</h1>
  <h1>C1</h1>
  <h1>C2</h1>
  <h1>C3</h1>
  <h1>C4</h1>
  <h1>C5</h1>
</ion-content>

We hope that some of you (@mhartington, @brandyshea) can help us.
We are not shure if we are able to do this, but we think we should be able to do this and also many other people like to do this.
We are able to render ‘dashbaord’ and ‘sensor-config’ into ‘ion-nav’ from app.html, but the first line (h1) which is 'Dashboard" or “Configure” will be overload from the header from app.html, se picture below. So we are not sure, as many other peoples. How should we do a PWA with a static header and deeplinker in ionic2.

PLEASE can you help us? And give us the right solution for our example here?
Thx


DeepLinker & Ionic Menu & Guards & Lazy Loading
How to configure deeplinks in AppModule.forRoot()?
New Angular2 Router support in Ionic
#2

I created a provider that contains my navigation in the form of the deep linking array. I created an instance of this in the app.module.ts and pass the array property into the third parameter of the forRoot method in ionicModule. Then is my app.component.ts I inject it into the constructor and use the same deep links array as the data to iterate and create the menu.

I hope this helps.


#3

Hi, so do you use also a single page and dynamic content loading with deeplinker? Or do you use classical mobile navigation?


#4

Not sure yet about lazy loading with deep linker. I think they are still working on that.


#6

Why you mention lazy loading? My question not necessarily has to do with lazy loading, or? Can you explain better why do you wrote this?


#7

I assumed when you said “dynamic page content loading” you meant lazy loading. We are using basic navigation provided by ionic NavController. But I configure DeepLinker so I can potentially have deep links and breadcrumbs.


#8

No I wasn’t speaking about lazy loading. So you use classical ionic navigation, a header for each page. right?


#9

Hi @mhartington and @brandyshea
for sure I will not annoying you, but many of us are really interested to understand, how could we create a single page PWA+HYBRID app with ionic2 & deeplinker and others.

I know Ionic works as “one page per view” with dedicated header and menu per page like a classical android or ios app.

But what if our user experience is not a classical mobile app, and what if we want to create a single page app as we could do with angular2, but this using ionic2 to have a hybrid installable mobile app and use all there wonderful functions.

Do you really think this ideas are out of place? We don’t think so.


#10

Have you made any progress in having URL path navigation work? Our app is simply for the web platform, and we would like users to be able to type in URL paths for pages within the app. I am able to get the paths to be generated, but when typing them in the location bar they return a 404. I haven’t installed the plugin because I’m not sure it is needed and because I can’t see how to distinguish between a production and development server, since the server seems to be hard-coded on the command line for the plugin installation.

Any help you can provide would be greatly appreciated.


#11

Are you using ionic Deeplinker or did you implement angular-router?

Did you resolve your issue?


#12

I’m using DeepLinker. I got it to work by removing tabs from the app altogether.


#13

Hi there! Have you succeeded with your app? It seems like my team is trying to do something similar to your app - we want to just build PWA and android/ios app with one codebase. The idea of “one page per view” was a good one for apps but when it comes to building web pages it just doesn’t work well. I believe that your experience could be very valuable for me.


#14

I made a topic that describes what we’re going to do. I would appreciate any help and insights.