Redaktörens anmärkning: Hej, det här dokumentet ger en översikt över hur du skapar en PWA-app för att komma igång. Det kanske inte ger dig fullständiga tekniska detaljer.
Progressiva webbappar, mer kända som Chrome-appar, är små webbappar som mestadels är inbäddade JavaScript och är kompatibla med alla större webbläsare.
Även om de är lätta, lyckas de inkludera de flesta av de nödvändiga funktionerna. Det tar bara ett par sekunder att installera, och anledningen till PWA:s popularitet är att den har allt man kan tänka sig.
Dessa appar erbjuder så många fördelar att många förlag har börjat integrera sina PWA-motsvarigheter på sina webbplatser.
Så om du är en utgivare eller utvecklare som vill hoppa på den här tåget, är den här guiden här för att hjälpa dig.
Här finns detaljerade instruktioner som hjälper dig att skapa, testa, skicka och sedan installera Progressive Web Apps på din dator.
Skapa PWA-app
Skapa en tom mapp på skrivbordet och ge PWA-appen samma namn som mappen.
Efter det måste du koda och skapa en manifestfil i den mappen. För det, använd en textredigerare som Anteckningar++ och skapa en ny JSON eller JavaScript-objektnotation arkiv.
Ange önskad information i manifestfilen för din PWA-applikation. Den måste ha följande värden:
- namn: namnet som visas i Chrome Web Store
- version — Versionen av metadata
- ikoner – En array som specificerar de ikoner som ditt element använder
- beskrivning — En sträng på 132 tecken (max) som beskriver dess tillägg
Här är till exempel en JSON-fil för ett bokmärkesprogram som du kan kolla in:
Går vi vidare, när kodningen är klar måste du verifiera att koderna är i rätt format. För det kan du använda ett JSON-valideringsverktyg som JSONLint.
Om valideringen lyckas, spara den här filen som manifest.json.
Därefter måste du designa en logotyp för din app. Se till att storleken är 128p gånger 128p. När logotypen har skapats, spara den som 128.png i samma mapp där din JSON-fil finns.
Det är allt. Du har skapat den önskade miniatyrversionen av en PWA-app. Låt oss nu sätta det på prov.
PWA App Test
Starta webbläsaren Chrome på din dator och gå till följande plats: chrome://extensions/ för att öppna Chrome-tilläggssidan. Aktivera utvecklarläge Växla från det övre högra hörnet på sidan och klicka på knappen Ladda uppackat.
Navigera nu och välj PWA-programmappen i utforskarfönstret och tryck på knappen Välj mapp.
När appen har laddats öppnar du en ny flik och klickar på appikonen i webbläsaren Chrome. Alternativt kan du besöka chrome://apps/ i adressfältet.
Välj din skapade PWA och kontrollera om den fungerar korrekt eller inte. Om du stöter på några problem gör du nödvändiga ändringar i manifest.json och laddar om paketet i Chrome via alternativet Ladda upp utan paketering som nämnts ovan.
Kontrollera nu igen och om du har åtgärdat alla fel, publicera det på Chrome Web Store.
Publicera din app i Chrome Web Store
Innan du fortsätter med att publicera appen måste du först kontrollera dina målgrupper. De är indelade i fyra segment:
- Offentlig: Din ansökan kommer att vara tillgänglig för alla.
- Ingår inte i listan: Endast tillgängligt för de som du delar direktlänken till din PWA med. Det skulle inte visas i Chrome Web Store.
- Privat: Endast tillgängligt för testare och felsökare vars namn du har inkluderat i utvecklarinstrumentpanelen.
- Gruppredaktörer– Tillgängligt för utgivare som har betalat en engångsavgift för utvecklare.
När du har fattat ett beslut, låt oss komma igång med stegen för att publicera din app. Först, skapa en ZIP-fil från ditt apppaket som har filen 128.png och manifest.json.
Därefter måste du registrera dig som Chrome Web Store-utvecklare. Gå till den här webbplatsen och fortsätt med instruktionerna på skärmen för att registrera dig som Chrome Web Store-utvecklare.
När du har skapat ditt konto går du till Chrome-utvecklaröversikten och loggar in med dina uppgifter. Klicka på Lägg till nytt föremål > Välj filen och navigera till ZIP-filen för din applikation; välj och tryck på knappen Ladda upp.
När filen har laddats upp måste du fylla i ytterligare information. Fyll i uppgifterna och klicka på knappen Skicka för granskning uppe till höger.
Efter det, markera kryssrutan om du vill göra PWA-appen offentlig med Auto Publish efter att den har godkänts, och klicka på Skicka för granskning i bekräftelsedialogrutan.
Din ansökan kommer att granskas och publiceras på Chrome virtuell butik om allt är bra (om du hade etablerat målgruppen för
Du får även recensionsstatus och publicerar den automatiskt om allt ser bra ut.
Installera PWA-appen på datorn
Nu när din app är publicerad installerar du den på din dator.
Gå till Chrome Web Store och öppna sidan med appinformation. Klicka på knappen Lägg till i Chrome (exempel nedan).
Klicka på knappen Lägg till tillägg i bekräftelsedialogrutan som visas.
Det är allt; Applikationen har installerats på din PC och finns tillgänglig på chrome://applications/.
Om du har lagt till din PWA-app på webbplatsen kommer processen att vara något annorlunda.
Gå till din webbplats och klicka sedan på installationsikonen längst till höger i adressfältet (som referens, låt oss ta Google Squoosh-webbplatsen för bildkomprimering)
Klicka på Installera i bekräftelserutan och sedan installerar den PWA.
Slutsats
Vi kompletterar guiden om hur du kan skapa en Chrome-applikation. På samma sätt har stegen för att publicera dem och sedan installera dem på din dator också listats.
Överväg att ställa in din demografi på offentlig om du vill att din PWA ska nå en bredare publik. Men om appen för närvarande är i testfasen är det bäst att tagga den Privat/Olistad, testa den noggrant och bara göra den offentlig.
Dessutom finns det ingen fast tidsram för när din ansökan ska verifieras. Det beror vanligtvis på vilken typ av ansökan du skickat in. Och vad resultatet än är kommer teamet att meddela dig via e-post.
Om du inte längre vill ha PWA-appen i webbläsaren, avinstallera den från tilläggssidan.
Med det sagt avslutar vi den här guiden om hur man skapar och installerar PWA-applikationen. Om du har några frågor om instruktionerna som nämns ovan, vänligen meddela oss.
Slutligen, om du har några idéer eller kommentarer om hur man skapar och installerar en progressiv webbapp på datorn, släpp gärna i kommentarsfältet nedan. Du kan också rapportera inaktuell information.
Artikeln har bidragit av Sadique Hassan; .
