JudahGabriel

SK122 Building rich app experiences with Progressive Web Apps: Session Resources

Session resources for developers from SK122 Building rich app experiences with Progressive Web Apps.

Making PWAs more capable

• Microsoft Edge explainers
• Project Fugu
• Features discussed in the session:
• Run on OS Login

JudahGabriel

/* The Sign In button itself */
pwa-auth::part(signInButton) {
  color: white;
  background-color: green;
  transform: rotate3d(0, 0, 1, 10deg);
}

/* The MS button */
pwa-auth::part(microsoftButton) {
  color: teal;

JudahGabriel

<pwa-auth
   credentialmode="prompt"
   microsoftkey="..."
   googlekey="..."
   facebookkey="...">
</pwa-auth>

JudahGabriel

<pwa-auth appearance="none"></pwa-auth>
<button id="myBtn">My Own Sign In Button</button>

<script>
  // Hook up our own button to pwa-auth sign-in flow
  const pwaAuth = document.querySelector("pwa-auth");
  const myBtn = document.querySelector("#myBtn");
  myBtn.addEventHandler("click", () => pwaAuth.signIn("Microsoft")); // Or Google or Facebook
</script>

JudahGabriel

<pwa-auth 
   appearance="list"
   microsoftkey="..."
   googlekey="..."
   facebookkey="...">
</pwa-auth>

JudahGabriel

<!-- To create a key, see https://github.com/pwa-builder/pwa-auth#creating-keys -->
<pwa-auth
   microsoftkey="..."
   googlekey="..."
   facebookkey="...">
</pwa-auth>

JudahGabriel

<script type="module" src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaauth/dist/pwa-auth.js"></script>

JudahGabriel

const pwaAuth = document.querySelector("pwa-auth");
pwaAuth.addEventListener("signin-completed", ev => {
    const signIn = ev.detail;
    if (signIn.error) {
        console.error("Sign in failed", signIn.error);
    } else {
        console.log("Email: ", signIn.email);
        console.log("Name: ", signIn.name);
        console.log("Picture: ", signIn.imageUrl);
        console.log("Provider (MS, Google, FB): ", signIn.provider);

JudahGabriel

using (var session = raven.OpenSession())
{
    var cowboys = session.Query<Cowboy>().Where(c => c.FavoriteColor == "Orange");
}

JudahGabriel

using (var session = raven.OpenSession())
{
    var cowboy = new Cowboy
    {
        Name = "Maunder, C.",
        FavoriteColor = "Orange"
    };
    session.Store(outlaw);
    session.SaveChanges();
}